Shared ESLint config for Mapbox engineering teams.
-
Install the following dev-dependencies:
npm install --save-dev \ @mapbox/eslint-config-mapbox
-
Extend the
@mapbox/eslint-config-mapbox
config in your.eslintrc
(oreslintConfig
key in yourpackage.json
):"eslintConfig": { "extends": "@mapbox/eslint-config-mapbox" }
For TypeScript, prefer
.eslint.js
and use the snippet below:'plugins': [ '@typescript-eslint', 'prettier' ], 'parserOptions': { 'tsconfigRootDir': __dirname }, 'extends': [ '@mapbox/eslint-config-mapbox/node20-typescript' ]
-
Specify the version of Node.js your project uses by setting
.engines.node
in yourpackage.json
, according to the settings you choose."engines": { "node": ">=20" }
-
Run
eslint
on your project as part of yourtest
andlint
scripts:"scripts": { "lint": "eslint --ignore-path .eslintignore --ext .js,.ts .", "test": "tape test/*.test.js && npm run lint", }
The "Quick start" above exemplifies usage of this package with standard Node.js code.
Depending on the ECMAScript version of your code, whether you are using non-standard syntax like Flow and React's JSX, or other considerations, you may want to extend a variety of configurations provided by this package. eslint-config-mapbox
exposes several configurations targeting specific ESLint plugins, each named after the plugin it targets.
To use each plugin-specific configuration, you'll need to do the following:
-
Install as dev-dependencies
@mapbox/eslint-config-mapbox
,eslint
, and any plugins that are used by the configuration(s) you are extending, such aseslint-plugin-node
oreslint-plugin-react
. -
Add the configuration(s) you are using to the
"extends"
array in your project's ESLint configuration, like this:{ "extends": [ "@mapbox/eslint-config-mapbox/react", "@mapbox/eslint-config-mapbox/import", "@mapbox/eslint-config-mapbox/promise" ] }
@mapbox/eslint-config-mapbox
/node
- Depends on eslint-plugin-node.
- For Node.js and CommonJS.
- Specify the version of Node.js your project uses by either setting
.engines.node
in yourpackage.json
, or by extending an LTS-version-specific ESLint configuration:node10
,node12
,node14
,node14-typescript
,node20
,node20-typescript
.
@mapbox/eslint-config-mapbox
/react
- Depends on eslint-plugin-react.
- For React and JSX.
@mapbox/eslint-config-mapbox
/import
- Depends on eslint-plugin-import.
- For ES2015 modules (
import
andexport
).
@mapbox/eslint-config-mapbox
/promise
- Depends on eslint-plugin-promise.
- For
Promise
s.
@mapbox/eslint-config-mapbox
/xss
- Depends on eslint-plugin-xss.
- For avoiding potential XSS issues in front end JavaScript.
- Does not perform any JavaScript style linting if used on its own.
If you are using Prettier to format your JS, install eslint-config-prettier and add it at the end of your "extends"
array. It will turn off all ESLint rules related to the code-style preferences that Prettier already addresses.