Eslint 经典配置

package.json:

{
"dependencies": {
"babel-eslint": "^10.0.3",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^2.2.0",
"react": "^16.11.0"
}
}

.eslintrc.js :

module.exports = {
parser: 'babel-eslint', // 指定 eslint 的解析器 / Specifies the ESLint parser
parserOptions: {
ecmaVersion: 2015, // 指定 js 语法版本 / specify the version of ECMAScript syntax you want to use: 2015 => (ES6)
sourceType: 'module', // 允许使用 imports / Allows for the use of imports
ecmaFeatures: {
jsx: true, // 启用 JSX / enable JSX
impliedStrict: true // 允许使用全局严格模式 / enable global strict mode
}
},
extends: [
'airbnb', // 使用 airbnb 库 / Uses airbnb, it including the react rule(eslint-plugin-react/eslint-plugin-jsx-a11y)
'plugin:promise/recommended',
// 'prettier', // 使用 prettier / Use prettier, it can disable all rules which conflict with prettier
// 'prettier/react' // Use prettier/react to pretty react syntax
],
settings: {
'import/resolver': { // This config is used by eslint-import-resolver-webpack
webpack: {
config: './webpack/webpack-common-config.js'
}
},
},
env: {
browser: true // enable all browser global variables
},
'plugins': ['react-hooks', 'promise'], // ['prettier', 'react-hooks']
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. '@typescript-eslint/explicit-function-return-type': 'off',
"react-hooks/rules-of-hooks": "error",
"linebreak-style": ["off", "windows"],
"semi": ["error", "never"],
"react/jsx-one-expression-per-line": 0,
"no-use-before-define": ["off", { "functions": true, "classes": true }],
"prefer-arrow-callback": ["off", { "allowNamedFunctions": true }]
/**
* @description rules of eslint-plugin-prettier
*/
// 'prettier/prettier': [
// 'error', {
// 'singleQuote': true,
// 'semi': false
// }
// ]
},
};

使用 npm install 安装依赖

然后后在配置中选择 Eslint: Auto Fix On Save 为 true