摘要：前言人是很懶惰的，你剛開始建立的一個(gè)規(guī)規(guī)整整的項(xiàng)目，可能一段時(shí)間過后，就回被你無數(shù)次的提交代碼弄得凌亂不堪。

人是很懶惰的，你剛開始建立的一個(gè)規(guī)規(guī)整整的項(xiàng)目，可能一段時(shí)間過后，就回被你無數(shù)次的提交代碼弄得凌亂不堪。
就算你能保證你的編碼風(fēng)格嚴(yán)謹(jǐn)統(tǒng)一，別人又該如何，每個(gè)人都有不一樣的編碼風(fēng)格，要保持統(tǒng)一，就要對項(xiàng)目進(jìn)行適當(dāng)?shù)墓芾?/p> 正文

接下來介紹個(gè)React項(xiàng)目簡單管理的一個(gè)實(shí)踐：

eslint可以幫我們校驗(yàn)代碼，給整個(gè)項(xiàng)目的代碼定義一個(gè)規(guī)范，我們寫的代碼必須按照這個(gè)規(guī)范寫，否則在校驗(yàn)階段會報(bào)錯(cuò)
這就是強(qiáng)迫癥患者的福利了，強(qiáng)迫自己把eslint報(bào)的error全部處理掉，不久之后既可以養(yǎng)成良好的編碼習(xí)慣了

1.安裝
npm install eslint babel-eslint --save-dev
也可以全局安裝，這樣的話eslint命令適用于你的所有項(xiàng)目
npm install eslint -g

2.配置方法
可以運(yùn)行eslint --init，按照指示一步步配置
也可以直接在根目錄新增一個(gè).eslintrc文件進(jìn)行配置

3.規(guī)范定義
可以是你自己定義的一套規(guī)范，比如：字符創(chuàng)使用單引號，縮進(jìn)為2個(gè)空格等等
也可以安裝一個(gè)成熟的規(guī)范，然后再配置文件中指定使用這個(gè)規(guī)范
比如:Airbnb的編碼規(guī)范是在業(yè)界非常流行的一套規(guī)范，我們可以試試
首先安裝 eslint-config-airbnb-base
npx install-peerdeps --save-dev eslint-config-airbnb-base
然后在.eslintrc中配置

{
   "extends": ["airbnb-base"],
   "parser": "babel-eslint"，
   "rules": {
       "indent": ["error", 2]
    }
}

rules: 可以在這里覆蓋Airbnb的規(guī)則，具體的規(guī)則定義參照 eslint rules
Airbnb具體的規(guī)則可以參考
Airbnb React編碼規(guī)范

PS:
其實(shí)一開始不要麻煩，耐心地跟著這套規(guī)范走，不久之后你的編碼習(xí)慣就會跟Airbnb基本一致了

4.針對react
由于react的組件文件中，有很多違反eslint規(guī)范的地方，比如jsx語法，還有頭部import的React庫
如果不做特殊處理，都是會報(bào)錯(cuò)的
所以有了一個(gè)針對react的插件：
npm install --save-dev eslint-plugin-react
這個(gè)插件可以檢查react的jsx語法，jsx文件的縮進(jìn)問題和部分語法問題

插件的配置還是在.eslintrc

{
    "parserOptions": { "ecmaFeatures": { "jsx": true } }

    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-uses-vars": 1,
        "react/jsx-uses-react": 1
    }
}

5.完整的配置文件

{
  "extends": ["airbnb-base"],
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-uses-vars": 1,
    "react/jsx-uses-react": 1,
    "no-tabs": 0,
    "class-methods-use-this": 0,
    "import/no-unresolved": 0,
    "indent": 0,
    "comma-dangle": 0,
    "import/prefer-default-export": 0
  },
  "plugins": [
    "react"
  ],
  "globals": {
    "document": true,
    "navigator": true,
    "window":true,
    "node":true
  },
  "settings": {
    "import/resolver": {
      "node": {
         "extensions": [".js",".jsx"]
      }
    }
  }
}

說明：
globals：配置全局變量如window，document等，沒有配置直接使用的話，不能通過eslint的檢查
settings.import/resolver.node.extensions: 可以讓你在import指定后綴的文件的時(shí)候，不用寫后綴名，如
import Banner from "./Banner"

PS: 有一些配置可以不用糾結(jié)，莫名其妙報(bào)錯(cuò)的話，你可以直接在rules里面覆蓋該配置，像這里的comma-dangle，一直給我報(bào)錯(cuò)，直接被我覆蓋掉了

6.運(yùn)行
這里有個(gè)小坑，如果你是全局安裝的eslint，你用到的插件也要全局安裝，不然eslint找不到插件會報(bào)錯(cuò)
由于我沒有全局安裝eslint
命令行運(yùn)行：
./node_modules/.bin/eslint --fix --ext .js --ext .jsx src
--ext后面接要檢查文件的后綴，最后一個(gè)參數(shù)為src，表示只檢查src文件夾下的js，jsx文件
但是一般不會直接在命令行運(yùn)行eslint，可以配合npm 的scripts 或者 pre-commit，后面會說

prettier是一個(gè)javascript的格式化工具，可以完全統(tǒng)一整個(gè)團(tuán)隊(duì)的代碼風(fēng)格
執(zhí)行一行命令，即可全局格式化代碼，并統(tǒng)一風(fēng)格
eslint有一個(gè)支持和prettier一起使用的插件：eslint-plugin-prettier
但是由于我的eslint使用的是Airbnb的規(guī)范，可能與prettier有很多沖突的配置，而且這些配置我們都不可知，
所以這個(gè)介紹多帶帶使用prettier
1.安裝
npm install --save-dev prettier

2.配置和規(guī)范
根目錄下新建 .prettierrc 文件
比如我的配置如下

{
  "printWidth": 80, //一行的字符數(shù)，如果超過會進(jìn)行換行，默認(rèn)為80
  "tabWidth": 2, //一個(gè)tab代表幾個(gè)空格數(shù)，默認(rèn)為80
  "useTabs": false, //是否使用tab進(jìn)行縮進(jìn)，默認(rèn)為false，表示用空格進(jìn)行縮減
  "singleQuote": false, //字符串是否使用單引號，默認(rèn)為false，使用雙引號
  "semi": true, //行位是否使用分號，默認(rèn)為true
  "trailingComma": "none", //是否使用尾逗號，有三個(gè)可選值""
  "bracketSpacing": true, //對象大括號直接是否有空格，默認(rèn)為true，效果：{ foo: bar }
  "parser": "babylon" //代碼的解析引擎，默認(rèn)為babylon，與babel相同。
}

更多配置規(guī)則：prettier配置規(guī)則

3.配合onchange
可實(shí)現(xiàn)在本地開發(fā)的時(shí)候，保存即格式化
首先安裝 onchange
npm install --save-dev onchange
定義npm的scripts如下

{
  "scripts": {
    "dev": "webpack-dev-server & npm run format",
    "format": "onchange "src/**/*.js" "src/**/*.jsx" "src/**/*.scss" -- prettier --write {{changed}}"
  }
}

用onchange監(jiān)聽src下js，jsx和scss后綴的文件，一旦發(fā)生改變，執(zhí)行 prettier 命令，用--write打印出所修改文件的文件名{{change}}
然后在啟動本地服務(wù)的同時(shí)，run format，啟動onchange的監(jiān)聽

pre-commit鉤子可以在 git commits 之前運(yùn)行一段腳本
比如在commit代碼之前運(yùn)行eslint，校驗(yàn)失敗則代碼提交失敗，校驗(yàn)成功則允許提交代碼

1.安裝
npm install --save-dev pre-commit

2.npm scripts配置

{
  "scripts": {
    "dev": "webpack-dev-server & npm run format",
    "format": "onchange "src/**/*.js" "src/**/*.jsx" "src/**/*.scss" -- prettier --write {{changed}}",
    "precommit-msg": "echo "Pre-commit checks........." && exit 0",
    "lint": "eslint --ext .js --ext .jsx src"
  },
  "pre-commit": ["precommit-msg", "lint"]
}

用pre-commit定義commit之前，執(zhí)行兩條命令
precommit-msg：輸出一些信息避免信息混淆
lint：使用eslint校驗(yàn)代碼

這時(shí)候你在終端git add 然后git commit的時(shí)候，就回啟動eslint校驗(yàn)，不通過校驗(yàn)無法提交成功

建議eslint校驗(yàn)不通過的代碼自己查復(fù)，有助于養(yǎng)成良好的編碼習(xí)慣
不久以后，你執(zhí)行eslint就再也沒有報(bào)錯(cuò)了，吊炸天啦！！

demo地址：https://github.com/shinyshine...