在前端工程愈演愈大的狀況下,JavaScript佔的比例也很足,須要良好的書寫風格,才能在多人協做code時提升效率,況且代碼仍是須要人來讀的,因此可讀性、可維護性高的代碼不少時候有重要意義。javascript
這裏推薦下Airbnb的掛在github上的JavaScript編寫風格:https://github.com/libertyAlo... 有時間的話,仍是但願能夠多看看。前端
即便咱們看了無數遍上面說到的Airbnb的JavaScript的編程風格,可是,很多狀況下仍是會寫出不符合要求的代碼,那麼就須要工具來約束咱們。咱們經過配置一些風格,讓IDE來強制提醒咱們代碼的風格是否符合規範,因此eslint就是很好的選擇,可是eslint還須要和IDE的結合來使用。java
eslint是一個node的包,須要相似npm、yarm來安裝,也和其餘的第三方包同樣,能夠全局安裝,也能夠本地安裝,建議這個全局安裝,由於這個包不少時候並非供編程人員直接使用,而是配合ide或者編輯器來進行使用的,因此全局安裝後,能夠本地生成配置文件,經過和IDE的配合來起到檢測書寫風格的效果。node
npm install -g eslint
能夠安裝最新版本,安裝好了,考慮哪些工程須要使用eslint來檢測,哪些不須要,還有哪些文件須要,哪些文件不須要,甚至文件夾是否須要,在須要的工程根目錄下執行react
eslint --init
須要配置,能夠選擇一個流行的風格,Airbnb或者標準,生成JSON文件,.eslintrc.json這個配置文件,
須要注意,win10在git ui的命令窗口執行的話沒法使用箭頭按鍵來選擇,因此最好仍是使用win自帶的cmd窗口
這裏就能夠修改這個json文件,來配置你熟悉的,以爲合理的規則,以及排除的文件,git
{ "rules": { "no-console": 2, // 禁用 console "no-alert": 2, // 禁用 alert "no-irregular-whitespace": 2, //禁止tab、空格以外的非法空白 "no-unexpected-multiline": 2, //禁止使用使人困惑的多行表達式,一行結束最後使用;或者是- +之類的鏈接符 "guard-for-in": 2, // for in 循環必須限制 Object.prototype.hasOwnProperty "no-caller": 2, //禁用 arguments.caller 或 arguments.callee "no-extend-native": 2, //禁止擴展原生對象 "no-extra-bind": 2, //禁止沒必要要的函數綁定 函數中沒有使用this時,不須要綁定this "no-invalid-this": 1, // 控制this的使用,只能在構造函數【首字母大寫】、對象、類中使用 "no-multi-spaces": [2, {"ignoreEOLComments": true}], //禁止非縮進處出現多個空格 ,但忽略行尾註釋前的多個空格 let a = b; b前空格多了 "no-multi-str": 2, //禁止多行字符串 \ 能夠鏈接多行字符實現換行,建議使用 '\n' +的組合 "no-new-wrappers": 2, //禁止原始包裝實例 new String new Number的操做不合理,會變成初始化一個對象,而不是對應的初始類型 "no-throw-literal": 2, //限制能夠被拋出的異常 僅僅 拋出(throw) Error 對象自己或者用戶自定義的以 Error 對象爲基礎的異常 "no-with": 2, //不使用with "no-unused-vars": [2, {"args": "none"}], // 未使用的變量定義,參數不校驗,參數有多是可選參數 "array-bracket-spacing": [2, "never"], //禁止或強制在括號內使用空格, 禁止使用不一致的空格,應該遵照格式 [1, 2, 3],也就是,逗號後面一個空格 "brace-style": 2, //大括號風格要求 one true brace style 風格以下: /* if (foo) { bar(); } else { baz(); } */ "camelcase": [1, {"properties": "never"}], // 駝峯變量命名,警告,並且屬性名不會要求是駝峯,變量名要求是 "comma-dangle": [2], //禁止在數組、對象、函數參數最後面添加拖尾逗號 "comma-spacing": 2, // 逗號後非行尾須要加空格 "comma-style": 2, //要求逗號放在數組元素、對象屬性或變量聲明以後,且在同一行 "computed-property-spacing": 2, //禁止在計算屬性中使用空格 obj[key] ok "eol-last": 2, //要求在非空文件末尾至少存在一行空行 "func-call-spacing": 2, // 函數執行須要緊挨着(括號,alert(1) ok 不要alert (2) "jsx-quotes": 2, //強制全部不包含雙引號的 JSX 屬性值使用雙引號 "key-spacing": 2, // 對象key以後,冒號前不容許有空格; value前須要有空格 "keyword-spacing": 0, //要求在關鍵字以前、以後都至少有一個空格 "linebreak-style": 2, //強制使用 Unix 換行符: \n "new-cap": 2, //要求構造函數首字母大寫 "newline-after-var": 1, // 變量定義後增長空行 warn "no-array-constructor": 2, // new Array X 禁用 Array 構造函數 "no-mixed-spaces-and-tabs": 2, // 禁止混用tab與空格 禁止空格和 tab 的混合縮進 "no-multiple-empty-lines": [2, {"max": 2}], // 不能有多個空行,最多兩行 "no-new-object": 2, //禁用 Object 的構造函數 "no-trailing-spaces": 2, // 行尾不留空格 "object-curly-spacing": 2, //不容許花括號中有空格 "one-var-declaration-per-line": 2, // 一個var定義多個變量時每一個變量必須換行 "padded-blocks": [2, "never"], // 其中一條:{}內第一行與最後一行不容許有空行 "quote-props": [2, "consistent"], //對象的屬性名須要統一【 雙引號、單引號、不加】三個選一 "quotes": [2, "single", {"allowTemplateLiterals": true}], "semi-spacing": 2, // 分號前不加空格 "semi": 2, // 該有分號的地方都加分號 // "sort-keys": 1, //對象的鍵名須要按照字典序排序 // "sort-vars": 1, //變量定義按照字典序排序 "space-before-blocks": 2, // {} 前必須有空格,例如 function() {} "space-before-function-paren": [2, "never"], // function 參數前不容許有空格 "spaced-comment": [2, "always"], // 註釋後面//後須要增長空格 "arrow-parens": [2, "always"], // 要求箭頭函數的參數使用圓括號 "constructor-super": 2, // 派生類中的構造函數必須調用 super()。非派生類的構造函數不能調用 super()。[字面量繼承其餘類的類就是派生類] "generator-star-spacing": [2, "after"], // 約束 generator 函數強制在 * 和函數名之間有空格 "no-new-symbol": 2, // disallow new operators with the Symbol object 不要new symbol "no-this-before-super": 2, // 禁止在構造函數中,在調用 super() 以前使用 this 或 super //"no-var": 1, // 要求使用 let 或 const 而不是 var //"prefer-rest-params": 1, // require rest parameters instead of arguments "prefer-spread": 2, // 要求使用擴展運算符而非 .apply() ,參數在一個數組中時 "rest-spread-spacing": 2, // rest參數、擴展運算符 和其對應的表達式都不能有空格 ...args "yield-star-spacing": [2, "after"], // 強制在 * 和 參數之間有空格 yield* other(); "no-debugger": "error", // 禁用 debugger "no-sequences": "error", // 禁用逗號操做符 "no-dupe-args": "error", // 禁止 function 定義中出現重名參數 "no-inner-declarations": "error", // 禁止在嵌套的塊中出現 function 聲明 ;if等塊中聲明函數 "no-unreachable": "error", // 禁止在return、throw、continue 和 break 語句以後出現不可達代碼 "no-octal": "error", // 禁用八進制字面量 0開頭的數字 "no-dupe-keys": "error", // 禁止對象字面量中出現重複的 key "block-scoped-var": 2, // if,for內無var定義,能夠用let // 強制把變量的使用限制在其定義的做用域範圍內 "indent": [2, 4, { "SwitchCase": 1 }], // 統一縮進4字符,switch case須要縮進 "max-nested-callbacks": [2, 5], // 強制回調函數最大嵌套深度 5層 } }
可能還須要一個排除檢測文件,和.eslintrc.json同級的目錄下面新建一個文件,名字爲: .eslintignore
下面是element ui的排除文件es6
src/utils/popper.js src/utils/date.js *.sh node_modules lib coverage
不少時候其實咱們的工程都是在已有的基礎上進行改進的,因此咱們可能只是在新增長的代碼上面進行eslint
校驗就好:那麼就須要.eslintignore
的書寫只包含某個文件夾github
/* !/src /src/* !/src/page /src/page/* !/src/page/flist
上面就是隻檢查.eslintignore
同級下的src/page/flist
這個文件夾。這個.eslintignore
和gitignore
是同樣的規則,
gitignore規則描述
到這裏其實仍是差一些,安裝了這個eslint的包,生產了配置文件,還須要ide揮着編輯器的配合,因此本文說的是vscode。npm
vscode是一個微軟開源的編輯器,不少插件能夠輔助,這個eslint就是一個插件,安裝eslint插件,安裝插件後,會檢測打開的工程是否存在一個eslint的配置文件,存在的話就會執行eslint的檢測,不存在的話就不會檢測。編程
react+eslint有個問題,react的組件引入時會被認爲沒有被使用no-unused-vars
,須要引入react
插件,引入規則"react/jsx-uses-vars": 2
對於react
的使用,一些無狀態的組件雖然沒有顯示的調用react
,可是編譯後會使用React.createElement
來構造組件,因此仍是會出現react
沒有被使用no-unused-vars
,只能經過註釋來消除
/* eslint-disable */ 整個下面塊不檢查 // eslint-disable-next-line 下一行不檢查 import React, {Component} from 'react'; // eslint-disable-line 本行不檢查
完整的編寫:
{ "env": { "browser": true, "commonjs": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "no-cond-assign": 0, "no-console": 2, "no-alert": 2, "no-irregular-whitespace": 2, "no-unexpected-multiline": 2, "guard-for-in": 2, "no-caller": 2, "no-extend-native": 2, "no-extra-bind": 2, "no-invalid-this": 1, "no-multi-spaces": 2, "no-multi-str": 2, "no-new-wrappers": 2, "no-throw-literal": 2, "no-with": 2, "no-unused-vars": [2, {"args": "none"}], "react/jsx-uses-vars": 2, "array-bracket-spacing": [2, "never"], "brace-style": 2, "comma-dangle": [2], "comma-spacing": 2, "comma-style": 2, "computed-property-spacing": 2, "func-call-spacing": 2, "jsx-quotes": 2, "key-spacing": 2, "keyword-spacing": 0, "linebreak-style": 2, "new-cap": 2, "no-array-constructor": 2, "no-mixed-spaces-and-tabs": 2, "no-multiple-empty-lines": [2, {"max": 2}], "no-new-object": 2, "no-tabs": 0, "no-trailing-spaces": 2, "object-curly-spacing": 2, "padded-blocks": [2, "never"], "quote-props": [2, "consistent"], "quotes": [2, "single", {"allowTemplateLiterals": true}], "semi-spacing": 2, "semi": 2, "space-before-blocks": 2, "space-before-function-paren": [2, "never"], "spaced-comment": [2, "always"], "constructor-super": 2, "generator-star-spacing": [2, "after"], "no-new-symbol": 2, "no-this-before-super": 2, "no-var": 1, "prefer-rest-params": 1, "prefer-spread": 2, "rest-spread-spacing": 2, "yield-star-spacing": [2, "after"], "no-debugger": "error", "no-sequences": "error", "no-dupe-args": "error", "no-inner-declarations": "error", "no-unreachable": "error", "no-octal": "error", "no-dupe-keys": "error", "block-scoped-var": 2, "indent": [2, 4, { "SwitchCase": 1 }], "max-nested-callbacks": [2, 5] } }
使用vscode
的時候,有的時候使用腳手架生成的代碼縮進會是2個空格,大部分時間咱們可能須要4個空格,因此在首選項裏面能夠設置,不檢查代碼的縮進,無論什麼狀況都是用4空格縮進,"editor.tabSize": 4,"editor.detectIndentation": false