Table of Contents
- 1. Installing VSCode Extensions
- 2. Installing the following packages as devDependencies
- 3. Creating configuration files
- 4. Overriding VSCode Settings
- That's it!
In this article, we will configure linting in React projects with VSCode.
1. Installing VSCode Extensions
First, you need to install the following extensions in VS Code.
2. Installing the following packages as devDependencies
- eslint
- eslint-config-airbnb
- eslint-config-prettier
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-prettier
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-testing-library
- eslint-plugin-jest
- jest
- prettier
by simply running the following command in the terminal.
npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-testing-library eslint-plugin-jest jest prettier
3. Creating configuration files
Create the following files in the root (same level as /src folder) of your project
- .eslintrc.json
- .eslintignore
- .prettierrc
- .prettierignore
.eslintrc.json
{
"root": true,
"settings": {},
"env": {
"browser": true, // Enables browser globals like window and document
"amd": true, // Enables require() and define() as global variables as per the amd spec.
"node": true, // Enables Node.js global variables and Node.js scoping.
"jest/globals": true,
"es2021": true
},
"parserOptions": {
"ecmaVersion": 2020, // Use the latest ecmascript standard
"sourceType": "module", // Allows using import/export statements
"ecmaFeatures": {
"jsx": true // Enable JSX since we're using React
}
},
"extends": [
"airbnb",
"prettier",
"plugin:testing-library/react",
"plugin:jest/all"
],
"plugins": ["prettier", "react", "react-hooks", "testing-library", "jest"],
"rules": {
"prettier/prettier": ["warn", {}, { "usePrettierrc": true }], // Use .prettierrc file as source
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], // To allow importing .jsx files
"no-console": 1,
"no-unused-vars": 1,
"import/no-unresolved": 2,
"no-undefined": 2,
"react/jsx-uses-vars": 2
// add more rules here...
}
}
.eslintignore
node_modules
.prettierrc
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "all",
"endOfLine": "auto"
}
.prettierignore
node_modules
4. Overriding VSCode Settings
Create .vscode folder and inside of it settings.json file
This is important due to different VSCode options among developers working on the same project.
settings.json
{
"eslint.options": {
"overrideConfigFile": ".eslintrc.json"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
That's it!
Now Press Ctrl + Shift + U to open the Output tap in VSCode, and from the Drop Down Menu select ESLint you should see something like this:
[Info - 3:31:54 PM] ESLint server is starting
[Info - 3:31:55 PM] ESLint server running in node v14.16.0
[Info - 3:31:55 PM] ESLint server is running.
Top comments (0)