- Linting rules using Airbnb style guide & ESLint
- Formatting code with the Prettier Extension
- Using absolute paths/imports with jsconfig.json
The following installation & setup guide is for the create-react-app
and are only tested using it and not on other React app configurations.
-
More advanced configurations of webpack & babel are possible but are not included in this guide.
-
These guide uses
npm
as installation, although you can use YARN but commands are not provided.
Install all devDependencies in one line
npm install eslint eslint-config-airbnb eslint-config-node eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier --save-dev
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.
npm install eslint --save-dev
- It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.
npm install eslint --global
NPM Package Link: eslint-config-airbnb
Run For React Projects
npm info "eslint-config-airbnb@latest" peerDependencies
OR Shortcut For React Projects
npx install-peerdeps --dev eslint-config-airbnb
If npm errors out and you receive a message like ERR undefined
in your terminal try :
npm install [email protected] eslint@^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react@^7.21.5 eslint-plugin-react-hooks@^1.7.0 --save-dev
This will walk you through a config setup. Skip if you wish and just go to create a .eslintrc.json
file yourself.
If you make a mistake in the setup it doesn't matter. You can change anything in the .eslintrc.json
file whenever you wish.
npx eslint --init
echo {}> .eslintrc.json
Add to the .eslintrc.json config file for example:
- Note if you don't want to use Prettier mentions of it in this file
// .eslintrc.json
{
"extends": ["airbnb", "airbnb/hooks", "plugin:prettier/recommended"],
"plugins": ["react", "prettier"],
"rules": {
"prettier/prettier": "error",
"no-unused-vars": "warn",
"no-console": "warn",
"func-names": "off",
"no-process-exit": "off",
"object-shorthand": "off",
"class-methods-use-this": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
},
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src/"]
}
}
}
}
You can also create an ESLint ignore file .eslintignore
to ignore folders or files
// .eslintignore
public/**
node_modules/**
coverage/**
src/registerServiceWorker.js
-
Note For Usage Without React Use eslint-config-airbnb-base
Get the Prettier Extension & Install for VS Code
Install Prettier locally
npm install --save-dev --save-exact prettier
Create an empty config file with Git
touch .prettierrc
Add to .prettierrc your configuration settings for example:
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 70
}
Instead of...
import Icon from './../../components/icon';
Absolute paths allow imports like so:
import Icon from components/icon';
To use absolute paths in React
- Create jsconfig.json file with Git
touch jsconfig.json
- & add something like...
{
"compilerOptions": {
"baseUrl": "src",
"module": "commonjs",
"target": "es2016",
"jsx": "react"
},
"exclude": ["node_modules", "**/node_modules/*"],
"include": ["src"]
}
In the above example we assume that the src
folder is the directory where all the code lives for the React project.
Therefore src
will be your base path for the imports. Otherwise you can modify the configuration above to fit your project's needs.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
"exclude": ["node_modules", "**/node_modules/*"],
or the include
line allows refers to including or excluding node modules from these from type checking & and Intellisense stuff in VS Code. See more details about setuping up a jsconfig in the VS Code docs: Working with JavaScript