Following the Airbnb style guide , setup our edit for react project
settings.json
{
// Tailwind Intellisence support (stop css default support then active tailwind emmet)
"css.validate": false,
"tailwindCSS.emmetCompletions": true,
// config related to code formatting
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"[javascriptreact]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"javascript.validate.enable": false, //disable all built-in syntax checking
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.tslint": true,
"source.organizeImports": true
// "eslint.format.enable": true
},
"eslint.alwaysShowStatus": true,
// emmet
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
create .eslintrc.json file in root directory add this below line
{
"extends": [
"airbnb",
"airbnb/hooks",
"eslint:recommended",
"prettier",
"plugin:jsx-a11y/recommended"
],
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 8,
"requireConfigFile": false,
"babelOptions": {
"presets": ["@babel/preset-react"]
}
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"rules": {
"react/react-in-jsx-scope": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": 0,
"react/state-in-constructor": 0,
"indent": 0,
"linebreak-style": 0,
"react/prop-types": 0,
"jsx-a11y/click-events-have-key-events": 0,
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", ".jsx"]
}
],
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 4,
"semi": true,
"endOfLine": "auto"
}
]
},
"plugins": ["prettier", "react", "react-hooks"]
}
Install dev - dependencies (just add package.json then yarn install)
"devDependencies": {
"@babel/eslint-parser": "^7.16.5",
"@babel/preset-react": "^7.16.7",
"eslint": "^8.6.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"prettier": "^2.5.1"
}
Or Add lint into script section in package.json
scripts: {
"lint": "yarn add -D prettier && yarn add -D @babel/eslint-parser && yarn add -D @babel/preset-react && npx install-peerdeps --dev eslint-config-airbnb && yarn add -D eslint-config-prettier eslint-plugin-prettier"
}