Project root:
yarn add -D --save-exact eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier eslint-config-react-app eslint-import-resolver-typescript eslint-webpack-plugin eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks babel-eslint eslint-plugin-jest @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier prettier-eslint prettier-eslint-cli eslint-plugin-prettier
$ vim .eslintrc
{
"plugins": ["prettier", "@typescript-eslint"],
"extends": ["airbnb-typescript", "react-app", "prettier"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"settings": {
"import/resolver": {
"typescript": {
"alwaysTryTypes": true
}
}
},
"rules": {
"object-curly-spacing": ["warn", "always"],
"no-unused-vars": [
"warn",
{
"vars": "all",
"args": "none"
}
],
"@typescript-eslint/semi": [
"off"
],
"@typescript-eslint/no-unused-vars": [
"warn",
{
"vars": "all",
"args": "none"
}
],
"@typescript-eslint/no-explicit-any": [
"error",
{
"ignoreRestArgs": true
}
],
"max-len": [
"warn",
{
"code": 80,
"ignoreStrings": true,
"ignoreTemplateLiterals": true,
"ignoreComments": true
}
],
"no-plusplus": [
"error",
{
"allowForLoopAfterthoughts": true
}
],
"react/jsx-key": "error",
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.test.js",
"**/*.test.jsx",
"**/*.test.ts",
"**/*.test.tsx",
"src/tests/**/*"
]
}
],
"react/jsx-props-no-spreading": "off",
"import/prefer-default-export": "off",
"react/jsx-boolean-value": "off",
"react/prop-types": "off",
"react/no-unescaped-entities": "off",
"react/jsx-one-expression-per-line": "off",
"react/jsx-wrap-multilines": "off",
"react/destructuring-assignment": "off"
}
}
$ vim .eslintignore
build/*
public/*
docs/*
templates/*
src/react-app-env.d.ts
src/serviceWorker.ts
$ vim .prettierrc
{
"trailingComma": "es5",
"printWidth": 100,
"semi": false,
"singleQuote": true,
"tabWidth": 2
}
$ vim package.json
"scripts": {
..
..
..
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
"format": "prettier --write 'src/**/*.{ts,tsx,scss,css,json}'",
"isready": "npm run format && npm run lint && npm run build"
}
Give it a try:
$ yarn run lint
$ yarn run format
On a Windows 10 machine (not that it matters)
PS C:\repo\poc\my-app> yarn run lint
yarn run v1.22.10
$ eslint --ext .js,.jsx,.ts,.tsx src --color
Oops! Something went wrong! :(
ESLint: 7.20.0
Error: Cannot read config file: C:\repo\poc\my-app\node_modules\eslint-config-airbnb-typescript\lib\shared.js
Error: Cannot find module 'eslint-config-airbnb-base/rules/best-practices'
Require stack:
Referenced from: C:\repo\poc\my-app\node_modules\eslint-config-airbnb-typescript\index.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (C:\repo\poc\my-app\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object. (C:\repo\poc\my-app\node_modules\eslint-config-airbnb-typescript\lib\shared.js:2:43)
at Module._compile (C:\repo\poc\my-app\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.