eslint prettier editrorconfig - 寫出干凈的前端代碼

 

 

FConfidence 關注

2018.12.30 02:38* 字數 2912 閱讀 195評論 0喜歡 0

VSCode 插件安裝

1. Prettier - Code Formatter

2. ESLint

3. VsCode 針對配置

    // 如果保存的時候使用eslint --fix自動修復當前文件的話, 將其設置為true "eslint.autoFixOnSave": false, // 如果保存的時候使用prettier自動修復的話, 將其設置為true "editor.formatOnSave": true, "[javascript]": { "editor.tabSize": 2 }, 

   主要不用同時將 eslint.autoFixOnSave 和 editor.formatOnSave 設置為 true, 會產生沖突

4. 全局安裝

   npm install eslint -g
   npm install prettier -g
   

開發工具介紹

1. babel-eslint：這個包讓你可以輕松在 Babel 上使用 lint。如果你不使用 ESLint 尚不支持的 Flow 或實驗性功能，則不一定需要這個插件。

2. eslint：這是 lint 代碼所需的主要工具。

3. eslint-config-airbnb：這個包提供了所有 Airbnb 的 ESLint 配置，你可以修改它們。

4. eslint-plugin-babel：babel-eslint 的插件伴侶。

5. eslint-plugin-import：這個插件旨在支持 ES2015+（ES6+）的導入 / 導出語法，並防止出現拼寫錯誤的文件路徑和導入名稱。

6. eslint-plugin-jsx-a11y：適用於 JSX 元素可訪問性規則的 linting 規則。

7. eslint-plugin-prettier：讓 ESLint 與 Prettier 的使用更順暢。

8. eslint-plugin-react：特定於 React 的 linting 規則。

9. eslint-config-jest-enzyme：用於特定於 React 和 Enzyme 的全局變量。這個 lint 配置讓 ESLint 知道有哪些全局變量，並且不會針對它們發出警告——有點像斷言 it 和 describe。

10. eslint-plugin-jest：Jest 的 ESLint 插件。

11. husky：在自動化部分會進行更多介紹。

12. lint-staged：在自動化部分會進行更多介紹。

yarn add eslint prettier --dev
yarn add eslint-config-airbnb eslint-config-jest-enzyme --dev
yarn add eslint-plugin-import eslint-plugin-babel eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-jest --dev

husky

husky是一個 Git 鈎子，你可以在提交代碼前或在將代碼推送到分支時執行某些特定的操作。

1. 安裝 husky

   yarn add --dev husky
   

2. package.json 中添加配置

    "husky": { "hooks": { "pre-commit": "lint-staged", "pre-push": "YOUR_COMMAND_HERE" } }, 

   每次在提交或推送代碼時，它都會執行某個腳本或命令——比如運行測試用例或格式化代碼。

lint-staged

lint-staged 可以在暫存（Git staged）文件上運行 linter，這樣就不會將錯誤的代碼推送到分支上。

1. 安裝 lint-staged

    yarn add --dev lint-staged
   

2. package.json 配置

    "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] }, 

   這段配置的意思是先運行 lint:write 命令，然后將文件添加到暫存區域。它僅針對.js 和.jsx 文件運行這個命令，但你也可以根據需要針對其他文件運行這個命令。

3. 每當你提交代碼時：

    $ git add .  $ git commit -m "代碼被commit之前都會執行lint-staged命令" 

   它將根據.eslintrc.js 文件的所有規則對代碼進行 lint 和格式化。有了這個，你就可以確保沒有壞代碼被推到生產環境中。

4. package.json 的最終配置

   {
     "name": "eslint-prettier-editorconfig-learn", "version": "1.0.0", "description": "eslint prettier editorconfig", "main": "index.js", "scripts": { "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "prettier": "prettier --write src/**/*.js" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] }, "author": "VonConfidence", "license": "ISC", "devDependencies": { "babel-eslint": "^8.2.3", "eslint": "^4.19.1", "eslint-config-airbnb": "^17.0.0", "eslint-config-jest-enzyme": "^6.0.2", "eslint-plugin-babel": "^5.1.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jest": "^21.18.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.9.1", "husky": "1.3.1", "lint-staged": "8.1.0", "prettier": "1.15.3" } } 

.editorconfig 文件

1. 並不是每個人都會使用 VS Code，所以為了讓每個人保持統一（例如在制表符空格或換行方面），我們使用.editorconfig，這樣有助於強制執行某些規則。

2. 支持 EditorConfig的編輯器包括 Web Storm、App Code、Atom、Eclipse、Emacs、bbedit，等等。

3. .editorconfig 基本配置

    # EditorConfig is awesome: http://EditorConfig.org # top-most EditorConfig file root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true # Unix-style newlines with a newline ending every file [*] indent_style = space # 將縮進樣式設置為空格而不是制表符； indent_size = 2 # 縮進大小為 2； end_of_line = lf # 行尾是 lf，這樣不管使用的是哪種操作系統，都會有相同的行尾； charset = utf-8 insert_final_newline = true # 文件末尾應該有一個新行； max_line_length = 120 # 單行的最大度應為 120 個字符。 

.eslintrc.js 配置詳解

1. 規則控制

   "off"或者0 //關閉規則關閉 "warn"或者1 //在打開的規則作為警告（不影響退出代碼） "error"或者2 //把規則作為一個錯誤（退出代碼觸發時為1） 

2. eslint 規則配置 off=0 warn=1 error=2

   "rules": { "indent": [2, 2], // 控制縮進為2 "eqeqeq": 1,// 警告使用全等 "quotes": [2, "single"], //單引號 "no-console": 0, //不禁用console "no-debugger": 1, //禁用debugger "no-var": 2, //對var警告 "semi": 2, //強制使用分號 "semi-spacing": [2, {"before": false, "after": true}], // 強制分號前后不允許空格 "no-irregular-whitespace": 0, //不規則的空白不允許 "no-trailing-spaces": 1, //一行結束后面有空格就發出警告 "eol-last": 0, //文件以單一的換行符結束 "no-unused-vars": [2, {"vars": "all", "args": "after-used"}], //不能有聲明后未被使用的變量或參數 "no-underscore-dangle": 0, //標識符不能以_開頭或結尾 "no-alert": 2, //禁止使用alert confirm prompt "no-lone-blocks": 0, //禁止不必要的嵌套塊 "no-class-assign": 2, //禁止給類賦值 "no-cond-assign": 2, //禁止在條件表達式中使用賦值語句 "no-const-assign": 2, //禁止修改const聲明的變量 "no-delete-var": 2, //不能對var聲明的變量使用delete操作符 "no-dupe-keys": 2, //在創建對象字面量時不允許鍵重復 "no-duplicate-case": 2, //switch中的case標簽不能重復 "no-dupe-args": 2, //函數參數不能重復 "no-empty": 2, //塊語句中的內容不能為空 "no-func-assign": 2, //禁止重復的函數聲明 "no-invalid-this": 0, //禁止無效的this，只能用在構造器，類，對象字面量 "no-redeclare": 2, //禁止重復聲明變量 "no-spaced-func": 2, //函數調用時 函數名與()之間不能有空格 "no-this-before-super": 0, //在調用super()之前不能使用this或super "no-undef": 2, //不能有未定義的變量 "no-use-before-define": 2, //未定義前不能使用 "camelcase": 0, //強制駝峰法命名 "jsx-quotes": [2, "prefer-double"], //強制在JSX屬性（jsx-quotes）中一致使用雙引號 "react/display-name": 0, //防止在React組件定義中丟失displayName "react/forbid-prop-types": [2, {"forbid": ["any"]}], //禁止某些propTypes "react/jsx-boolean-value": 2, //在JSX中強制布爾屬性符號 "react/jsx-closing-bracket-location": 1, //在JSX中驗證右括號位置 "react/jsx-curly-spacing": [2, {"when": "never", "children": true}], //在JSX屬性和表達式中加強或禁止大括號內的空格。 "react/jsx-indent": [2,2], // 語法縮進控制 "react/jsx-indent-props": [2, 2], //驗證JSX中的props縮進是否為2個 "react/jsx-key": 2, //在數組或迭代器中驗證JSX具有key屬性 "react/jsx-max-props-per-line": [1, {"maximum": 1}], // 限制JSX中單行上的props的最大數量 "react/jsx-no-bind": 0, //JSX中不允許使用箭頭函數和bind "react/jsx-no-duplicate-props": 2, //防止在JSX中重復的props "react/jsx-no-literals": 0, //防止使用未包裝的JSX字符串 "react/jsx-no-undef": 1, //在JSX中禁止未聲明的變量 "react/jsx-pascal-case": 0, //為用戶定義的JSX組件強制使用PascalCase "react/jsx-sort-props": 2, //強化props按字母排序 "react/jsx-uses-react": 1, //防止反應被錯誤地標記為未使用 "react/jsx-uses-vars": 2, //防止在JSX中使用的變量被錯誤地標記為未使用 "react/no-danger": 0, //防止使用危險的JSX屬性 "react/no-did-mount-set-state": 0, //防止在componentDidMount中使用setState "react/no-did-update-set-state": 1, //防止在componentDidUpdate中使用setState "react/no-direct-mutation-state": 2, //防止this.state的直接變異 "react/no-multi-comp": 2, //防止每個文件有多個組件定義 "react/no-set-state": 0, //防止使用setState "react/no-unknown-property": 2, //防止使用未知的DOM屬性 "react/prefer-es6-class": 2, //為React組件強制執行ES5或ES6類 "react/prop-types": 0, //防止在React組件定義中丟失props驗證 "react/react-in-jsx-scope": 2, //使用JSX時防止丟失React "react/self-closing-comp": 0, //防止沒有children的組件的額外結束標簽 "react/sort-comp": 2, //強制組件方法順序 "no-extra-boolean-cast": 0, //禁止不必要的bool轉換 "react/no-array-index-key": 0, //防止在數組中遍歷中使用數組key做索引 "react/no-deprecated": 1, //不使用棄用的方法 "react/jsx-equals-spacing": 2, //在JSX屬性中強制或禁止等號周圍的空格 "no-unreachable": 1, //不能有無法執行的代碼 "comma-dangle": ["error", "always"], //對象字面量項尾必須有逗號 "no-mixed-spaces-and-tabs": 0, //禁止混用tab和空格 "prefer-arrow-callback": 0, //比較喜歡箭頭回調 "arrow-parens": 0, //箭頭函數用小括號括起來 "arrow-spacing": 0, //=>的前/后括號 "prefer-const": ["error", { "destructuring": "all" }], "prefer-destructuring": ["error", { "VariableDeclarator": { "array": false, "object": true }, "AssignmentExpression": { "array": false, "object": false } }, { "enforceForRenamedProperties": false }], "use-isnan": 2,//禁止比較時使用NaN，只能用isNaN() }, "settings": { "import/ignore": [ "node_modules" ] } 

3. .eslintrc.js 最終形式

    module.exports = { // 用於預定義全局變量 env: { es6: true, // 啟動es6全局變量 browser: true, // 瀏覽器全局變量window, document等 node: true, // 啟用node全局變量global等 }, // 擴展了之面配置的額外配置選項。 // 現在我們正在使用 airbnb 的 linting 規則，這些規則被擴展到 jest，然后是 jest-enzyme。 extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'], // 插件基本上就是我們想要使用的 linting 規則 plugins: ['babel', 'import', 'jsx-a11y', 'react', 'prettier'], // 默認情況下，ESLint 使用 Espree，但因為我們使用了 babel，我們還需要使用 Babel-ESLint parser: 'babel-eslint', // 如果我們將 Espree 的默認解析器更改為 babel-eslint，需要指定 parserOptions /* 告訴 ESLint，ecmaVersion 是 6。 因為我們在 EcmaScript 模塊（而不是 script）中編寫代碼，所以我們將 sourceType 指定為 module。 由於我們使用了 React，引入了 JSX，所以在 ecmaFeatures 中加了 jsx 選項，並將其設置為 true。 */ parserOptions: { ecmaVersion: 6, sourceType: 'module', ecmaFeatures: { jsx: true, }, }, // 更改或覆蓋添加的規則 off warn error rules: { 'linebreak-style': 'off', // Don't play nicely with Windows. 'arrow-parens': 'off', // Incompatible with prettier 'object-curly-newline': 'off', // Incompatible with prettier 'no-mixed-operators': 'off', // Incompatible with prettier 'arrow-body-style': 'off', // Not our taste? 'function-paren-newline': 'off', // Incompatible with prettier 'no-plusplus': 'off', 'space-before-function-paren': 0, // Incompatible with prettier 'max-len': ['error', 100, 2, { ignoreUrls: true }], // airbnb is allowing some edge cases 'no-console': 'warn', // airbnb is using warn 'no-alert': 'warn', // airbnb is using warn 'no-param-reassign': 'off', // Not our taste? radix: 'off', // parseInt, parseFloat radix turned off. Not my taste. 'react/require-default-props': 'off', // airbnb use error 'react/forbid-prop-types': 'off', // airbnb use error 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx 'prefer-destructuring': 'off', 'react/no-find-dom-node': 'off', // I don't know 'react/no-did-mount-set-state': 'off', 'react/no-unused-prop-types': 'off', // Is still buggy 'react/jsx-one-expression-per-line': 'off', 'jsx-a11y/anchor-is-valid': ['error', { components: ['Link'], specialLink: ['to'] }], 'jsx-a11y/label-has-for': [ 2, { required: { every: ['id'], }, }, ], // for nested label htmlFor error 'prettier/prettier': ['error'], }, };