使用vscode工具在vue和react native項目上使用eslint和pre-commit

Eslint及pre-commit的安裝與使用（Vue）

一、ESlint的使用

1. ESlint是用來做什麼的？
   ESlint官網介紹是可組裝的JavaScript和JSX檢查工具。簡單點來說，就是檢查並約束代碼風格，使之保持一致。代碼檢查是一種靜態的分析，常用於尋找有問題的模式或者代碼，並且不依賴於具體的編碼風格。對大多數編程語言來說都會有代碼檢查，一般來說編譯程序會內置檢查工具JavaScript 是一個動態的弱類型語言，在開發中比較容易出錯。因爲沒有編譯程序，爲了尋找 JavaScript 代碼錯誤通常需要在執行過程中不斷調試。像 ESLint 這樣的可以讓程序員在編碼的過程中發現問題而不是在執行的過程中。
2. ESlint的安裝
   a.通過npm安裝
   npm install eslint -g
   注:配置ESLint的項目中需要設置好該項目的 package.json 文件，如果沒有的話可以使用 npm init來設置
   b.安裝Visual Studio Code ESlint插件
3. 初始化
   安裝成功後，用命令行工具進入到需要引入ESLint的項目的目錄中，然後輸入下面的命令進行ESLint的初始化操作：
   eslint --init
   然後會給你一系列的提示來讓你生成自己的代碼約束，你也可以直接選擇一個推薦代碼約束風格。
4. ESlint的使用:實時提示
   配置編輯器的插件設置。VS code 默認的ESlint的代碼檢查是關閉的，你可以在“首選項>>>>設置”裏覆蓋掉默認設置。如下圖所示，設置自動檢測：
   
   或者在settings.json裏面直接代碼設置：
   
   如上圖注意所示，修改的是修改普通的語法錯誤，比如是“”改成單引號，代碼出錯是無法自動修改的，如下圖所示：
   
   代碼錯誤是無法自動修改以及提交時也會報錯的，除非強制提交了。
   
   當然如果你自己不想讓保存的時候給你自動修改你也可以不加eslint.validate這段代碼，就是提交時修改語法錯誤了。
   

二、pre-commit的配置及使用(或者husky,RN例子用了這個)

1. pre-commit是用來做什麼的？
   有了ESlint我們可以做代碼風格的約束，但如果沒有遵守團隊的代碼規範，對於給出的提示也沒有理會，強制提交到服務器上也能成功，這似乎不太友好。而pre-commit就是用來做提交前的代碼風格檢查的，如果不符合風格就會提交失敗，並給出對應的提示。
2. pre-commit的安裝
   npm install --save-dev pre-commit
3. pre-commit的配置
   在package.json裏配置如下：
   
4. pre-commit的使用
   在執行git commit 命令時會自動先執行之前的lint-staged下的命令，如果執行通過則提交，否則提交失敗，並給出具體的提示。

React Native 項目的配置例子

公司新建的RN項目的package.json包含了eslint的插件和配置文件，因此直接npm install安裝即可（如若其他途徑，可自己百度搜索如何安裝插件和配置）。
安裝好node_modules以後，執行npm run lint即可查出錯誤結果(區別於vue，vue有熱重載依賴插件vue-hot-reload-api，保存時即可重載刷新)：

接下來要進行的步驟是git hook在本地commit的時候有error無法提交。

1. 安裝
   方法一（husky）：npm i -D husky lint-staged
   方法二：npm install --save-dev pre-commit

   然後安裝完成如下所示：

   方法一：
   
   方法二：
   

2. 配置
   在package.json文件中加入以下代碼：

   方法一：

   "scripts": {
     "precommit": "lint--staged",
   },
   "lint-staged": {
     "*.js": [
       "npm run lint",
       "git add"
     ]
   }
   

   方法二：

   "pre-commit": [
     "lint"
   ]
   

   然後進行commit操作的時候就會進行如下圖所示的操作，最終也就是會提示你所有的錯誤（error）以及提交失敗了，需要你自己修改錯誤（error）：

   方法一：
   
   
   方法二：
   
   上面的例子中我把故意加的未定義的ff去掉以後，再次進行commit，沒有error了，即可提交成功了。

   方法一：
   
   方法二：
   

拓展-Prettier的使用，統一代碼風格

1.什麼是prettier?

prettier是一個javascript的格式化工具，可以完全統一整個團隊的代碼風格。執行一行命令，即可全局格式化代碼，並統一風格。如下圖所示：

2.ESLint 和 Prettier 的衝突

在用 Prettier 格式化的時候，可以能會和 ESLint 定義的校驗規則衝突，比如 Prettier 字符串默認是用雙引號而 ESLint 定義的是單引號的話這樣格式化之後就不符合 ESLint 規則了。所以要解決衝突就需要在 Prettier 的規則配置裏也配置上和 ESLint 一樣的規則。

但是可以通過配置解決大部分衝突，但仍有一些是無法解決的，比如，Prettier 在 function 關鍵字後不允許有空格且不能自定義，那如果想避免 ESLint 不報錯，只能配置 ESLint 允許 function 關鍵字後不帶空格（主要針對匿名函數）。

這類不能配置的衝突很少，目前搜索到發現上述一例，所以，還是選擇使用 Prettier，畢竟，更多的時候使用Prettier 很方便，並且，後續 Prettier 版本可能會添加更多自定義選項。

（ps:⚠️有人不建議將prettier的校驗規則配置到eslint和airbnb或者standard的規則一起使用，這樣有衝突！prettier遵從的是google的規範。具體如何自己去查詢看看吧！）

3.安裝

npm install --save-dev prettier

4.配置

A.根目錄下新建 .prettierrc 文件

代碼如下:

{
  "printWidth": 80,
  "tabWidth": 4,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "always"
}

註釋：
“printWidth”: 80, //一行的字符數，如果超過會進行換行，默認爲80

“tabWidth”: 4, //設置工具每一個水平縮進的空格數

“useTabs”: false, //是否使用tab進行縮進，默認爲false，表示用空格進行縮減

“singleQuote”: false, //字符串是否使用單引號，默認爲false，使用雙引號

“semi”: true, //在語句末尾使用分號，默認爲true

“trailingComma”: “none”, //是否使用尾逗號，有三個可選值"<none|es5|all>"

“bracketSpacing”: true, //在對象字面量聲明所使用的花括號後（{）和前（}）輸出空格

“arrowParens”: “always” //爲單行箭頭函數的參數添加圓括號,always: (x) => x

更多配置規則：點擊此處prettier配置規則

B.在package.json文件中加入以下代碼

"scripts": {
  "prettier": "prettier --write src/**/*.js",
}

5.使用

命令行輸入：npm run prettier
出現如下圖所示修改：

然後有些規範區別就改變了，例如：




衝突問題——這之中需要注意的就是一開始所說的衝突問題：function () （eslint 推薦）和 function() （prettier 推薦） 的 function關鍵字後有無空格風格衝突問題。

疑難問題——：爲何會有換行，該如何解決？暫未知,待解決……

6.Pre-commit and prettier

在commit前忘記去執行npm run prettier的話，那就在package.json裏面配置：

"pre-commit": [
  "prettier",  //commit前執行prettier
  "lint"
]

步驟：1.git commit -m ‘test4’ -a


步驟：2.git commit -m ‘test5’ -a

步驟：3.git push

步驟：4.成功更新