摘要：如果編輯器在編碼時(shí)實(shí)時(shí)給出反饋，對(duì)開(kāi)發(fā)者個(gè)人而言才是最高效的，在提交時(shí)做強(qiáng)制檢查只是從團(tuán)隊(duì)的視角保證編碼風(fēng)格的規(guī)范性和一致性。

工欲善其事必先利其器，軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來(lái)，先后折騰過(guò)的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，現(xiàn)在仍高頻使用的就是 VSCode 和 Vim 了。實(shí)際上我在 VSCode 里面安裝了 Vim 插件，用 Vim 的按鍵模式編碼，因?yàn)樽詮陌l(fā)現(xiàn)雙手不離鍵盤(pán)帶來(lái)的效率提升之后，就盡可能的不去摸鼠標(biāo)。

折騰過(guò) Atom 的我，首次試用 VSCode 就有種 Vim 的輕量感，試用之后果斷棄坑 Atom。Atom 之前，我還使用過(guò) SublimeText，但它在保存文件時(shí)會(huì)不時(shí)彈出購(gòu)買(mǎi)授權(quán)的彈窗，實(shí)在是令人煩惱。

每每上手新的編輯器，我都會(huì)根據(jù)自己的開(kāi)發(fā)習(xí)慣把它調(diào)較到理想狀態(tài)，加上熟悉編輯器各種特性，這個(gè)過(guò)程通常需要幾周的時(shí)間。接下來(lái)，我就從外觀配置、風(fēng)格檢查、編碼效率、功能增強(qiáng)等 4 方面來(lái)侃侃怎么配置 VSCode 來(lái)提高工作幸福感。

外觀是最先考慮的部分，從配置的角度，無(wú)非是配色、圖標(biāo)、字體等，俗話(huà)說(shuō)蘿卜白菜各有所愛(ài)，我目前的配色、圖標(biāo)、字體從下圖基本都能看出來(lái)，供大家參考：

配色：Solarized Dark，VSCode 已經(jīng)內(nèi)置，使用了至少 5 年以上的主題，Vim 下的配置完全相同；

圖標(biāo)：VSCode Great Icons，給不同類(lèi)型的文件配置不同的圖標(biāo)，非常直觀；

字體：Fira Code，自從發(fā)現(xiàn)并開(kāi)始使用 Fira Code，我就再也沒(méi)多看自其它字體一眼，字體如果比較優(yōu)雅，尤其是對(duì)數(shù)學(xué)運(yùn)算符的處理，寫(xiě)代碼時(shí)你真的會(huì)感覺(jué)在寫(xiě)詩(shī)，哈哈，F(xiàn)ira Code 的安裝過(guò)程稍微復(fù)雜點(diǎn)，但是效果絕對(duì)是值當(dāng)?shù)模?/p>

配色、圖標(biāo)、字體以及其他外觀配置項(xiàng)具體如下（注意，如果不安裝上述插件，部分配置項(xiàng)如果直接使用是無(wú)效的）：

{
  "editor.cursorStyle": "block",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.lineHeight": 24,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,
  "editor.renderIndentGuides": false,
  "editor.rulers": [120],
  "workbench.colorTheme": "Solarized Dark",
  "workbench.iconTheme": "vscode-great-icons"
}

之前我寫(xiě)過(guò)一篇在 Git 提交環(huán)節(jié)保障代碼風(fēng)格的文章：《使用 husky 和 lint-staged 打造超溜的代碼檢查工作流》。如果編輯器在編碼時(shí)實(shí)時(shí)給出反饋，對(duì)開(kāi)發(fā)者個(gè)人而言才是最高效的，在提交時(shí)做強(qiáng)制檢查只是從團(tuán)隊(duì)的視角保證編碼風(fēng)格的規(guī)范性和一致性。前端工程師會(huì)書(shū)寫(xiě)的代碼無(wú)非是：HTML、CSS、Javascript、Markdown、TypeScript、JSON，對(duì)應(yīng)的 Lint 工具就顯而易見(jiàn)：

ESLint：插件式架構(gòu)，有多種主流的編碼風(fēng)格規(guī)則集可供選擇，典型的有 Airbnb、Google 等，你甚至可以攢個(gè)自己的，按下不表；

StyleLint，同樣插件式架構(gòu)的樣式檢查工具，不過(guò)我在配置其檢查 react-native 中 styled-components 組件樣式時(shí)確實(shí)費(fèi)了不小的功夫，可以多帶帶寫(xiě)篇文章了；

TSLint：TypeScript 目前不是我的主要編程語(yǔ)言，但也早早的準(zhǔn)備好了；

MarkdownLint：Markdown 如果不合法，可能在某些場(chǎng)合導(dǎo)致解析器異常，因?yàn)?Markdown 有好幾套標(biāo)準(zhǔn)，在不同標(biāo)準(zhǔn)間部分語(yǔ)法支持可能是不兼容的；

除上面列的 Lint 工具之外，非常值得擁有的還有 EditorConfig 插件，幾乎所有主流 IDE 都有支持，我們可以通過(guò)簡(jiǎn)單的配置文件在不同團(tuán)隊(duì)成員、不同 IDE、不同平臺(tái)下約定好文件的縮進(jìn)方式、編碼格式，避免出現(xiàn)混亂，下面是我常用的配置：

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true
indent_style = space
indent_size = 2

[{*.yml,*.json}]
indent_style = space
indent_size = 2

有了風(fēng)格檢查，自然就會(huì)產(chǎn)生按配置好的風(fēng)格規(guī)則做文件格式化的需求，格式化的工具試用了好多，現(xiàn)在還在用的如下：

Prettier，實(shí)際上已經(jīng)是代碼格式化的工具標(biāo)準(zhǔn)，支持格式化幾乎所有的前端代碼，并且類(lèi)似于 EditorConfig 支持用文件來(lái)配置格式規(guī)則；

Vetur，格式化 .vue 文件，包括里面的 CSS、JS，至于模板即 HTML 部分，官方維護(hù)者說(shuō)沒(méi)有比較好的工具支持，默認(rèn)是不格式化的；

說(shuō)到編碼效率，連續(xù)六年幾乎每天都編碼的我目前最大的感受是：擊鍵的速度越來(lái)越跟不上思維的速度，這種情況下，就需要在編碼時(shí)設(shè)置適當(dāng)?shù)目旖萱I，組合使用智能建議、代碼片段、自動(dòng)補(bǔ)全來(lái)達(dá)到速度的最大化。

VSCode 內(nèi)置的智能建議已經(jīng)非常強(qiáng)大，不過(guò)我對(duì)默認(rèn)的配置做了如下修改，以達(dá)到類(lèi)似于在 Vim 中那樣在任何地方都啟用智能提示（尤其是注釋和字符串里面）：

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
}

接下來(lái)，重點(diǎn)說(shuō)說(shuō)代碼片段和自動(dòng)補(bǔ)全兩個(gè)效率提升利器。

英文叫做 Snippets，市面上主流的編輯器也都支持，其基本思想就是把常見(jiàn)的代碼模式抽出來(lái)，通過(guò) 2~3 個(gè)鍵就能展開(kāi) N 行代碼，代碼片段的積累一方面是根據(jù)個(gè)人習(xí)慣，另一方面是學(xué)習(xí)社區(qū)里面積累出來(lái)的好的編碼模式，如果覺(jué)得不適合你，可以改（找個(gè)現(xiàn)有的插件依葫蘆畫(huà)瓢），我常用的代碼片段插件如下：

HTML Snippets，各種 HTML 標(biāo)簽片段，如果你 Emmet 玩的熟，完全可以忽略這個(gè)；

Javascript (ES6) Code Snippets，常用的類(lèi)聲明、ES 模塊聲明、CMD 模塊導(dǎo)入等，支持的縮寫(xiě)不下 20 種；

Javascript Patterns Snippets，常見(jiàn)的編碼模式，比如 IIFE；

自動(dòng)補(bǔ)全本質(zhì)上和代碼片段類(lèi)似，不過(guò)是在特殊場(chǎng)合下以你的鍵入做為啟發(fā)式信息提供最有可能要輸入的建議，我常用的自動(dòng)補(bǔ)全工具有：

Auto Close Tag，適用于 JSX、Vue、HTML，在打開(kāi)標(biāo)簽并且鍵入 的時(shí)候，能自動(dòng)補(bǔ)全要閉合的標(biāo)簽；