資訊專欄INFORMATION COLUMN
摘要：如果編輯器在編碼時(shí)實(shí)時(shí)給出反饋，對(duì)開發(fā)者個(gè)人而言才是最高效的，在提交時(shí)做強(qiáng)制檢查只是從團(tuán)隊(duì)的視角保證編碼風(fēng)格的規(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)雙手不離鍵盤帶來的效率提升之后，就盡可能的不去摸鼠標(biāo)。
折騰過 Atom 的我，首次試用 VSCode 就有種 Vim 的輕量感，試用之后果斷棄坑 Atom。Atom 之前，我還使用過 SublimeText，但它在保存文件時(shí)會(huì)不時(shí)彈出購買授權(quán)的彈窗，實(shí)在是令人煩惱。
每每上手新的編輯器，我都會(huì)根據(jù)自己的開發(fā)習(xí)慣把它調(diào)較到理想狀態(tài)，加上熟悉編輯器各種特性，這個(gè)過程通常需要幾周的時(shí)間。接下來，我就從外觀配置、風(fēng)格檢查、編碼效率、功能增強(qiáng)等 4 方面來侃侃怎么配置 VSCode 來提高工作幸福感。
外觀配置外觀是最先考慮的部分，從配置的角度，無非是配色、圖標(biāo)、字體等，俗話說蘿卜白菜各有所愛，我目前的配色、圖標(biāo)、字體從下圖基本都能看出來，供大家參考：
配色：Solarized Dark，VSCode 已經(jīng)內(nèi)置，使用了至少 5 年以上的主題，Vim 下的配置完全相同；
圖標(biāo)：VSCode Great Icons，給不同類型的文件配置不同的圖標(biāo)，非常直觀；
字體：Fira Code，自從發(fā)現(xiàn)并開始使用 Fira Code，我就再也沒多看自其它字體一眼，字體如果比較優(yōu)雅，尤其是對(duì)數(shù)學(xué)運(yùn)算符的處理，寫代碼時(shí)你真的會(huì)感覺在寫詩，哈哈，F(xiàn)ira Code 的安裝過程稍微復(fù)雜點(diǎn)，但是效果絕對(duì)是值當(dāng)?shù)模?/p>
配色、圖標(biāo)、字體以及其他外觀配置項(xiàng)具體如下（注意，如果不安裝上述插件，部分配置項(xiàng)如果直接使用是無效的）：
{
"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"
}
風(fēng)格檢查
之前我寫過一篇在 Git 提交環(huán)節(jié)保障代碼風(fēng)格的文章：《使用 husky 和 lint-staged 打造超溜的代碼檢查工作流》。如果編輯器在編碼時(shí)實(shí)時(shí)給出反饋，對(duì)開發(fā)者個(gè)人而言才是最高效的，在提交時(shí)做強(qiáng)制檢查只是從團(tuán)隊(duì)的視角保證編碼風(fēng)格的規(guī)范性和一致性。前端工程師會(huì)書寫的代碼無非是：HTML、CSS、Javascript、Markdown、TypeScript、JSON，對(duì)應(yīng)的 Lint 工具就顯而易見：
ESLint：插件式架構(gòu)，有多種主流的編碼風(fēng)格規(guī)則集可供選擇，典型的有 Airbnb、Google 等，你甚至可以攢個(gè)自己的，按下不表；
StyleLint，同樣插件式架構(gòu)的樣式檢查工具，不過我在配置其檢查 react-native 中 styled-components 組件樣式時(shí)確實(shí)費(fèi)了不小的功夫，可以多帶帶寫篇文章了；
TSLint：TypeScript 目前不是我的主要編程語言，但也早早的準(zhǔn)備好了；
MarkdownLint：Markdown 如果不合法，可能在某些場合導(dǎo)致解析器異常，因?yàn)?Markdown 有好幾套標(biāo)準(zhǔn)，在不同標(biāo)準(zhǔn)間部分語法支持可能是不兼容的；
除上面列的 Lint 工具之外，非常值得擁有的還有 EditorConfig 插件，幾乎所有主流 IDE 都有支持，我們可以通過簡單的配置文件在不同團(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)，支持格式化幾乎所有的前端代碼，并且類似于 EditorConfig 支持用文件來配置格式規(guī)則；
Vetur，格式化 .vue 文件，包括里面的 CSS、JS，至于模板即 HTML 部分，官方維護(hù)者說沒有比較好的工具支持，默認(rèn)是不格式化的；
編碼效率說到編碼效率，連續(xù)六年幾乎每天都編碼的我目前最大的感受是：擊鍵的速度越來越跟不上思維的速度，這種情況下，就需要在編碼時(shí)設(shè)置適當(dāng)?shù)目旖萱I，組合使用智能建議、代碼片段、自動(dòng)補(bǔ)全來達(dá)到速度的最大化。
VSCode 內(nèi)置的智能建議已經(jīng)非常強(qiáng)大，不過我對(duì)默認(rèn)的配置做了如下修改，以達(dá)到類似于在 Vim 中那樣在任何地方都啟用智能提示（尤其是注釋和字符串里面）：
{
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
}
接下來，重點(diǎn)說說代碼片段和自動(dòng)補(bǔ)全兩個(gè)效率提升利器。
代碼片段英文叫做 Snippets，市面上主流的編輯器也都支持，其基本思想就是把常見的代碼模式抽出來，通過 2~3 個(gè)鍵就能展開 N 行代碼，代碼片段的積累一方面是根據(jù)個(gè)人習(xí)慣，另一方面是學(xué)習(xí)社區(qū)里面積累出來的好的編碼模式，如果覺得不適合你，可以改（找個(gè)現(xiàn)有的插件依葫蘆畫瓢），我常用的代碼片段插件如下：
HTML Snippets，各種 HTML 標(biāo)簽片段，如果你 Emmet 玩的熟，完全可以忽略這個(gè)；
Javascript (ES6) Code Snippets，常用的類聲明、ES 模塊聲明、CMD 模塊導(dǎo)入等，支持的縮寫不下 20 種；
Javascript Patterns Snippets，常見的編碼模式，比如 IIFE；
自動(dòng)補(bǔ)全自動(dòng)補(bǔ)全本質(zhì)上和代碼片段類似，不過是在特殊場合下以你的鍵入做為啟發(fā)式信息提供最有可能要輸入的建議，我常用的自動(dòng)補(bǔ)全工具有：
Auto Close Tag，適用于 JSX、Vue、HTML，在打開標(biāo)簽并且鍵入 的時(shí)候，能自動(dòng)補(bǔ)全要閉合的標(biāo)簽；
Auto Rename Tag，適用于 JSX、Vue、HTML，在修改標(biāo)簽名時(shí)，能在你修改開始（結(jié)束）標(biāo)簽的時(shí)候修改對(duì)應(yīng)的結(jié)束（開始）標(biāo)簽，幫你減少 50% 的擊鍵；
Path Intellisense，文件路徑補(bǔ)全，在你用任何方式引入文件系統(tǒng)中的路徑時(shí)提供智能提示和自動(dòng)完成；
NPM Intellisense，NPM 依賴補(bǔ)全，在你引入任何 node_modules 里面的依賴包時(shí)提供智能提示和自動(dòng)完成；
IntelliSense for CSS class names，CSS 類名補(bǔ)全，會(huì)自動(dòng)掃描整個(gè)項(xiàng)目里面的 CSS 類名并在你輸入類名時(shí)做智能提示；
Emmet，以前叫做 Zen Coding，我發(fā)現(xiàn)后，也是愛不釋手，可以把類 CSS 選擇符的字符串展開成 HTML 標(biāo)簽，VSCode 已經(jīng)內(nèi)置，官方介紹文檔參見，你需要做的就是熟悉他的語法，并勤加練習(xí)；
當(dāng)然，如果你還用 VSCode 編寫其他語言的代碼，比如 PHP，就去市場上搜索 “PHP Intellisense” 好了。
功能增強(qiáng)在效率提升方面除了上面的代碼片段、自動(dòng)補(bǔ)全之外，我還安裝了下面幾個(gè)插件，方便快速的瀏覽和理解代碼，并且在不同項(xiàng)目之間切換。
Color Highlight，識(shí)別代碼中的顏色，包括各種顏色格式；
Bracket Pair Colorizer，識(shí)別代碼中的各種括號(hào)，并且標(biāo)記上不同的顏色，方便你掃視到匹配的括號(hào)，在括號(hào)使用非常多的情況下能環(huán)節(jié)眼部壓力，編輯器快捷鍵固然好用，但是在臨近嵌套多的情況下卻有些力不從心；
Project Manager，項(xiàng)目管理，讓我們方便的在命令面板中切換項(xiàng)目文件夾，當(dāng)然，你也可以直接打開包含多個(gè)項(xiàng)目的父級(jí)文件夾，但這樣可能會(huì)讓 VSCode 變慢；
結(jié)語說了這么多，相信讀到這里的你也期望用工具來提高自己的效率。
提高效率有沒有法門？是有的，簡單的事情重復(fù)化，重復(fù)的事情標(biāo)準(zhǔn)化，標(biāo)準(zhǔn)的事情自動(dòng)化，發(fā)現(xiàn)一個(gè)痛點(diǎn)，用插件解決一個(gè)痛點(diǎn)，你的效率自然就上來了。
你都用了哪些插件呢？歡迎留言交流！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89740.html
摘要：如果編輯器在編碼時(shí)實(shí)時(shí)給出反饋，對(duì)開發(fā)者個(gè)人而言才是最高效的，在提交時(shí)做強(qiáng)制檢查只是從團(tuán)隊(duì)的視角保證編碼風(fēng)格的規(guī)范性和一致性。 工欲善其事必先利其器，軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來，先后折騰過的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，現(xiàn)在...
摘要：做個(gè)記錄，上菜了如何打開配置這里以為例，其他編輯器大概也差不多。時(shí)間相關(guān)當(dāng)前年份當(dāng)前年份的后兩位格式化為兩位數(shù)字的當(dāng)前月份，如當(dāng)前月份的全稱，如當(dāng)前月份的簡稱，如當(dāng)天月份第幾天當(dāng)天周幾，如當(dāng)天周幾的簡稱，如當(dāng)前小時(shí)小時(shí)制當(dāng)前分鐘當(dāng)前秒數(shù)。 為什么談到Snippet 今天下午在用vscode做小程序的時(shí)候，發(fā)現(xiàn)很不方便，因?yàn)樯痰昀锾峁┑拇a片段極為有限，而且平時(shí)幾乎每天都需要用到代碼片段...
摘要：做個(gè)記錄，上菜了如何打開配置這里以為例，其他編輯器大概也差不多。時(shí)間相關(guān)當(dāng)前年份當(dāng)前年份的后兩位格式化為兩位數(shù)字的當(dāng)前月份，如當(dāng)前月份的全稱，如當(dāng)前月份的簡稱，如當(dāng)天月份第幾天當(dāng)天周幾，如當(dāng)天周幾的簡稱，如當(dāng)前小時(shí)小時(shí)制當(dāng)前分鐘當(dāng)前秒數(shù)。 為什么談到Snippet 今天下午在用vscode做小程序的時(shí)候，發(fā)現(xiàn)很不方便，因?yàn)樯痰昀锾峁┑拇a片段極為有限，而且平時(shí)幾乎每天都需要用到代碼片段...
摘要：是一個(gè)極度純凈的上傳插件，通過簡單調(diào)整就可以融入到任何項(xiàng)目，支持多文件上傳上傳速率動(dòng)態(tài)控制真實(shí)進(jìn)度監(jiān)控分塊生成分塊上傳校驗(yàn)秒傳暫停取消等。 跨域?qū)W習(xí)筆記 前言: 當(dāng)一個(gè)資源，向與之所在服務(wù)器不同的域或端口請求另一個(gè)資源時(shí)，這個(gè)HTTP請求，我們認(rèn)為是跨域的請求。出于安全考慮，瀏覽器會(huì)限制腳本發(fā)起的跨域HTTP請求。 那天后端讓我把token放到http請求頭字段里，說是為了和RN端統(tǒng)一...
閱讀 2526·2023-04-25 17:27
閱讀 1838·2019-08-30 15:54
閱讀 2379·2019-08-30 13:06
閱讀 2991·2019-08-30 11:04
閱讀 760·2019-08-29 15:30
閱讀 738·2019-08-29 15:16
閱讀 1742·2019-08-26 10:10
閱讀 3615·2019-08-23 17:02
