作者：geekape

https://juejin.cn/post/6921223155621036039

工欲善其事，必先利其器。對於寫程式碼而言，也是需要有一套完善的工作流（工具和流程）。

先說下編輯器選擇，在踏入前端行業之前，我最喜歡的程式碼編輯器就是 sublime text ,它很簡單，撰寫大部分語言都很ok，就例如說寫 python ，下面是我在2017年我在學習 python 時釋出過一篇關於 sublime text 的百度經驗：

但是我現在幾乎不再使用它，取而代之的是 VSCode，一款微軟開源的程式碼編輯器，它自帶 git ， eslint 等工具，讓我們編碼更加的有品質，有效率。

接下來是程式碼規範方面，剛寫程式碼的前幾年，我毫不關心程式碼品質，遵循「能用就行」的原則，隨著專案的迭代，程式碼越來越臃腫（好在我之前專案都不需要迭代），我彷彿聽到有人罵罵咧咧的在吐槽我程式碼????，就像我吐槽別人程式碼一樣。現在我們完全可以使用 eslint ， prettier ， editorConfig 來規範我們的程式碼，對於團隊而言，這個至關重要。

再聊聊 git工作流 ，現在管理程式碼幾乎都是使用 git 版本管理工具，了解它是必要的，像一些基本的推拉合，解決衝突這些我們就不聊了，主要聊下團隊協作方面使用 git 的工具及使用方法。

下面我將主要圍繞上面三個點來推薦一些工具和使用方法。

ESLint

ESLint 是一款外掛化的 JavaScript 程式碼靜態檢查工具，其核心是透過對程式碼解析得到的 AST（Abstract Syntax Tree，抽象語法樹）進行模式匹配，來分析程式碼達到檢查程式碼品質和風格問題的能力。

安裝

安裝並初始化 eslint：

// 全域安裝
npm install -g eslint

// cd到專案根目錄下
// 強制初始化package.json
npm init -force

// 初始化ESLint
eslint --init

使用方式

寫註解

下面這行註解表示在當前檔案中禁用 console 關鍵字

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

寫檔案

ESLint支援 eslint.js ， eslintrc.yaml ， eslintrc.json 型別的設定檔。

如 eslint.js 設定檔：

module.exports = {
env: {
// 環境
browser: true,
es2021: true,
},
extends: [
// 拓展
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
],
parser: '@typescript-eslint/parser', // 解析器，本解析器支援Ts
parserOptions: {
// 解析器配置選項
ecmaVersion: 12, // 指定es版本
sourceType: 'module', // 程式碼支援es6，使用module
},
plugins: [
// 外掛
'@typescript-eslint',
],
rules: {
// 規則
},
};

配置項

• parser - 解析器

• parserOptions - 解析器選項

• env 和 globals - 環境和全域變數

• rules - 規則

• • off或0，關閉規則

  • warn或1，開啟規則

  • error或2，開啟規則，並會出錯阻止程式碼執行

• plugins - 外掛

• extends - 拓展

配置優先順序

規則是使用離要檢測的檔案最近的 .eslintrc檔案作為最高優先順序。

1. 行內配置

2. 命令列選項

3. 專案級配置

4. IDE環境配置

Prettier

Prettier 是一個程式碼格式化的工具。

安裝使用

npm install --save-dev --save-exact prettier

// 格式化所有檔案，npx命令是使用當前專案下的prettier
npx prettier --write .

設定檔

Prettier 支援 .prettierrc 為名稱，以 .yaml .yml .json .js 為後序的的設定檔，當然你也可以使用 package.json 檔案中的 Prettier 屬性來配置。

module.exports = {
printWidth: 80, //一行的字元數，如果超過會進行換行，預設為80
tabWidth: 2, //一個tab代表幾個空白數，預設為80
useTabs: false, //是否使用tab進行縮進，預設為false，表示用空白進行縮減
singleQuote: false, //字串是否使用單引號，預設為false，使用雙引號
semi: true, //行位是否使用分號，預設為true
trailingComma: 'none', //是否使用尾逗號，有三個可選值"
}

EditorConfig

EditorConfig有助於維護跨多個編輯器和IDE從事同一專案的多個開發人員的一致編碼風格，團隊必備神器。

.editorconfig檔案

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file 表示是最頂層的設定檔，發現設為true時，才會停止搜尋.editorconfig檔案
root = true

# Unix-style newlines with a newline ending every file 對於所有的檔案 始終在檔案末尾寫入一個新行
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset 對於所有的js,py檔案，設定檔案編碼表為utf-8
[*.{js,py}]
charset = utf-8

# 4 space indentation 控制py檔案型別的縮進大小
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified) 設定某中檔案的縮進風格為tab Makefile未指明
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory 設定在lib目錄下所有JS的縮進為
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml 設定確切檔案 package.json/.travis/.yml的縮進型別
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

萬用字元

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

屬性

indent_style 設定縮進風格(tab是硬縮進，space為軟縮進)
indent_size 用一個整數定義的列數來設定縮進的寬度，如果indent_style為tab，則此屬性預設為tab_width
tab_width 用一個整數來設定tab縮進的列數。預設是indent_size
end_of_line 設定換行符，值為lf、cr和crlf
charset 設定編碼，值為latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建議使用utf-8-bom
trim_trailing_whitespace 設為true表示會去除換行行首的任意空白字元。
insert_final_newline 設為true表示使檔案以一個空白行結尾
root 表示是最頂層的設定檔，發現設為true時，才會停止搜尋.editorconfig檔案

VSCode整合

我使用的是 VSCode ，來給它新增魔法，加 EditorConfig ， Eslint ，Prettier ， Git 擴展。

下面是 Prettier 的擴展，我以下安裝好了，大家在擴展中自行搜尋安裝就好了。

配置全域工作區 setting.json 檔案，在檔案中加入下面配置：

// 設定全部語言在儲存時自動格式化
"editor.formatOnSave": ture,
// 設定特定語言在儲存時自動格式化
"[javascript]": {
"editor.formatOnSave": true
}

prettier配置

{
// 設定全部語言的預設格式化程式為prettier
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 設定特定語言的預設格式化程式為prettier
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

ESLint配置

{
// 儲存時自動修復
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
}
}

husky/lint-staged

在提交 git 之前，我們需要校驗我們的程式碼是否符合規範，如果不符合，則不允許提交程式碼。

首先，安裝依賴：

npm install -D husky

// lint-staged 可以讓husky只檢驗git工作區的檔案，不會導致你一下出現成百上千個錯誤
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 之前會進入 工作區檔案的掃描，執行 prettier 腳本，修改 eslint 問題，然後重要提交到工作區。

Commitizen

一個格式化commit message的工具，為什麼需要這個工具，下面是 angular.js 開源專案的commit message，很清楚明了是不是，幾乎所有大專案和大公司都在使用這種 commit 規範。好處：

• 提供更多的歷史訊息，方便快速瀏覽

• 可以過濾某些commit，便於篩選程式碼review

• 可以追蹤commit生成更新日誌

• 可以關聯issues

安裝

npm install -g commitizen

安裝符合AngularJS規範的提交說明，初始化cz-conventional-changelog轉接器：

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

然後使用 git cz 命令 代替 git comit 來提交git說明：

定製化專案提交說明

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

npm install cz-customizable --save-dev

修改package.json檔案：

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

在專案根目錄下建立 .cz.config.js 檔案：

'use strict';

module.exports = {

types: [
{value: '屬性', name: '屬性: 一個新的屬性'},
{value: '修復', name: '修復: 修復一個Bug'},
{value: '檔案', name: '檔案: 變更的衹有檔案'},
{value: '格式', name: '格式: 空白, 分號等格式修復'},
{value: '重構', name: '重構: 程式碼重構，注意和屬性、修復區分開'},
{value: '效能', name: '效能: 提升效能'},
{value: '測試', name: '測試: 新增一個測試'},
{value: '工具', name: '工具: 開發工具變動(構建、腳手架工具等)'},
{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: '選擇一個scope (可選):',
// used if allowCustomScopes is true
customScope: 'Denote the SCOPE of this change:',
subject: '短說明:
',
body: '長說明，使用"|"換行(可選)：
',
breaking: '非相容性說明 (可選):
',
footer: '關聯關閉的issue，例如：#31, #34(可選):
',
confirmCommit: '確定提交說明?'
},

allowCustomScopes: true,
allowBreakingChanges: ['屬性', '修復'],

// limit subject length
subjectLimit: 100

};

然後執行， git cz ：

Commitizen校驗

檢驗提交的說明是否符合規範，不符合則不可以提交

npm install --save-dev @commitlint/cli

// 安裝符合Angular風格的校驗規則
npm install --save-dev @commitlint/config-conventional

在根目錄下建立 commitlint.config.js 並配置檢驗：

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

然後在 package.json 中配置 husky ，之前我們已經安裝過了，直接新增配置：

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

給commit加表情

如這樣子的，是不是更加生動形象了，有意思了。安裝：

npm i -g gitmoji-cli

使用：你可以在這個 gitmoji 網站找到更多的表情來豐富你的提交紀錄，只需要在提交紀錄中加上型別 :bug: 的程式碼就可以顯示錶情了。

參考資料

• https://juejin.cn/post/6909788084666105864

• https://cloud.tencent.com/developer/article/1546185

• https://www.jianshu.com/p/d264f88d13a4

• https://juejin.cn/post/6844903831893966856

1. JavaScript 重溫系列（22篇全）

2. ECMAScript 重溫系列（10篇全）

3. JavaScript設計範式 重溫系列（9篇全）

4. 正則 / 框架 / 演算法等 重溫系列（16篇全）

5. Webpack4 入門（上）|| Webpack4 入門（下）

6. MobX 入門（上） || MobX 入門（下）

7. 100+篇原創系列匯總

回復「加群」與大佬們一起交流學習~

點選「閱讀原文」檢視 100+ 篇原創文章