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

function0831發表於2017-12-22
前端ReactEsLint

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

目前，前端已進入了以效率和質量為核心的工業化時代，各類輔助工具的使用和技術的使用大大減少了前端開發的重複工作量，省去了很多低效的操作。在團隊開發中，編碼規範至關重要，一份統一的編碼規範可以大大降低閱讀程式碼的成本。近幾年來，前端業界對編碼規範的自動化工具也做了不少實踐，從最早的 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。

相關文章