Visual Studio Code(也稱為VSCode)是一種輕量級(jí)但功能強(qiáng)大的跨平臺(tái)源代碼編輯器, 借助對(duì)TypeScript 和Chrome調(diào)試器等開(kāi)發(fā)工具的內(nèi)置支持，越來(lái)越多的開(kāi)發(fā)都都喜歡使用它。

如果你正在尋找更多的好用的 VsCode 工具，那么這篇或許能夠幫助你。以下是 2019年為 JS 開(kāi)發(fā)者提供的26個(gè)不可思議的VSCode工具。

1. Project Snippets (代碼片段)

project snippets，這是我最喜歡的一個(gè)工具，它來(lái)自于 VSCode 中內(nèi)置的原始用戶代碼片段。

該特性允許你創(chuàng)建自己的代碼段，以便在整個(gè)項(xiàng)目中重用。

但是“重用”它們到底意味著什么?

如果咱們經(jīng)常要重復(fù)寫(xiě)下面這樣的樣板文件：

 

 

 

 

實(shí)際上，咱們可以直接將上面的代碼放到的用戶代碼片段中，因此不必寫(xiě)出(或復(fù)制和粘貼)整個(gè)代碼片段，只需鍵入一個(gè)自定義前綴來(lái)生成配置的代碼片段即可。

打開(kāi) VsCode，然后選擇 文件 >首選項(xiàng) > 用戶代碼片段，則可以選擇通過(guò)單擊 '新建全局代碼片段文件'來(lái)創(chuàng)建新的全局代碼片段。

例如，要為 TypeScript React 項(xiàng)目創(chuàng)建自己的代碼片段文件，可以單擊新建全局代碼片段文件，輸入 入typescriptreact.json。它將引導(dǎo)咱們?cè)L問(wèn)一個(gè)新創(chuàng)建的.json文件，可以使用該文件來(lái)構(gòu)建使用TypeScript 的 React 應(yīng)用程序。

例如，要從上面的代碼示例創(chuàng)建一個(gè)用戶片段，可以這樣做:

 

 

 

 

有了它，咱們可以創(chuàng)建一個(gè)以.tsx結(jié)尾的新TypeScript文件，在新創(chuàng)建的文件輸入rsr，然后按回車或 tab 鍵 Vscode 就會(huì)幫咱們生成代碼片段內(nèi)容。

 

 

全局用戶代碼片段的問(wèn)題是，它將貫穿咱們所有項(xiàng)目(在某些情況下，這對(duì)于一般的代碼片段來(lái)說(shuō)是非常強(qiáng)大的)。

一些項(xiàng)目將以不同的方式配置，當(dāng)需要區(qū)分特定的用例時(shí)，用于配置代碼片段的全局文件就成了一個(gè)問(wèn)題。

例如，當(dāng)每個(gè)項(xiàng)目的項(xiàng)目結(jié)構(gòu)不同時(shí)

 

 

這對(duì)于具有特定file/folder結(jié)構(gòu)的項(xiàng)目可能就足夠了，但是如果咱們正在處理另一個(gè)項(xiàng)目，其中Link 組件具有類似components/Link的路徑，該怎么辦?

請(qǐng)注意這三個(gè)border tests是如何將它們的值用單引號(hào)括起來(lái)的:border: '1px solid red'。

這在 JS 中是完全有效的，但是如果使用 styled-components作為項(xiàng)目的樣式解決方案呢?該語(yǔ)法不再適用于該工作區(qū)，因?yàn)?styled components使用普通的CSS語(yǔ)法

這就是 project snippets 的亮點(diǎn)所在。

Project snippets使咱們可以聲明項(xiàng)目/工作區(qū)級(jí)別的代碼段，讓當(dāng)前項(xiàng)目代碼段不會(huì)與其它項(xiàng)目沖突也不會(huì)污染其他項(xiàng)目。

2. Better Comments(更加人性化的注釋)

如果喜歡在代碼中編寫(xiě)注釋，那么有時(shí)你可能會(huì)發(fā)現(xiàn)搜索您以前編寫(xiě)的特定注釋的位置是令人沮喪的，因?yàn)榇a可能會(huì)變得有些擁擠。

有了Better Comments，可以通過(guò)引入彩色注釋使注釋更加明顯。

 

 

 

 

3. Bracket Pair Colorizer (標(biāo)簽匹配 括號(hào)匹配插件)

第一次看到Bracket Pair Colorizer的屏幕截圖時(shí)，我第一時(shí)間入安裝使用了。

 

 

 

 

4. Material Theme

Material Theme是一個(gè)史詩(shī)主題，可以直接安裝到VSCode中，安裝后代碼看起來(lái)像這樣：

 

 

5. @typescript-eslint/parser

如果你是一個(gè)TypeScript用戶，應(yīng)該開(kāi)始考慮將你的 TSLint 配置轉(zhuǎn)移到ESLint + TypeScript上，TSLint 背后的支持者已經(jīng)宣布計(jì)劃在今年的某個(gè)時(shí)候棄用 TSLint。

項(xiàng)目正逐步采用@typescript-eslint/parser和相關(guān)包，以確保其項(xiàng)目的前瞻性設(shè)置。

咱們?nèi)匀荒軌蚶么蟛糠諩SLint的規(guī)則和兼容性與更漂亮使用新的設(shè)置。

6. Stylelint

對(duì)我來(lái)說(shuō)，出于以下幾個(gè)原因，stylelint 在我所有的項(xiàng)目中都是必須的：

1. 它有助于避免錯(cuò)誤。
2. 它加強(qiáng)了CSS中的樣式約定。
3. 它與Prettier支持并駕齊驅(qū)。
4. 它支持 CSS/SCSS/Sass/Less。
5. 它支持社區(qū)編寫(xiě)的插件。

 

 

7. Markdownlint + docsify

markdown 愛(ài)好者一定要試試 vscode 上的 markdownlint 擴(kuò)展，會(huì)用綠色波浪線給你提示出 N 多不符合書(shū)寫(xiě)規(guī)范的地方，比如：

• 標(biāo)題下面必須是個(gè)空行
• 代碼段必須加上類型
• 文中不能出現(xiàn)
• 這種html標(biāo)號(hào)
• URL必須用< >擴(kuò)起來(lái)

同時(shí)也可以配合安裝 docsify，因?yàn)樗С諱arkdown和每個(gè)項(xiàng)目的其他增強(qiáng)。

8. TODO Highlight

如果習(xí)慣在應(yīng)用程序代碼中編寫(xiě)待辦事項(xiàng)的開(kāi)發(fā)者，可以安裝 TODO Highlight 這樣的擴(kuò)展名對(duì)于突出顯示整個(gè)項(xiàng)目中設(shè)置的待辦事項(xiàng)非常有用。

 

 

 

 

9. Import Cost

Import Cost 可以顯示咱們?cè)赩S代碼編輯器中導(dǎo)入的程序包的大小。

 

 

10. Highlight Matching Tag

有時(shí)，試圖匹配標(biāo)簽的結(jié)束地方會(huì)令人沮喪，這時(shí) Highlight Matching Tag 就派上用場(chǎng)了

 

 

 

 

11. vscode-spotify

程序員經(jīng)常邊聽(tīng)歌邊打代碼，有時(shí)候?qū)懙揭话?，歌太難聽(tīng)，想切換，得切到音樂(lè)播放器，然后在回到 VsCdoe 界面，有點(diǎn)麻煩。

這就 是vscode-spotify 用武功之地，因?yàn)樗梢栽赩SCode內(nèi)直接使用音樂(lè)播放器。

有了這個(gè)擴(kuò)展，各位就可以在狀態(tài)欄中看到當(dāng)前播放的歌曲，可以通過(guò)熱鍵在歌曲之間切換，也可以點(diǎn)擊按鈕來(lái)控制音樂(lè)播放器等等。

 

 

12. GraphQL for VSCode

GraphQL一直在發(fā)展，咱們經(jīng)?？梢栽?JS 社區(qū)中看到它的身影。因此，最好開(kāi)始考慮在 VSCode中安裝 GraphQL for VSCode。

 

 

13. Indent-Rainbow

Indent-Rainbow 會(huì)給縮進(jìn)添加一種顏色,讓你更加直觀的看到代碼層次。

 

 

 

 

14. Color Highlight

Color Highlight 可以在代碼中突出顯示顏色，如下所示：

 

 

15. Color Picker

Color Picker 是一個(gè) VSCode 擴(kuò)展，它為咱們提供了一個(gè)圖形用戶界面，用來(lái)選擇和生成顏色代碼，如 CSS 顏色符號(hào)。

 

 

 

 

16. REST Client

第一次看到 REST Client 并嘗試它時(shí)，與現(xiàn)有的軟件(如Postman)相比，它似乎不是一個(gè)非常有用的工具。

但是，對(duì) REST Client 擴(kuò)展的用法了解越多，就會(huì)意識(shí)到它對(duì)開(kāi)發(fā)工具的影響有多大，尤其是在測(cè)試API 時(shí)。

只需要?jiǎng)?chuàng)建一個(gè)新文件寫(xiě)入下面這一行：

https://google.com

然后轉(zhuǎn)到命令面板(CTRL + SHIFT + P)，單擊Rest Client: Send request，它會(huì)在一瞬間彈出一個(gè)包含請(qǐng)求響應(yīng)詳細(xì)信息的新選項(xiàng)卡，非常有用：

 

 

甚至還可以傳遞參數(shù)，或?qū)⒄?qǐng)求體數(shù)據(jù)請(qǐng)求到POST，而下面僅需幾行代碼：

 

POST https://test.someapi.com/v1/account/user/login/ 
 
Content-Type: application/json 
 
{ "email": "someemail@gmail.com", "password": 1 } 

 

就會(huì)發(fā)送POST請(qǐng)求，參數(shù)為 { "email": "someemail@gmail.com", "password": 1 }。

17. Settings Sync

vscode上有各種各樣不同的插件，如果要在不同的電腦上使用 vscode 配置是件比較麻煩的事情，使用 Settings Sync 將 vscode 配置備份起來(lái)，當(dāng)需要在其他電腦使用 vscode 時(shí)只需下載備份的配置就可以了。

咱們只需要一個(gè) GitHub 帳戶，并且每次要保存配置(包括按鍵綁定，代碼片段，擴(kuò)展名等)時(shí)，只需按SHIFT + ALT + U將私有設(shè)置上傳到 GitHub 帳戶即可。然后，下次登錄或重新格式化為另一臺(tái)計(jì)算機(jī)時(shí)，可以按SHIFT + ALT + D組合鍵立即下載配置。

18. Todo Tree

Todo Tree 將幫助咱們找到在整個(gè)應(yīng)用程序代碼中創(chuàng)建的所有待辦事項(xiàng)。它將把它們放到一個(gè)單獨(dú)的樹(shù)中，還可以在面板的左側(cè)同時(shí)查看它們

 

 

19. Toggle Quotes

Toggle Quotes是一個(gè)有趣的實(shí)用工具擴(kuò)展，它允許咱們?cè)谝?hào)之間進(jìn)行切換。當(dāng)需要在使用字符串插入時(shí)切換到反引號(hào)時(shí)，它就派上用場(chǎng)了。

 

 

 

 

20. Better Align

Better Align 對(duì)齊賦值符號(hào)和注釋。要使用它，將光標(biāo)放在想要對(duì)齊的代碼中，使用CTRL + SHIFT + P打開(kāi)命令面板(或者使用自定義快捷方式打開(kāi)命令面板)，然后調(diào)用Align 命令。

 

 

 

 

21. Auto Close Tag

Auto Close Tag自動(dòng)閉合html標(biāo)簽。

 

 

 

 

22. Sort Lines

Sort lines 可以幫助咱們排序選中行。

 

 

 

 

23. VSCode Google Translate

如果是參與多語(yǔ)言開(kāi)發(fā)的項(xiàng)目，VSCode Google Translate 可以幫助咱們快速切換語(yǔ)言。

 

 

 

 

24. Prettier

Prettier是VSCode的擴(kuò)展，可自動(dòng)格式化JavaScript/TypeScript 等等，使代碼更漂亮。

 

 

 

 

25. Material Icon Theme

與其他圖標(biāo)主題相比，我更喜歡 Material Icon Theme，因?yàn)槲募愋透鼮槊黠@，尤其是在使用深色主題。

 

 

 

 

26. IntelliSense for CSS Class Names in HTML

IntelliSense for CSS Class Names in HTML，基于在工作空間中找到的定義性，并提供了CSS 類名補(bǔ)全。

 

 

 

 

27. Path Intellisense

Path Intellisense 自動(dòng)路勁補(bǔ)全。