@pbs/eslint-config-pbs-kids

eslint-config-pbs-kids

A set of ESLint rules for PBS KIDS JavaScript and TypeScript 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 { defineConfig } from 'eslint/config';
import kidsConfig from '@pbs/eslint-config-pbs-kids';

...

const eslintConfig = defineConfig([ ...otherConfigsYouMayBeUsing, {
  extends: [
    kidsConfig,
  ],
  rules: {
    // Add any project-specific rules here.
  }
} ]);

export default eslintConfig;

or in TypeScript:

import { defineConfig } from 'eslint/config';
import kidsTypescriptConfig from '@pbs/eslint-config-pbs-kids/typescript';
import typescriptEslint from '@typescript-eslint/eslint-plugin';

const eslintConfig = defineConfig([ ...otherConfigsYouMayBeUsing, {
  extends: [
    // The option argument passed here is optional.
    kidsTypescriptConfig({
      // Pass in your project's `@typescript-eslint` plugin here, but only if you are already loading other TypeScript rules that invoke that plugin.
      // This is to avoid loading the plugin twice, which can cause errors.
      plugin: typescriptEslint,

      // Apply various levels of rules for TypeScript projects. Value can be set to a number 1-4. The default is 2.
      // You can also set the environment variable `KIDS_TSLINT_STRICT` to override this value.
      // Example usage: `KIDS_TSLINT_STRICT=3 npm run lint` will apply level 3 rules for that run only.
      strictLevel: 2,
    }),
  ],
  rules: {
    // Add any project-specific rules here.
  }
} ]);
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.

You can then add scripting to support lint passes over your code in your 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": [
      "chrome 111",
      "edge 111",
      "firefox 111",
      "safari 15"
    ],

3. Add the plugin to your eslint.config.js:

   ...
   import compat from 'eslint-plugin-compat';
   
   module.exports = {
      ...
      {
        extends: [
          compat.configs['flat/recommended'],
        ],
      },
      ...
   };

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

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