工欲善其事，必先利其器。對(duì)于寫(xiě)代碼而言，也是需要有一套完善的工作流（工具和流程）。

先說(shuō)下編輯器選擇，在踏入前端行業(yè)之前，我最喜歡的代碼編輯器就是 sublime text ,它很簡(jiǎn)單，編寫(xiě)大部分語(yǔ)言都很ok，就比如說(shuō)寫(xiě) python ，下面是我在2017年我在學(xué)習(xí) python 時(shí)發(fā)布過(guò)一篇關(guān)于 sublime text 的百度經(jīng)驗(yàn)：

但是我現(xiàn)在幾乎不再使用它，取而代之的是 VSCode，一款微軟開(kāi)源的代碼編輯器，它自帶 git ， eslint 等工具，讓我們編碼更加的有質(zhì)量，有效率。

接下來(lái)是代碼規(guī)范方面，剛寫(xiě)代碼的前幾年，我毫不關(guān)心代碼質(zhì)量，遵循“能用就行”的原則，隨著項(xiàng)目的迭代，代碼越來(lái)越臃腫（好在我之前項(xiàng)目都不需要迭代），我仿佛聽(tīng)到有人罵罵咧咧的在吐槽我代碼🤣，就像我吐槽別人代碼一樣?，F(xiàn)在我們完全可以使用 eslint ， prettier ， editorConfig 來(lái)規(guī)范我們的代碼，對(duì)于團(tuán)隊(duì)而言，這個(gè)至關(guān)重要。

再聊聊 git工作流 ，現(xiàn)在管理代碼幾乎都是使用 git 版本管理工具，了解它是必要的，像一些基本的推拉合，解決沖突這些我們就不聊了，主要聊下團(tuán)隊(duì)協(xié)作方面使用 git 的工具及使用方法。

下面我將主要圍繞上面三個(gè)點(diǎn)來(lái)推薦一些工具和使用方法。

ESLint

ESLint 是一款插件化的 JavaScript 代碼靜態(tài)檢查工具，其核心是通過(guò)對(duì)代碼解析得到的 AST（Abstract Syntax Tree，抽象語(yǔ)法樹(shù)）進(jìn)行模式匹配，來(lái)分析代碼達(dá)到檢查代碼質(zhì)量和風(fēng)格問(wèn)題的能力。

安裝

安裝并初始化 eslint： 

// 全局安裝  
npm install -g eslint  
// cd到項(xiàng)目根目錄下 
// 強(qiáng)制初始化package.json  
npm init -force  
// 初始化ESLint  
eslint --init 

使用方式

寫(xiě)注釋

下面這行注釋表示在當(dāng)前文件中禁用 console 關(guān)鍵字 

/* eslint no-console: "error" */ 

寫(xiě)文件

ESLint支持 eslint.js ， eslintrc.yaml ， eslintrc.json 類型的配置文件。

如 eslint.js 配置文件： 

module.exports = {  
        env: {  
                // 環(huán)境  
                browser: true,  
                es2021: true,  
        },  
        extends: [  
                // 拓展  
                'eslint:recommended',  
                'plugin:@typescript-eslint/recommended',  
        ],  
        parser: '@typescript-eslint/parser', // 解析器，本解析器支持Ts  
        parserOptions: {  
                // 解析器配置選項(xiàng)  
                ecmaVersion: 12, // 指定es版本  
                sourceType: 'module', // 代碼支持es6，使用module  
        },  
        plugins: [  
                // 插件  
                '@typescript-eslint',  
        ],  
        rules: {  
                // 規(guī)則  
        },  
}; 

配置項(xiàng)

•  parser - 解析器
•  parserOptions - 解析器選項(xiàng)
•  env 和 globals - 環(huán)境和全局變量
•  rules - 規(guī)則
  •  off或0，關(guān)閉規(guī)則
  •  warn或1，開(kāi)啟規(guī)則
  •  error或2，開(kāi)啟規(guī)則，并會(huì)出錯(cuò)阻止代碼運(yùn)行
•  plugins - 插件
•  extends - 拓展

配置優(yōu)先級(jí)

規(guī)則是使用離要檢測(cè)的文件最近的 .eslintrc文件作為最高優(yōu)先級(jí)。

1.  行內(nèi)配置
2.  命令行選項(xiàng)
3.  項(xiàng)目級(jí)配置
4.  IDE環(huán)境配置

Prettier

Prettier 是一個(gè)代碼格式化的工具。

安裝使用 

npm install --save-dev --save-exact prettier  
// 格式化所有文件，npx命令是使用當(dāng)前項(xiàng)目下的prettier  
npx prettier --write . 

配置文件

Prettier 支持 .prettierrc 為名稱，以 .yaml .yml .json .js 為后綴的的配置文件，當(dāng)然你也可以使用 package.json 文件中的 Prettier 屬性來(lái)配置。 

module.exports = {  
        printWidth: 80, //一行的字符數(shù)，如果超過(guò)會(huì)進(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, //字符串是否使用單引號(hào)，默認(rèn)為false，使用雙引號(hào)  
        semi: true, //行位是否使用分號(hào)，默認(rèn)為true  
        trailingComma: 'none', //是否使用尾逗號(hào)，有三個(gè)可選值"  
} 

EditorConfig

EditorConfig有助于維護(hù)跨多個(gè)編輯器和IDE從事同一項(xiàng)目的多個(gè)開(kāi)發(fā)人員的一致編碼風(fēng)格，團(tuán)隊(duì)必備神器。

.editorconfig文件 

# EditorConfig is awesome: https://EditorConfig.org  
# top-most EditorConfig file 表示是最頂層的配置文件，發(fā)現(xiàn)設(shè)為true時(shí)，才會(huì)停止查找.editorconfig文件  
root = true  
# Unix-style newlines with a newline ending every file 對(duì)于所有的文件  始終在文件末尾插入一個(gè)新行  
[*]  
end_of_line = lf  
insert_final_newline = true  
# Matches multiple files with brace expansion notation  
# Set default charset  對(duì)于所有的js,py文件，設(shè)置文件字符集為utf-8  
[*.{js,py}]  
charset = utf-8  
# 4 space indentation 控制py文件類型的縮進(jìn)大小  
[*.py]  
indent_style = space  
indent_size = 4  
# Tab indentation (no size specified) 設(shè)置某中文件的縮進(jìn)風(fēng)格為tab Makefile未指明  
[Makefile]  
indent_style = tab  
# Indentation override for all JS under lib directory  設(shè)置在lib目錄下所有JS的縮進(jìn)為  
[lib/**.js]  
indent_style = space  
indent_size = 2  
# Matches the exact files either package.json or .travis.yml 設(shè)置確切文件 package.json/.travis/.yml的縮進(jìn)類型  
[{package.json,.travis.yml}]  
indent_style = space  
indent_size = 2 

通配符 

*                匹配除/之外的任意字符串  
**               匹配任意字符串  
?                匹配任意單個(gè)字符  
[name]           匹配name中的任意一個(gè)單一字符  
[!name]          匹配不存在name中的任意一個(gè)單一字符  
{s1,s2,s3}       匹配給定的字符串中的任意一個(gè)(用逗號(hào)分隔)   
{num1..num2}    匹配num1到num2之間的任意一個(gè)整數(shù), 這里的num1和num2可以為正整數(shù)也可以為負(fù)整數(shù) 

屬性 

indent_style    設(shè)置縮進(jìn)風(fēng)格(tab是硬縮進(jìn)，space為軟縮進(jìn))  
indent_size     用一個(gè)整數(shù)定義的列數(shù)來(lái)設(shè)置縮進(jìn)的寬度，如果indent_style為tab，則此屬性默認(rèn)為tab_width  
tab_width       用一個(gè)整數(shù)來(lái)設(shè)置tab縮進(jìn)的列數(shù)。默認(rèn)是indent_size  
end_of_line     設(shè)置換行符，值為lf、cr和crlf  
charset         設(shè)置編碼，值為latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建議使用utf-8-bom  
trim_trailing_whitespace  設(shè)為true表示會(huì)去除換行行首的任意空白字符。  
insert_final_newline      設(shè)為true表示使文件以一個(gè)空白行結(jié)尾  
root           表示是最頂層的配置文件，發(fā)現(xiàn)設(shè)為true時(shí)，才會(huì)停止查找.editorconfig文件 

VSCode集成

我使用的是 VSCode ，來(lái)給它添加魔法，加 EditorConfig ， Eslint ， Prettier ， Git 擴(kuò)展。

下面是 Prettier 的擴(kuò)展，我以下安裝好了，大家在擴(kuò)展中自行搜索安裝就好了。

配置全局工作區(qū) setting.json 文件，在文件中加入下面配置： 

// 設(shè)置全部語(yǔ)言在保存時(shí)自動(dòng)格式化  
"editor.formatOnSave": ture,  
// 設(shè)置特定語(yǔ)言在保存時(shí)自動(dòng)格式化  
"[javascript]": {  
    "editor.formatOnSave": true  
} 

prettier配置 

{  
  // 設(shè)置全部語(yǔ)言的默認(rèn)格式化程序?yàn)閜rettier  
  "editor.defaultFormatter": "esbenp.prettier-vscode",  
  // 設(shè)置特定語(yǔ)言的默認(rèn)格式化程序?yàn)閜rettier  
  "[javascript]": {  
    "editor.defaultFormatter": "esbenp.prettier-vscode"  
  }  
} 

ESLint配置 

{  
// 保存時(shí)自動(dòng)修復(fù)  
"editor.codeActionsOnSave": {  
    // For ESLint  
    "source.fixAll.eslint": true,  
}  
} 

husky/lint-staged

在提交 git 之前，我們需要校驗(yàn)我們的代碼是否符合規(guī)范，如果不符合，則不允許提交代碼。

首先，安裝依賴： 

npm install -D husky  
// lint-staged 可以讓husky只檢驗(yàn)git工作區(qū)的文件，不會(huì)導(dǎo)致你一下出現(xiàn)成百上千個(gè)錯(cuò)誤  
npm install -D lint-staged 

然后修改 package.json，增加配置： 

"scripts": {  
 "precommit": "eslint src/**/*.js"  
}  
"husky": {  
  "hooks": {  
    "pre-commit": "lint-staged"  
  }  
},  
"lint-staged": {  
  "src/**/*.{js,vue}": ["prettier --write", "eslint --cache --fix", "git add"]  
} 

在 git commit 之前會(huì)進(jìn)入 工作區(qū)文件的掃描，執(zhí)行 prettier 腳本，修改 eslint 問(wèn)題，然后重要提交到工作區(qū)。

Commitizen

一個(gè)格式化commit message的工具，為什么需要這個(gè)工具，下面是 angular.js 開(kāi)源項(xiàng)目的commit message，很清楚明了是不是，幾乎所有大項(xiàng)目和大公司都在使用這種 commit 規(guī)范。

好處：

•  提供更多的歷史信息，方便快速瀏覽
•  可以過(guò)濾某些commit，便于篩選代碼review
•  可以追蹤commit生成更新日志
•  可以關(guān)聯(lián)issues

安裝 

npm install -g commitizen 

安裝符合AngularJS規(guī)范的提交說(shuō)明，初始化cz-conventional-changelog適配器：

commitizen init cz-conventional-changelog --save --save-exact 

然后使用 git cz 命令 代替 git comit 來(lái)提交git說(shuō)明：

定制化項(xiàng)目提交說(shuō)明

上面的提交說(shuō)明都是英文的，如果想自定義，可以試試cz-customizable，先安裝： 

npm install cz-customizable --save-dev 

修改package.json文件： 

"config": {  
  "commitizen": {  
    "path": "node_modules/cz-customizable"  
  }  
} 

在項(xiàng)目根目錄下創(chuàng)建 .cz.config.js 文件： 

'use strict';  
module.exports = {  
  types: [  
    {value: '特性',     name: '特性:    一個(gè)新的特性'},  
    {value: '修復(fù)',      name: '修復(fù):    修復(fù)一個(gè)Bug'},  
    {value: '文檔',     name: '文檔:    變更的只有文檔'},  
    {value: '格式',    name: '格式:    空格, 分號(hào)等格式修復(fù)'},  
    {value: '重構(gòu)', name: '重構(gòu):    代碼重構(gòu)，注意和特性、修復(fù)區(qū)分開(kāi)'},  
    {value: '性能',     name: '性能:    提升性能'},  
    {value: '測(cè)試',     name: '測(cè)試:    添加一個(gè)測(cè)試'},  
    {value: '工具',    name: '工具:    開(kāi)發(fā)工具變動(dòng)(構(gòu)建、腳手架工具等)'},  
    {value: '回滾',   name: '回滾:    代碼回退'}  
  ], 
  scopes: [  
    {name: '模塊1'},  
    {name: '模塊2'},  
    {name: '模塊3'},  
    {name: '模塊4'}  
  ],  
  // it needs to match the value for field type. Eg.: 'fix'  
  /*  
  scopeOverrides: {  
    fix: [  
      {name: 'merge'},  
      {name: 'style'},  
      {name: 'e2eTest'},  
      {name: 'unitTest'}  
    ]  
  },  
  */  
  // override the messages, defaults are as follows  
  messages: {  
    type: '選擇一種你的提交類型:',  
    scope: '選擇一個(gè)scope (可選):',  
    // used if allowCustomScopes is true  
    customScope: 'Denote the SCOPE of this change:', 
    subject: '短說(shuō)明:\n',  
    body: '長(zhǎng)說(shuō)明，使用"|"換行(可選)：\n',  
    breaking: '非兼容性說(shuō)明 (可選):\n',  
    footer: '關(guān)聯(lián)關(guān)閉的issue，例如：#31, #34(可選):\n',  
    confirmCommit: '確定提交說(shuō)明?'  
  },  
  allowCustomScopes: true,  
  allowBreakingChanges: ['特性', '修復(fù)'],  
  // limit subject length  
  subjectLimit: 100  
}; 

然后運(yùn)行， git cz ：

Commitizen校驗(yàn)

檢驗(yàn)提交的說(shuō)明是否符合規(guī)范，不符合則不可以提交 

npm install --save-dev @commitlint/cli  
// 安裝符合Angular風(fēng)格的校驗(yàn)規(guī)則  
npm install --save-dev @commitlint/config-conventional  

在根目錄下創(chuàng)建 commitlint.config.js 并配置檢驗(yàn)： 

module.exports = {  
  extends: ['@commitlint/config-conventional']  
}; 

然后在 package.json 中配置 husky ，之前我們已經(jīng)安裝過(guò)了，直接添加配置： 

"husky": {  
  "hooks": {  
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"  
  }    
} 

給commit加表情

如這樣子的，是不是更加生動(dòng)形象了，有意思了。

安裝：

npm i -g gitmoji-cli 

使用：你可以在這個(gè) gitmoji 網(wǎng)站找到更多的表情來(lái)豐富你的提交記錄，只需要在提交記錄中加上類型 :bug: 的代碼就可以顯示表情了。