用eslint + prettier + pre-commit管理項目(React)

前言

人是很懶惰的，你剛開始創建的一個規規整整的項目，可能一段時間事後，就回被你無數次的提交代碼弄得凌亂不堪。
就算你能保證你的編碼風格嚴謹統一，別人又該如何，每一個人都有不同的編碼風格，要保持統一，就要對項目進行適當的管理

正文

接下來介紹個React項目簡單管理的一個實踐：

1、Eslint

eslint能夠幫咱們校驗代碼，給整個項目的代碼定義一個規範，咱們寫的代碼必須按照這個規範寫，不然在校驗階段會報錯
這就是強迫症患者的福利了，強迫本身把eslint報的error所有處理掉，不久以後既能夠養成良好的編碼習慣了

1.安裝
npm install eslint babel-eslint --save-dev
也能夠全局安裝，這樣的話eslint命令適用於你的全部項目
npm install eslint -g

2.配置方法
能夠運行eslint --init，按照指示一步步配置
也能夠直接在根目錄新增一個.eslintrc文件進行配置

3.規範定義
能夠是你本身定義的一套規範，好比：字符創使用單引號，縮進爲2個空格等等
也能夠安裝一個成熟的規範，而後再配置文件中指定使用這個規範
好比:Airbnb的編碼規範是在業界很是流行的一套規範，咱們能夠試試
首先安裝 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的規則，具體的規則定義參照 eslint rules
Airbnb具體的規則能夠參考
Airbnb React編碼規範

PS:
其實一開始不要麻煩，耐心地跟着這套規範走，不久以後你的編碼習慣就會跟Airbnb基本一致了

4.針對react
因爲react的組件文件中，有不少違反eslint規範的地方，好比jsx語法，還有頭部import的React庫
若是不作特殊處理，都是會報錯的
因此有了一個針對react的插件：
npm install --save-dev eslint-plugin-react
這個插件能夠檢查react的jsx語法，jsx文件的縮進問題和部分語法問題

插件的配置仍是在.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指定後綴的文件的時候，不用寫後綴名，如
import Banner from './Banner'

PS: 有一些配置能夠不用糾結，莫名其妙報錯的話，你能夠直接在rules裏面覆蓋該配置，像這裏的comma-dangle，一直給我報錯，直接被我覆蓋掉了

6.運行
這裏有個小坑，若是你是全局安裝的eslint，你用到的插件也要全局安裝，否則eslint找不到插件會報錯
因爲我沒有全局安裝eslint
命令行運行：
./node_modules/.bin/eslint --fix --ext .js --ext .jsx src
--ext後面接要檢查文件的後綴，最後一個參數爲src，表示只檢查src文件夾下的js，jsx文件
可是通常不會直接在命令行運行eslint，能夠配合npm 的scripts 或者 pre-commit，後面會說

2、Prettier

prettier是一個javascript的格式化工具，能夠徹底統一整個團隊的代碼風格
執行一行命令，便可全局格式化代碼，並統一風格
eslint有一個支持和prettier一塊兒使用的插件：eslint-plugin-prettier
可是因爲個人eslint使用的是Airbnb的規範，可能與prettier有不少衝突的配置，並且這些配置咱們都不可知，
因此這個介紹單獨使用prettier
1.安裝
npm install --save-dev prettier

2.配置和規範
根目錄下新建 .prettierrc 文件
好比個人配置以下

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

更多配置規則：prettier配置規則

3.配合onchange
可實如今本地開發的時候，保存即格式化
首先安裝 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監聽src下js，jsx和scss後綴的文件，一旦發生改變，執行 prettier 命令，用--write打印出所修改文件的文件名{{change}}
而後在啓動本地服務的同時，run format，啓動onchange的監聽

3、Pre-commit

pre-commit鉤子能夠在 git commits 以前運行一段腳本
好比在commit代碼以前運行eslint，校驗失敗則代碼提交失敗，校驗成功則容許提交代碼

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以前，執行兩條命令
precommit-msg：輸出一些信息避免信息混淆
lint：使用eslint校驗代碼

這時候你在終端git add 而後git commit的時候，就回啓動eslint校驗，不經過校驗沒法提交成功

建議eslint校驗不經過的代碼本身查復，有助於養成良好的編碼習慣
不久之後，你執行eslint就再也沒有報錯了，吊炸天啦！！

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