eslint 是什么
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：
-
ESLint 使用 Espree 解析 JavaScript。
-
ESLint 使用 AST 去分析代码中的模式
-
ESLint 是完全插件化的。每一个规则都是一个插件并且可以在运行时添加更多的规则。
安装
npm install eslint --save-dev
eslint + webpack + babel
安装 loader
npm install eslint-loader --save-dev
配置webpack
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader", "eslint-loader"]
},
....
]
},
eslint 配置 新建.eslintrc 文件
{
"rules": {}
}
重启后，遇到解析错误，例如“保留关键字'import'或保留'关键字'export”。发生错误是因为ESLint尚不知道启用Babel的JavaScript功能。例如，导入或导出语句是JavaScript ES6功能。因此，您必须使用babel-eslint节点程序包来整理有效的Babel解释JavaScript的源代码。从项目的根目录中键入。
npm install babel-eslint --save-dev
然后，在.eslintrc配置文件中，将babel-eslint添加为解析器：
{
"parser": "babel-eslint", // 解析器
"rules": {}
}
现在重启，还没有配置规则，不会报任何错误
eslint 规则
{
...
"rules": {
"max-len": [1, 70, 2, {ignoreComments: true}] // 检查行代码字符不能超过 70 个字符
}
...
}
现在，为每个JavaScript项目提出一套ESLint规则将非常麻烦。这就是为什么可以将它们共享为库（节点程序包）的原因。有多种可共享的ESLint配置，但是，最受欢迎的一种是基于Airbnb样式指南的Airbnb ESLint配置。除了项目的所有对等依赖项之外，还可以从项目的根目录中的命令行中使用以下命令来安装配置：
npm install eslint-config-airbnb --save-dev
控制台报了错，解决控制台错误 Failed to load plugin 'jsx-a11y' declared in '.eslintrc » eslint-config-airbnb »
npm install eslint --save-dev npm install eslint-plugin-jsx-a11y --save-dev
Failed to load plugin 'react' declared in '.eslintrc » eslint-config-airbnb »
npm install eslint-plugin-react --save-dev
{
"parser": "babel-eslint",
"extends": [
"airbnb"
],
"plugins": [
"jsx-a11y",
"react"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
}
Failed to load plugin 'import' declared in '.eslintrc » eslint-config-airbnb
npm install eslint-plugin-import --save-dev
默认情况下，所有规则都是关闭的。
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"import/imports-first": 0,
"import/newline-after-import": 0,
"import/no-dynamic-require": 0,
"import/no-extraneous-dependencies": 0,
"import/no-named-as-default": 0,
"import/no-unresolved": 2,
"import/no-webpack-loader-syntax": 0,
"import/prefer-default-export": 0
}
'document' is not defined
"env": {
"browser": true,
"node": true
},
JSX not allowed in files with extension '.js'
修改 webpack 配置
resolve: {
extensions: ['.js', '.jsx', '.react.js'],
},
添加 eslint 配置 规则
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
Prettier + ESLint
Prettier用于自动格式化我的代码以强制采用强制性的代码格式，而ESLint确保代码样式保持良好状态。
Prettier负责代码格式设置，而ESLint负责代码风格。前者会自动完成所有操作。如果设置了Prettier，则可以对其进行配置，以在保存文件时格式化文件。这样，再也不必担心代码格式了。由于Prettier的意见很高，因此只能进行较小的配置。后者ESLint并不是要自动执行代码样式修复。相反，ESLint会警告您有关代码气味的信息。例如，您可能会从另一个文件导入某些内容，但是却没有利用当前文件中导入的内容。 ESLint将警告您有关未使用的导入。与Prettier相比，ESLint具有很高的可配置性，因为它没有预配置的规则。安装完ESLint之后，您可以自行配置它，也可以使用几种预配置的ESLint配置之一（例如Airbnb样式指南）来获得自觉的代码样式，而无需自己考虑好的代码样式。
安装Prettier
npm install prettier --save-dev
安装eslint-config-prettier eslint-plugin-prettier，负责组合Prettier和ESLint
pm install --save-dev eslint-config-prettier eslint-plugin-prettier
eslint-config-prettier:关闭了可能与Prettier冲突的所有ESLint规则
eslint-plugin-prettier:Prettier规则集成到ESLint规则中。
添加配置
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
},
}
如果需要从ESLint规则中排除文件夹/文件，则可以将其添加到.eslintignore文件中（例如node_modules /）。
.prettierrc其它配置
{
"printWidth": 100,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always"
}
eslint最终配置
如果配置了"editor.formatOnSave": true，eslint Fix之后的代码会重新替换回去。 导致代码一直再闪 因为prettier和eslint的参数并非完全一致，比如：'space-before-function-paren':0,配置，在eslint中有，prettier中没有。这样就不得不折中处理，让eslint忽略这种报错。
{
"parser": "babel-eslint",
"extends": [
"airbnb",
"prettier"
],
"plugins": [
"jsx-a11y",
"react",
"prettier"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true
},
"rules": {
"prettier/prettier": ["error"],
"react/jsx-uses-react": "error", //防止react被错误地标记为未使用
"react/jsx-uses-vars": "error",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/jsx-key": 2, //在数组或迭代器中验证JSX具有key属性
"import/no-dynamic-require": 0,
"import/no-extraneous-dependencies": 0,
"import/no-named-as-default": 0,
"import/no-unresolved": 2,
"import/no-webpack-loader-syntax": 0,
"import/prefer-default-export": 0,
"arrow-body-style": [2, "as-needed"], // 箭头函数
"class-methods-use-this": 0, // 强制类方法使用 this
// 缩进Indent with 4 spaces
"indent": ["error", 4],
// Indent JSX with 4 spaces
"react/jsx-indent": ["error", 4],
// Indent props with 4 spaces
"react/jsx-indent-props": ["error", 4],
"no-console": 0, // 不禁用console
"no-debugger": 2 //禁用debugger
}
}
