eslint-config-pbs-kids

A set of ESLint configuration rules for PBS KIDS JavaScript projects.

Setup

Include ESLint and this config as a dev dependency in your project.

npm i --save-dev eslint @pbs/eslint-config-pbs-kids

Next, create an ESLint configuration file eslint.config.js with the following contents:

import kidsConfig from '@pbs/eslint-config-pbs-kids';

...

const eslintConfig = [
  {
    ...
    ...kidsConfig,
  },
  ...
];

export default eslintConfig;

If you're updating from ESLint from version 8 to version 9, see the migration guide: https://eslint.org/docs/latest/extend/plugin-migration-flat-config.

Lastly, you can add scripting to support lint passes over your code in package.json:

{
  ...
  "scripts": {
    ...
    "lint": "eslint src/**/*.js",
    ...
  },
  ...
}

You can also configure ESLint to automatically fix errors inline, via the --fix option:

{
  ...
  "scripts": {
    ...
    "lint": "eslint --fix src/**/*.js",
    ...
  },
  ...
}

Web Projects

eslint-plugin-compat

You can lint for specific browser feature support with eslint-plugin-compat by following these steps:

1. Install it in your project:

   npm i --save-dev eslint-plugin-compat

2. Add the following to your project's package.json to enable support for browsers PBS KIDS cares about.

   ...
   "browserslist": [
     "defaults",
     "not op_mini all <= 999",
     "not Opera <= 999",
     "not IE <= 999",
     "firefox >= 72",
     "chrome >= 79",
     "and_chr >= 79",
     "safari >= 12",
     "ios_saf >= 12",
     "edge >= 88"
   ]

3. Add plugin:compat/recommended to your .eslintrc.js:

   module.exports = {
      ...
      'extends': [
        '@pbs/eslint-config-pbs-kids',
        'plugin:compat/recommended',
      ]
      ...
   };

4. Run npx browserslist from project directory to see which browsers match those queries and confirm that list makes sense.

Safari Support

eslint-plugin-compat doesn't catch everything in older Safari versions, so we've made a custom rule to help us with those particular cases. Use it by adding this to your rules object within eslintrc:

  ...
  'rules': {
    ...
    'pbs-kids/support-minimum-safari-version': [
      'error',
      12, // or whichever minimum Safari version we're now supporting.
    ],
    ...
  },
  ...

More Resources

Here's also some handy links:

• List of available ESLint rules if you need to configure more
• How to set the environment (like Browser, or Node, so that built-in globals work correctly).
• How to add globals for certain libraries (like SpringRoll) that sometimes export globals