在vscode上開發(fā)個人項目的時候，代碼風格隨你定蒸痹，弄出花也沒人說，可是一旦是團隊項目匿沛，那就得注意代碼風格了榛鼎。舉個常見例子來說逃呼，A修改了代碼，并格式化成2個縮進苏揣，B也同時同一份代碼，但格式化成4個縮進平匈，這時候代碼提交的時候就會存在沖突藏古，需要花費大量的時間在格式上。
那么解決方案有三步
- 使用
Settings Sync拓展同步用戶設置 - 使用
eslint統(tǒng)一代碼風格 - 使用
git預檢查工具在提交前檢驗
使用Settings Sync拓展
在之間的文章說過
不可否者vscode是一款好用的IDE拧晕，可是仍存在著一些小缺陷，為了方便在不同設備上使用統(tǒng)一的用戶配置（團隊協(xié)作時特別有用孟辑，確保代碼風格統(tǒng)一）蔫敲，這里推薦一款vscode 插件 Settings Sync饲嗽。
在項目開始的時候奈嘿，我們要求團隊成功的用戶配置是一樣的，這樣可以確保代碼風格一致尽狠。相關(guān)教程請移步 使用Settings Sync同步你的vscode配置。
使用Eslint
使用腳手架創(chuàng)建vue項目的時候會提示是否使用eslint袄膏，如果選用了而代碼風格不符合規(guī)范掺冠，將在控制臺中輸出警告，此時代碼仍然可以運行德崭。
如果不是沒有選用eslint或者不是vue項目，我們可以在ide中按照eslint拓展來幫助我們定位錯誤代碼眉厨。
其他非vscode用戶也可以安裝相關(guān)的ide拓展安裝完成后將直接在代碼上顯示提示信息。
eslint有兩個重要的配置文件鹿蜀，需要在項目根目錄創(chuàng)建
1 .eslintignore
2 .eslintrc.js
.eslintignore eslint需要過濾檢查的資源
.eslintrc.js eslint 檢查規(guī)則
下面是簡單的配置
# .eslintignore
node_modules/ # 忽略node_modules文件夾
/dist/ # 忽略檢查dist文件夾
// .eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
其中我們需要注意的是.eslintrc.js文件下的rules配置，比如希望關(guān)閉eslint的console檢測销钝，我們再rules中添加一條規(guī)則
'no-console': 0
具體規(guī)則可以看官網(wǎng)或提示琐簇，配置屬性為0或off可以關(guān)閉指定檢查蒸健。
當然婉商，處理代碼檢查，eslint還支持代碼修復丈秩，簡單的代碼風格eslint可以直接修復，比如我們希望eslint修復src文件夾下的js文件饺著，那么在package.json中添加一條自定義命令
# 安裝eslint模塊
$ npm install eslint --save-dev
# 添加eslint修復命令
"lint-fix": "eslint --fix --ext .js src/"
執(zhí)行 npm run lint-fix 將自動修復肠牲。無法修復的將在控制臺給出提示幼衰。
使用git預檢查工具
原則上每次git commit前我們都需要先執(zhí)行一下 lint-fix命令的缀雳，避免遺忘或者偷懶，我們使用預檢查工具進行處理识椰。
husky 是一個npm模塊，可以在git提交前做攔截腹鹉，如果攔截返回異常信息，將取消提交功咒。
安裝husky
$ npm install husky --save-dev
添加攔截事件precommit
# package.json
"precommit": "npm run lint-fix"
在提交前自動執(zhí)行eslint修復命令竞膳，如果成功全部修復就可以正常提交诫硕，如果沒有全部修復坦辟，將取消提交章办，避免無法團隊代碼滨彻。
愉快的提交代碼
這樣就確保了開發(fā)者本地的代碼格式化是統(tǒng)一的挪蹭，而且提交到線上的代碼也是嚴格要求的。
