gatsby-plugin-eslint
Adds ESLint to your Gatsby dev environment, maintaining code quality as you develop.
NOTE: Plugin has different installation and usage instructions to support both Gatsby V1 and V2.
Install
Gatsby V2 Instructions
-
Install the gatsby-plugin-eslint
plugin:
npm install --save-dev gatsby-plugin-eslint
or
yarn add --dev gatsby-plugin-eslint
-
Install ESLint and eslint-loader
:
npm install --save-dev eslint eslint-loader
or
yarn add --dev eslint eslint-loader
Gatsby V1 Instructions
-
Install the gatsby-plugin-eslint
plugin:
npm install --save-dev gatsby-plugin-eslint@^1.0.3
or
yarn add --dev gatsby-plugin-eslint@^1.0.3
-
Install ESLint and eslint-loader
:
npm install --save-dev eslint eslint-loader
or
yarn add --dev eslint eslint-loader
Usage
-
Create a .eslintrc
file in your project root. Otherwise ESLint will complain.
-
Add into gatsby-config.js
.
module.exports = {
plugins: [
'gatsby-plugin-eslint'
]
}
If no options are specified, the plugin defaults to:
- Lint
.js
and .jsx
files. - Exclude
node_modules
, .cache
, and public
folders from linting. Refrain from naming your project these folder names, otherwise make your own config option exclusions. - Only lints in development in the
'develop'
stage. You may enable linting during other build/dev stages by adding any Webpack Config Stage into the stages
array. For example, adding 'build-javascript'
into the stages
array will enable linting during JS build time. - Default ESLint-Loader options.
You can specify your own linting filetypes, exclusions, and ESLint-Loader options:
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-eslint',
options: {
test: /\.js$|\.jsx$/,
exclude: /(node_modules|.cache|public)/,
stages: ['develop'],
options: {
emitWarning: true,
failOnError: false
}
}
}
]
}
Configuring ESLint
You're free to install your own ESLint plugins and rules. Here are 2 easy ways to start linting:
-
Follow eslint-plugin-react
plugin installation procedures:
npm install --save-dev babel-eslint eslint-plugin-import eslint-plugin-react
or
yarn add --dev babel-eslint eslint-plugin-import eslint-plugin-react
-
Add .eslintrc
file to project root:
{
"parser": "babel-eslint",
"rules": {
"strict": 0
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
}
-
Follow eslint-config-airbnb
plugin installation procedures:
npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
or
yarn add --dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
-
Add .eslintrc
file to project root:
{
"extends": "airbnb"
}