react 使用 eslint 的三種代碼檢查方案總結，多瞭解點--讓代碼更完美....

 

一、介紹

 

    ESLint 是一個可擴展，每條規則獨立，被設計爲徹底可配置的lint工具。

    能夠用來檢測代碼，避免低級錯誤

    能夠用來規範代碼的開發風格，統一代碼習慣。

 

 

二、爲何使用 ESLint ？

 

    統一代碼規範 :

    在開發中，可能會遇到不少不一樣的同事同時開發一個項目 ，或者在工做的調整中，會有接手一個項目，

    這時候，就會發現徹底和本身的開發風格不一樣，該起來很是痛苦。ESLint 統一代碼規範，是咱們在不

    同的項目更好的融入項目開發。

 

    檢測代碼 :

    在開發中，會遇到一些很是低級的錯誤，如 alert 發到生產， 少一個 { 等，用了 ESLint ，咱們能夠在提交

    代碼前，進行代碼檢測，避免這些沒必要要的錯誤發到生產。

 

 

三、ESLint 項目中規範的方案

 

    ESLint + Airbnb

    ESLint + Standard 

    ESLint + Prettier 

 

    大概就三種方案，能夠根據不一樣的需求/業務進行搭建。

 

　執行檢查，而且格式化代碼

 

eslint --fix

　　

 

四、ESLint + Airbnb 項目配置

　　

　　全局安裝依賴包：

npm install -g eslint 

npm install -g eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

　　

   包介紹：

   　　eslint ： 沒必要要介紹了。能夠直接到官網上查看

    　  eslint-config-airbnb :  配置一些 eslint rules 的規範

   　　eslint-plugin-import ：在使用 import 的時候，一些 rules 規範

    　  eslint-plugin-react ： 一些 react 的 eslint 的 rules 規範

   　   eslint-plugin-jsx-a11y： 一些 jsx 的 rules 規範

　　

 

　　配置 eslintrc 文件：

{
    // 環境，這裏能夠設置環來作區別判斷
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    // 使用的擴展庫
    "extends": ["airbnb"],
    // 解析器用於解析代碼
    "parser": "babel-eslint",
    // 解析器配置
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // 能夠全局使用變量
    "globals": {
        "Babel": true,
        
        "React": true
    },
    // 第三方插件
    "plugins": [
        "react"
    ],
    // 規則配置
    "rules": {
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        // 禁止縮進錯誤
        "indent": 0,
        // 關閉不容許使用 no-tabs
        "no-tabs": "off",
        "no-console": 1,
        // 設置不衝突 underscore 庫
        "no-underscore-dangle":0,
        // 箭頭函數直接返回的時候不須要 大括號 {}
        "arrow-body-style": [2, "as-needed"],
        "no-alert":"error",

        // 設置是否能夠從新改變參數的值
        "no-param-reassign": 0,
        // 容許使用 for in
        "no-restricted-syntax": 0,
        "guard-for-in": 0,
        // 不須要每次都有返回
        "consistent-return":0,
        // 容許使用 arguments
        "prefer-rest-params":0,
        // 容許返回 await
        "no-return-await":0,
        // 沒必要在使用前定義 函數
        "no-use-before-define": 0,
        // 容許代碼後面空白
        "no-trailing-spaces": 0,


        // 有一些 event 的時候，不須要 role 屬性，不須要其餘解釋
        "jsx-a11y/no-static-element-interactions":0,
        "jsx-a11y/click-events-have-key-events":0,
        // 類成員之間空行問題
        "lines-between-class-members":0,


        // 不區分是否在 despendencies
        "import/no-extraneous-dependencies": 0,
        // 引用時候根據根目錄基礎
        "import/no-unresolved": 0,

        // 容許在 .js 和 .jsx 文件中使用  jsx
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        // jsx > 緊跟着屬性
        "react/jsx-closing-bracket-location": [1, "after-props"],
        // 不區分是不是 無狀態組件
        "react/prefer-stateless-function": 0

    }
}

　　

　　大功告成！

 

 

五、ESLint + Standard 項目配置

 

　　全局安裝依賴包 ：

npm install -g eslint babel-eslint
npm install  eslint-config-standard eslint-config-standard-react eslint-plugin-standard eslint-plugin-promise eslint-plugin-import  eslint-plugin-react

　　

　　包介紹：

　　　　config-standard ： standard 的規則配置包擴展

　　　　config-standard-react ：   react的擴展

　　　　plugin-standard ： standard規則

　　　　plugin-import ： 同上

　　　　plugin-react ： 同上

　　　　

 　　配置 eslintrc 文件：

{
    // 環境，這裏能夠設置環來作區別判斷
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    // 使用的擴展庫
    "extends": ["standard","standard-react"],
    // 解析器用於解析代碼
    "parser": "babel-eslint",
    // 解析器配置
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // 能夠全局使用變量
    "globals": {
        "Babel": true,
        
        "React": true
    },
    // 第三方插件
    "plugins": [],
    // 規則配置
    "rules": {
       // ... 自行定義
    }
}

　　

　　兩個擴展配置介紹：

　　　　standard ：js style rules 。是 js 格式樣式的以及規則定義的集合

　　　　standard-react ： react 以及 jsx 規則定義集合，他依賴  plugin-react， standard-jsx 

 　　　　

　　規則配置的話，能夠查看 plugin-react ， standard ， standard-jsx 規則列表。

 

 

六、 ESLint + Prettier 項目配置

 

　　全局安裝依賴包：

npm install -g eslint 
nam -g install eslint-plugin-prettier eslint-config-prettier babel-eslint prettier eslint-plugin-html --save-dev

　　

 　　配置 eslintrc 文件：

 　　　　

{
    // 環境，這裏能夠設置環來作區別判斷
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    // 使用的擴展庫
    "extends": ["eslint:recommended","prettier"],
    // 解析器用於解析代碼
    "parser": "babel-eslint",
    // 解析器配置
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // 能夠全局使用變量
    "globals": {
        "Babel": true,
        
        "React": true
    },
    // 第三方插件
    "plugins": [
        "prettier",
        "html", // 用於vue
    ],
    // 規則配置
    "rules": {
       // ... 自行定義
    }
}
   

　　

　　和上面兩種方案差很少，把擴展改成對應的庫。

 

 

　　三種方案：

　　　　第一個種我以爲很好用，尤爲很適合開發 react 項目

　　　　第二種用到不多，不過也不錯。

　　　　第三種比較適合 vue 項目，我的這麼認爲。

 

七、webstorm  配置 eslint

 

　　一、自帶的 eslint 配置

    　　打開 setting 

 

 

    2.使用插件ESLint

    下載 plugin 插件

 

    而後在 setting 中好到 eslint ，同一同樣配置便可。

 

 

 

八、項目優化

 

　　在代碼提交前進行 代碼規範設置及其檢測

　　那麼全部代碼都是統一的了。　

　

　　一、安裝 git hook 包

npm install --dev-save husky
npm install --dev-save lint-staged

　　

　　修改 package.json 進行代碼優化

 

// 在 scripts 添加 precommit
"scripts": {
    "dev": "webpack-dev-server --config ./webpack/webpack.config.dev.js",
    "build": "webpack --config ./webpack/webpack.config.prod.js",
    // 在執行 git commit  執行某一個執行
    "precommit": "NODE_ENV=node lint-staged"
},
// 對代碼進行修正，而且對代碼進行檢測
"lint-staged": {
    "*.{js,jsx}": [
        "eslint --fix",  // 修正，檢測
         "git add"   // 從新提交代碼
        ]
},

　　

 

 

 

*、常見的檢查介紹 ( 複製來的 )

 

"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用數組構造器
"no-bitwise": 0,//禁止使用按位運算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句參數與外部做用域變量同名
"no-class-assign": 2,//禁止給類賦值
"no-cond-assign": 2,//禁止在條件表達式中使用賦值語句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const聲明的變量
"no-constant-condition": 2,//禁止在條件中使用常量表達式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正則表達式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能對var聲明的變量使用delete操做符
"no-div-regex": 1,//不能使用看起來像除法的正則表達式/=foo/
"no-dupe-keys": 2,//在建立對象字面量時不容許鍵重複 {a:1,a:1}
"no-dupe-args": 2,//函數參數不能重複
"no-duplicate-case": 2,//switch中的case標籤不能重複
"no-else-return": 2,//若是if語句裏面有return,後面不能跟else語句
"no-empty": 2,//塊語句中的內容不能爲空
"no-empty-character-class": 2,//正則表達式中的[]內容不能爲空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止對null使用==或!=運算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止給catch語句中的異常參數賦值
"no-extend-native": 2,//禁止擴展native對象
"no-extra-bind": 2,//禁止沒必要要的函數綁定
"no-extra-boolean-cast": 2,//禁止沒必要要的bool轉換
"no-extra-parens": 2,//禁止非必要的括號
"no-extra-semi": 2,//禁止多餘的冒號
"no-fallthrough": 1,//禁止switch穿透
"no-floating-decimal": 2,//禁止省略浮點數中的0 .5 3.
"no-func-assign": 2,//禁止重複的函數聲明
"no-implicit-coercion": 1,//禁止隱式轉換
"no-implied-eval": 2,//禁止使用隱式eval
"no-inline-comments": 0,//禁止行內備註
"no-inner-declarations": [2, "functions"],//禁止在塊語句中使用聲明（變量或函數）
"no-invalid-regexp": 2,//禁止無效的正則表達式
"no-invalid-this": 2,//禁止無效的this，只能用在構造器，類，對象字面量
"no-irregular-whitespace": 2,//不能有不規則的空格
"no-iterator": 2,//禁止使用__iterator__ 屬性
"no-label-var": 2,//label名不能與var聲明的變量名相同
"no-labels": 2,//禁止標籤聲明
"no-lone-blocks": 2,//禁止沒必要要的嵌套塊
"no-lonely-if": 2,//禁止else語句內只有if語句
"no-loop-func": 1,//禁止在循環中使用函數（若是沒有引用外部變量不造成閉包就能夠）
"no-mixed-requires": [0, false],//聲明時不能混用聲明類型
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
"linebreak-style": [0, "windows"],//換行風格
"no-multi-spaces": 1,//不能用多餘的空格
"no-multi-str": 2,//字符串不能用\換行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超過2行
"no-native-reassign": 2,//不能重寫native對象
"no-negated-in-lhs": 2,//in 操做符的左邊不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目運算
"no-new": 1,//禁止在使用new構造一個實例後不賦值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new建立包裝實例，new String new Boolean new Number
"no-obj-calls": 2,//不能調用內置的全局對象，好比Math() JSON()
"no-octal": 2,//禁止使用八進制數字
"no-octal-escape": 2,//禁止使用八進制轉義序列
"no-param-reassign": 2,//禁止給參數從新賦值
"no-path-concat": 0,//node中不能使用__dirname或__filename作路徑拼接
"no-plusplus": 0,//禁止使用++，--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__屬性
"no-redeclare": 2,//禁止重複聲明變量
"no-regex-spaces": 2,//禁止在正則表達式字面量中使用多個空格 /foo bar/
"no-restricted-modules": 0,//若是禁用了指定模塊，使用就會報錯
"no-return-assign": 1,//return 語句中不能有賦值表達式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比較自身
"no-sequences": 0,//禁止使用逗號運算符
"no-shadow": 2,//外部做用域中的變量不能與它所包含的做用域中的變量或參數同名
"no-shadow-restricted-names": 2,//嚴格模式中規定的限制標識符不能做爲聲明時的變量名使用
"no-spaced-func": 2,//函數調用時 函數名與()之間不能有空格
"no-sparse-arrays": 2,//禁止稀疏數組， [1,,2]
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目運算符
"no-trailing-spaces": 1,//一行結束後面不要有空格
"no-this-before-super": 0,//在調用super()以前不能使用this或super
"no-throw-literal": 2,//禁止拋出字面量錯誤 throw "error";
"no-undef": 1,//不能有未定義的變量
"no-undef-init": 2,//變量初始化時不能直接給它賦值爲undefined
"no-undefined": 2,//不能使用undefined
"no-unexpected-multiline": 2,//避免多行表達式
"no-underscore-dangle": 1,//標識符不能以_開頭或結尾
"no-unneeded-ternary": 2,//禁止沒必要要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有沒法執行的代碼
"no-unused-expressions": 2,//禁止無用的表達式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有聲明後未被使用的變量或參數
"no-use-before-define": 2,//未定義前不能使用
"no-useless-call": 2,//禁止沒必要要的call和apply
"no-void": 2,//禁用void操做符
"no-var": 0,//禁用var，用let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告備註
"no-with": 2,//禁用with

"array-bracket-spacing": [2, "never"],//是否容許非空數組裏面有多餘的空格
"arrow-parens": 0,//箭頭函數用小括號括起來
"arrow-spacing": 0,//=>的前/後括號
"accessor-pairs": 0,//在對象中使用getter/setter
"block-scoped-var": 0,//塊語句中使用var
"brace-style": [1, "1tbs"],//大括號風格
"callback-return": 1,//避免屢次調用回調什麼的
"camelcase": 2,//強制駝峯法命名
"comma-dangle": [2, "never"],//對象字面量項尾不能有逗號
"comma-spacing": 0,//逗號先後的空格
"comma-style": [2, "last"],//逗號風格，換行時在行首仍是行尾
"complexity": [0, 11],//循環複雜度
"computed-property-spacing": [0, "never"],//是否容許計算後的鍵名什麼的
"consistent-return": 0,//return 後面是否容許省略
"consistent-this": [2, "that"],//this別名
"constructor-super": 0,//非派生類不能調用super，派生類必須調用super
"curly": [2, "all"],//必須使用 if(){} 中的{}
"default-case": 2,//switch語句最後必須有default
"dot-location": 0,//對象訪問符的位置，換行的時候在行首仍是行尾
"dot-notation": [0, { "allowKeywords": true }],//避免沒必要要的方括號
"eol-last": 0,//文件以單一的換行符結束
"eqeqeq": 2,//必須使用全等
"func-names": 0,//函數表達式必須有名字
"func-style": [0, "declaration"],//函數風格，規定只能使用函數聲明/函數表達式
"generator-star-spacing": 0,//生成器函數*的先後空格
"guard-for-in": 0,//for in循環要用if語句過濾
"handle-callback-err": 0,//nodejs 處理錯誤
"id-length": 0,//變量名長度
"indent": [2, 4],//縮進風格
"init-declarations": 0,//聲明時必須賦初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//對象字面量中冒號的先後空格
"lines-around-comment": 0,//行前/行後備注
"max-depth": [0, 4],//嵌套塊深度
"max-len": [0, 80, 4],//字符串最大長度
"max-nested-callbacks": [0, 2],//回調嵌套深度
"max-params": [0, 3],//函數最多隻能有3個參數
"max-statements": [0, 10],//函數內最多有幾個聲明
"new-cap": 2,//函數名首行大寫必須使用new方式調用，首行小寫必須用不帶new方式調用
"new-parens": 2,//new時必須加小括號
"newline-after-var": 2,//變量聲明後是否須要空一行
"object-curly-spacing": [0, "never"],//大括號內是否容許沒必要要的空格
"object-shorthand": 0,//強制對象字面量縮寫語法
"one-var": 1,//連續聲明
"operator-assignment": [0, "always"],//賦值運算符 += -=什麼的
"operator-linebreak": [2, "after"],//換行時運算符在行尾仍是行首
"padded-blocks": 0,//塊語句內行首行尾是否要空行
"prefer-const": 0,//首選const
"prefer-spread": 0,//首選展開運算
"prefer-reflect": 0,//首選Reflect的方法
"quotes": [1, "single"],//引號類型 `` "" ''
"quote-props":[2, "always"],//對象字面量中的屬性名是否強制雙引號
"radix": 2,//parseInt必須指定第二個參數
"id-match": 0,//命名檢測
"require-yield": 0,//生成器函數必須有yield
"semi": [2, "always"],//語句強制分號結尾
"semi-spacing": [0, {"before": false, "after": true}],//分號先後空格
"sort-vars": 0,//變量聲明時排序
"space-after-keywords": [0, "always"],//關鍵字後面是否要空一格
"space-before-blocks": [0, "always"],//不以新行開始的塊{前面要不要有空格
"space-before-function-paren": [0, "always"],//函數定義時括號前面要不要有空格
"space-in-parens": [0, "never"],//小括號裏面要不要有空格
"space-infix-ops": 0,//中綴操做符周圍要不要有空格
"space-return-throw-case": 2,//return throw case後面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元運算符的前/後要不要加空格
"spaced-comment": 0,//註釋風格要不要有空格什麼的
"strict": 2,//使用嚴格模式
"use-isnan": 2,//禁止比較時使用NaN，只能用isNaN()
"valid-jsdoc": 0,//jsdoc規則
"valid-typeof": 2,//必須使用合法的typeof的值
"vars-on-top": 2,//var必須放在做用域頂部
"wrap-iife": [2, "inside"],//當即執行函數表達式的小括號風格
"wrap-regex": 0,//正則表達式字面量用小括號包起來
"yoda": [2, "never"]//禁止尤達條件

　　

   http://www.javashuo.com/article/p-prltssxu-e.html 

   個人博客 ：  XiaoLong's Blog

   博客園小結巴巴： https://www.cnblogs.com/jiebba