前端開發規範之React應用使用ESLint

現代前端技術飛速發展，最終造成了以效率和質量爲核心的兩大趨勢。就效率而言，在大型前端項目的開發中，規範的制定 、框架的出現與升級、構建的使用更新、組件化的設計實現等都在於前端能更快、更高效地完成更多的事情。質量方面，前端優的提出、前端用戶數據的收集、錯誤日誌的收集上報等，都是爲了幫助開發者來提升前端性能，提高用戶體驗。

目前，前端已進入了以效率和質量爲核心的工業化時代，各種輔助工具的使用和技術的使用大大減小了前端開發的重複工做量，省去了不少低效的操做。在團隊開發中，編碼規範相當重要，一份統一的編碼規範能夠大大下降閱讀代碼的成本。近幾年來，前端業界對編碼規範的自動化工具也作了很多實踐，從最先的 JSLint,到以後的 JSHint,再到今天的 ESLint。

React使用ESLint

ESLint由 Nicholas C.Zakas 編寫，目標是以可擴展、每條規則獨立、不內置編碼風格爲理念編寫一個 Lint 工具。用戶能夠定製本身的規則做成公共包。

ESlint 主要有一下特色：

• 默認規則包含全部JSLint、JSHint 中存在的規則，易遷移
• 規則可配置性高，可設置 "警告" "錯誤" 兩個 error 等級，或者直接禁用
• 包含代碼風格檢測的規則
• 支持插件擴展、自定義規則

針對React 開發者，ESLint 已經能夠很好地支持JSX語法。

咱們從React 應用中怎麼配置開始提及。首先經過 npm來安裝必要的包：

$ npm install --save-dev babel-eslint eslint eslint-plugin-react
複製代碼

注：這裏建議推薦你們能夠用 yarn 來安裝，詳見Yarn中文網

babel-eslint讓 ESLint 用 Babel 做爲解釋器，eslint-plugin-react 讓 ESLint 支持 React 語法。而後，在 package.json 裏配置對應的 scripts,例如咱們對 src 和 test 目錄做檢查:

"scripts":{
    "lint":"eslint src test"
}
複製代碼

ESLint的配置寫在根目錄下，新配置文件 .eslintrc,若是子目錄也包含 .eslintrc，則子目錄會忽略根目錄的配置文件。這種設置方式便於在不一樣環境下使用不一樣的配置。相關代碼以下：

{
    "extends":"eslint:recommended",
    "ecmaFeatures":{
        "jsx":true,
        "modules":true
    },
    "env":{
        "browser":true,
        "node":true,
        "es6":true
    },
    "parser":"babel-eslint",
    "rules":{
        "strict":0,
        "valid-jsdoc":2,
        "react/jsx-uses-react":2,
        "react/jsx-uses-vars":2,
        "react/react-in-jsx-scope":2
    },
    "plugins":[
        "react"
    ]
}
複製代碼

其中，plugins 處配置了 react,既加入了自定義規則，這也是 ESLint 最核心的功能之一。此外，咱們也能夠在文件內配置特別的配置。

禁用 ESLint,好比：

/* eslint-disable */
const obj={
    key:"value",
};
/* eslint-enable */
複製代碼

禁用一條 Lint，好比：

/* eslint-disable no-console */
console.log('test');
/* eslint-enable no-console */
複製代碼

調整 Eslint 規則，好比：

/* eslint no-console:"error"*/
console.log('test');
複製代碼

ESLint 還有一個參數 extends，至關於咱們的配置繼承於它。在上述配置中，咱們寫的是 eslint:recommended，這是內置的配置。咱們以後的自定義配置就繼承於它。這裏，推薦開發者使用 Airbnb 定製的 JavaScript 規範寫法，整套規範推薦了 ES6 的語法，是整個前端業界最火也是比較公認的方案。由它的規範寫成的公共配置是 eslint-config-airbnb。咱們能夠經過 npm 安裝它，並在本身的 ESLint config 中將 Airbnb 的配置設置成基礎設置。

最後，.eslintrc能夠寫成以下形式:

{
    "extends":"eslint-config-airbnb",
    "ecmaFeatures":{
        "jsx":true,
        "modules":true
    },
    "env":{
        "browser":true,
        "node":true,
        "es6":true
    },
    "parser":"babel-eslint",
    "rules":{
        "strict":0,
        "valid-jsdoc":2,
        "react/jsx-uses-react":2,
        "react/jsx-uses-vars":2,
        "react/react-in-jsx-scope":2
    },
    "plugins":[
        "react"
    ]
}
複製代碼

開發規範能夠認爲是軟件開發工程師之間交流的另外一種語言，它在必定程度上決定了團隊協做過程當中開發的程序代碼是否具備一致性和易維護性，統一的開發規範經常能夠下降代碼的出錯機率和團隊開發的協做成本。開發規範制定的重要性不言而喻，使用怎樣的規範又成爲了另外一個問題，由於編程規範並不惟一。通俗地講，規範地差異不少時候只是代碼寫法的區別，不一樣的規範都有各自的特色，沒有優劣之分，在選擇時也不必糾結使用哪種規範，不過既然規範是提升一個團隊開發效率的虛擬工具，那麼一個團隊裏仍是儘量使用同一種開發規範比較好。歡迎你們加入前端技術交流羣 544587175。