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
}
}