npm package: @pbs/eslint-config-pbs-kids
Description: A set of ESLint rules for PBS KIDS JS projects.
Author: kidstech@pbs.org
Latest version: 2.0.7

# 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.

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

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

```javascript
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:

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

You can also configure ESLint to automatically fix errors inline, via the [`--fix` option](https://eslint.org/docs/user-guide/command-line-interface#--fix):

```json
{
  ...
  "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:

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

1. Add the following to your project's `package.json` to enable support for [browsers PBS KIDS cares about](https://docs.google.com/document/d/1W4j3LroeybUt_N0nvW6eVTzTS4yWze8bBa6TXPS_SZ4/edit#heading=h.gjdgxs).

   ```json
   ...
   "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"
   ]
   ```

1. Add `plugin:compat/recommended` to your `.eslintrc.js`:

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

1. 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`:

```javascript
  ...
  '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](https://eslint.org/docs/rules/) if you need to configure more
- How to [set the environment](https://eslint.org/docs/user-guide/configuring#specifying-environments) (like Browser, or Node, so that built-in globals work correctly).
- How to [add globals](https://eslint.org/docs/user-guide/configuring#specifying-globals) for certain libraries (like SpringRoll) that sometimes export globals