安裝Nodejs,而後安裝eslintjavascript
使用全局安裝:
npm install -g eslint
npm install -g eslint-plugin-react
npm install -g eslint-plugin-htmlhtml
安裝完畢後,咱們使用"eslint --init"命令在用戶目錄中生成一個配置文件(也能夠在任何你喜歡的位置進行生成):".eslintrc.js"
執行命令後,咱們選擇相應的代碼風格,也能夠自定義,在這裏我使用popular->standard->JS風格的規則,自定義規則參考:java
module.exports = { "plugins": [ "react", //"html" ], "env": { "node": true, "jquery": true, "es6": true, "browser": true }, "globals": { "angular": false }, "parser": "babel-eslint", "rules": { //官方文檔 http://eslint.org/docs/rules/ //參數:0 關閉,1 警告,2 錯誤 // "quotes": [0, "single"], //建議使用單引號 // "no-inner-declarations": [0, "both"], //不建議在{}代碼塊內部聲明變量或函數 "no-extra-boolean-cast": 1, //多餘的感嘆號轉布爾型 "no-extra-semi": 1, //多餘的分號 "no-extra-parens": 0, //多餘的括號 "no-empty": 1, //空代碼塊 //使用前未定義 "no-use-before-define": [ 0, "nofunc" ], "complexity": [0, 10], //圈複雜度大於* //定義數組或對象最後多餘的逗號 "comma-dangle": [ 0, "never" ], // 不容許對全局變量賦值,如 window = 'abc' "no-global-assign": ["error", { // 定義例外 // "exceptions": ["Object"] }], "no-var": 0, //用let或const替代var "no-const-assign": 2, //不容許const從新賦值 "no-class-assign": 2, //不容許對class從新賦值 "no-debugger": 1, //debugger 調試代碼未刪除 "no-console": 0, //console 未刪除 "no-constant-condition": 2, //常量做爲條件 "no-dupe-args": 2, //參數重複 "no-dupe-keys": 2, //對象屬性重複 "no-duplicate-case": 2, //case重複 "no-empty-character-class": 2, //正則沒法匹配任何值 "no-invalid-regexp": 2, //無效的正則 "no-func-assign": 2, //函數被賦值 "valid-typeof": 1, //無效的類型判斷 "no-unreachable": 2, //不可能執行到的代碼 "no-unexpected-multiline": 2, //行尾缺乏分號可能致使一些意外狀況 "no-sparse-arrays": 1, //數組中多出逗號 "no-shadow-restricted-names": 2, //關鍵詞與命名衝突 "no-undef": 1, //變量未定義 "no-unused-vars": 1, //變量定義後未使用 "no-cond-assign": 2, //條件語句中禁止賦值操做 "no-native-reassign": 2, //禁止覆蓋原生對象 "no-mixed-spaces-and-tabs": 0, //代碼風格優化 -------------------------------------- "no-irregular-whitespace": 0, "no-else-return": 0, //在else代碼塊中return,else是多餘的 "no-multi-spaces": 0, //不容許多個空格 //object直接量建議寫法 : 後一個空格前面不留空格 "key-spacing": [ 0, { "beforeColon": false, "afterColon": true } ], "block-scoped-var": 1, //變量應在外部上下文中聲明,不該在{}代碼塊中 "consistent-return": 1, //函數返回值多是不一樣類型 "accessor-pairs": 1, //object getter/setter方法須要成對出現 //換行調用對象方法 點操做符應寫在行首 "dot-location": [ 1, "property" ], "no-lone-blocks": 1, //多餘的{}嵌套 "no-labels": 1, //無用的標記 "no-extend-native": 1, //禁止擴展原生對象 "no-floating-decimal": 1, //浮點型須要寫全 禁止.1 或 2.寫法 "no-loop-func": 1, //禁止在循環體中定義函數 "no-new-func": 1, //禁止new Function(...) 寫法 "no-self-compare": 1, //不允與本身比較做爲條件 "no-sequences": 1, //禁止可能致使結果不明確的逗號操做符 "no-throw-literal": 1, //禁止拋出一個直接量 應是Error對象 //不允return時有賦值操做 "no-return-assign": [ 1, "always" ], //不容許重複聲明 "no-redeclare": [ 1, { "builtinGlobals": true } ], //不執行的表達式 "no-unused-expressions": [ 0, { "allowShortCircuit": true, "allowTernary": true } ], "no-useless-call": 1, //無心義的函數call或apply "no-useless-concat": 1, //無心義的string concat "no-void": 1, //禁用void "no-with": 1, //禁用with "space-infix-ops": 0, //操做符先後空格 //jsdoc "valid-jsdoc": [ 0, { "requireParamDescription": true, "requireReturnDescription": true } ], //標記未寫註釋 "no-warning-comments": [ 1, { "terms": [ "todo", "fixme", "any other term" ], "location": "anywhere" } ], "curly": 0 //if、else、while、for代碼塊用{}包圍 } };
配置ESLint的項目中須要設置好該項目的"package.json"文件,若是沒有的話可使用"npm init"命令來設置。node
配置ESLint插件,打開VSCode文件->首選項->設置,從左側系統設置中能夠看到,ESLint 擴展默認已經啓用,咱們如今只需在右側用戶設置中添加配置來指定咱們建立的「.eslintrc.js」配置文件路徑便可啓用自定義規則檢測,ESLint 會查找並自動讀取它們:react
"eslint.options": { "configFile": "D:/.eslintrc.json" },
若是報錯"ESLint: Cannot find module 'babel-eslint'. "須要安裝:「npm install -g babel-eslint」jquery
參考:https://segmentfault.com/a/1190000009077086es6