create-react-app配置eslint步驟詳解

這次帶給大家create-react-app配置eslint步驟詳解，create-react-app配置eslint的注意事項有哪些，以下就是實戰案例，一起來看一下。

使用eslint和editorconfig規格程式碼

為什麼要用這些：

1. 程式碼規格有利於團隊協作

2. 純手工規格耗時耗力且無法保證準確度

3. #能配合編輯器自動提醒錯誤，提高開發效率

#eslint

隨著ECMAScript版本一直更新的Js lint工具，外掛豐富，並且能夠套用規範，規則非常豐富，能夠滿足大部分團隊的需求。

eslint 配合git

為了最大程度控制每個人的規範，我們可以在git commit程式碼的時候，使用git hook呼叫eslint進行程式碼規範驗證，不規範的代碼無法提交到倉庫。

editorconfig

不同編輯器對文字的格式會有一定的差別，如果不統一一些規範，可能你跟別人合作的時候每次更新下來別人的程式碼就會出一大堆錯誤-webstorm自動支援editorconfig設定檔。

首先安裝eslintnpm i eslint 因為create-react-app預設已經安裝了

  "babel-eslint": "7.2.3",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.1.0",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",

我們針對我們想要的自訂配置，我們再安裝如下

npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-promise \
\ eslint-plugin-react \
\ eslint-plugin-standard -D

我們在根目錄下新建.eslintrc 文件針對整個專案做一個標準的規範

{
 "extends": "standard"
}

主要專案是前端工程，所以我們在前端資料夾下新建.eslintrc 文件，在這裡去規範客戶端程式碼，客戶端程式碼使用jsx，很多規則和nodejs 是不同的，在這裡使用更嚴格的規範來要求客戶端程式碼。

配置的value對應的值： 0 : off 1 : warning 2 : error

{
 "parser": "babel-eslint",
 "env": {
  "browser": true,
  "es6": true,
  "node": true
 },
 "parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module"
 },
 "extends": "airbnb",
 "rules": {
  "semi": [0],
  "react/jsx-filename-extension": [0],
  "jsx-a11y/anchor-is-valid": [0]
 }
}

使用babel-eslint 去解析程式碼，定義環境是瀏覽器和es6，會包含公共變量， webpack所以需要node一些環境變量，parserOptions定義版本，jsmodule模式方法書寫。

因為需要在每次編譯之前都要去檢查一下程式碼，所以還需要設定webpack,這是create-react-app預設的

   {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),
       
      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc,
   },

我們希望屏蔽掉node_modules 資料夾下的程式碼

exclude:[path.resolve(__dirname, '../node_modules')]

在專案根目錄下新建檔案.editorconfig webstom預設就有設定

1. root = true 專案根目錄

2. #[*] 所有檔案都套用這個規則

3. charset = utf-8 編碼模式

4. indent_style = space 使用tab 的樣式製表符與space

5. indent_size = 2

6. #end_of_line = lf 行尾結尾方式

insert_final_newline = true 自動儲存行尾最後一行是空白行

trim_trailing_whitespace = true 一行結束後面的空格自動去掉

eslint 不偵測這行程式碼

// eslint-disable-line

eslint 不檢測這個文件，在開頭

/* eslint-disable */

在文件結尾

/ * eslint-enable */

安裝npm i husky -D

然後在package.json scripts中增加git 鉤子,會在執行git commit之前會呼叫這個指令

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

git commit 強制執行eslint 通過的程式碼

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########如何使用entry component################怎麼在實戰專案中使用Installation外掛程式###### ####

以上是create-react-app配置eslint步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！