ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
Prettier is an opinionated code formatter. It ensures a consistent style by parsing your code and re-writing it with its rules.
If you are using VScode, and already have the ESLINT and PRETTIER plugins, as you are goigng to change the configuration as you follow the tutorial, you might have linter/prettier errors displayed, the solution is to restart VSCode.
In your git working folder running the following command will guide you with the ESLint configuration, we are going to use the airbnb style guide:
npm init @eslint/config
? How would you like to use ESLint? …
To check syntax only
To check syntax and find problems
❯ To check syntax, find problems, and enforce code style
Select To check syntax, find problems, and enforce code style
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
For React / React-Native, you probably use import/export!
? Which framework does your project use? …
❯ React
Vue.js
None of these
Use React, but it also works with Vue.js
.
? Does your project use TypeScript? › No / Yes
up to you. Here I went for No.
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node
I tend to use both (even for pure React project)
? How would you like to define a style for your project? …
❯ Use a popular style guide
Answer questions about your style
and now we can choose the style:
? Which style guide do you want to follow? …
❯ Airbnb: <https://github.com/airbnb/javascript>
Standard: <https://github.com/standard/standard>
Google: <https://github.com/google/eslint-config-google>
XO: <https://github.com/xojs/eslint-config-xo>
? What format do you want your config file to be in? …
❯ JavaScript
YAML
JSON
I prefer using an .eslintrc.js
but up to you if one prefer a different flavour.
Checking peerDependencies of eslint-config-airbnb@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:
eslint-plugin-react@^7.28.0 eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0
? Would you like to install them now? › No / Yes
Select yes to install the dependencies. And choose your package manager:
? Which package manager do you want to use? …
❯ npm
yarn
pnpm
Installing eslint-plugin-react@^7.28.0, eslint-config-airbnb@latest, eslint@^7.32.0 || ^8.2.0, eslint-plugin-import@^2.25.3, eslint-plugin-jsx-a11y@^6.5.1, eslint-plugin-react-hooks@^4.3.0
up to date, audited 208 packages in 1s
85 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Successfully created .eslintrc.js file in XXX/YYY
Today is a good day, all packages are safe with 0 vulnerabilities.
Now, your package.json
file contains these dev dependencies
"devDependencies": {
"eslint": "^8.36.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0"
}
Now let's have a look at the eslintrc file. It looks like that:
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: ['plugin:react/recommended', 'airbnb'],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react'],
rules: {},
}
Adding prettier to the configuration
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
added 5 packages, and audited 213 packages in 4s
86 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
create a .prettierrc.js file
module.exports = {
singleQuote: true,
}
Read more about the other options on prettier website.
Time to update the .eslintrc.js
file, adding the prettier recommended plugin
extends: [
'plugin:react/recommended',
'airbnb',
'plugin:prettier/recommended',
],
add two scripts in the package.json
file
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint -fix ."
},
then you will be able to run
npm run lint
just to check your code
npm run lint:fix
to check and automatically fix what can be fixed.
Pre-commit Hook with lint-staged
Running lint-staged...
husky - Git hooks installed
husky - created .husky/pre-commit
This adds husky to hook the pre-commit and run the lint-staged script added to the project’s package.json
file
Read more at the lint-staged repo.
now let's create two files .eslintignore
, and .prettierignore
with the same content:
node_modules/
build/
coverage/
You are all set happy coding!
Resources
- Photo by Andrea De Santis on Unsplash
Top comments (0)