一、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
然后會給你一系列的提示來讓你生成自己的代碼約束，你也可以直接選擇一個推薦代碼約束風格，我錄制了一個小視頻供你參考:
視頻鏈接:http://ozqubi472.bkt.clouddn.com/eslint-init-video.mp4
初始化命令成功后會在你本地的項目路徑下生成一個你預期類型(json，js，yaml)的文件(在執行eslint --init有讓你選擇你要以哪種文件類型保存配置)。當然你也可以在package.json里配置key為eslintConfig的對象，但為了保持package.json的簡單易懂不推薦這樣做。
下面是根據上面視頻操作生成的.eslintrc.js文件
//.eslintrc.js
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2016
},
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
};
ESlint被完全設置為可配置的，主要包括以下信息。
a. 指定腳本的運行環境。每種環境都有一組特定的預定義全局變量。
b.- 腳本在執行期間訪問的額外的全局變量。
c.啟用的規則及其各自的錯誤級別。
(4)ESlint的使用
a.通過命令行使用
你可以在項目的package.json的文件里配置script命令，然后通過執行特定的命令“npm run lint”來檢查代碼。
//package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint .",
"fix": "eslint --fix ."
}
b.實時提示
上面通過命令來檢查的的方式每次都要手動執行，太麻煩，有沒有可以實時提示的方法，我寫一行有錯誤編輯器就實時提示。這個就要配置編輯器的插件設置了。VS code 默認的ESlint的代碼檢查是關閉的，你可以在“首選項>>>>設置”里覆蓋掉默認設置。如下圖所示:
(5)ESlint的規則
a.除了默認的規則，你可以自定義規則來覆蓋推薦規則。
b.每條規則有3個等級：off、warn和error。off表示禁用這條規則(分別對應0，1，2)，warn表示僅給出警告，並不會導致檢查不通過，而error則會導致檢查不通過。
c.有些規則還帶有可選的參數，比如no-console可以寫成:
//不允許console.log(),但允許使用console.warn(),console.error(),console.info()
"no-console":[
“error”，{
“allow”:[“warn”,"error","info"]
}
]
d.我們還可以使用一些注釋在頁面中的某個位置關掉eslint的檢查。如圖所示，node環境下的documnent是未定義的，所以代碼檢查通不過，所以要加上‘ /eslint no-undef: "off"/’，這樣就可以通過了。
const srcs = await page.evaluate(() => {
/*eslint no-undef: "off"*/
const images = document.querySelectorAll('img.main_img');
return Array.prototype.map.call(images, img => img.src);
});
更多ESlint的規則的使用請參考http://eslint.cn/docs/rules/。
二、pre-commit的配置及使用
(1)pre-commit是用來做什么的？
有了ESlint我們可以做代碼風格的約束，但如果程序員gg/mm沒有遵守團隊的代碼規范，對於給出的提示也沒有理會，強制提交到服務器上也能成功，這似乎不太友好。而pre-commit就是用來做提交前的代碼風格檢查的，如果不符合風格就會提交失敗，並給出對應的提示。
(2)pre-commit的安裝
npm install --save-dev pre-commit
(3)pre-commit的配置
在package.json里配置如下
"pre-commit": [
"fix",
"lint"
]
(4)pre-commit的使用
在執行git commit 命令時會自動先執行之前的“fix”和“lint”命令(鈎子函數)，如果執行通過則提交，否則提交失敗，並給出具體的提示。
三、gitignore的配置
(1) gitignore是用來做什么的？
在上傳代碼至服務器的過程中，有些文件是不需要上傳的，這個時候我們可以通過在項目路徑下創建一個名為‘.gitignore’的文件來配置要忽略哪些文件。
(2) 配置規則
- 匹配模式前/代表項目根目錄
- 匹配模式最后加/代表目錄
- 匹配模式前加!代表取反
- *代表任意個字符
- ？匹配任意一個字符
- **匹配多級目錄
(3) 配置demo
下面給一個示例配置，實際開發過程中要以具體的業務需要為主。
logs
*.log
npm-debug.log
node_modules/
*.swp
.idea/
.vscode/
.DS_Store
build/
images/