Visual Studio Code有哪些你常用的插件？

---

推薦幾個自己喜歡的，不帶鏈接，自己搜索安裝吧。

五星力薦：

1. Bracket Pair Colorizer ：對括弧對進行著色，再也不會搞不清狀況了。

2. Git History: 可以查看Git log, file, 和line 歷史記錄。

3. Markdown PDF: 將markdown文檔轉換成pdf的利器

4. VSCode Great Icons: 我非常喜歡的一套Icons主題，對展開的文件有變色處理，很容易分辨

5. vscode-fileheader: 添加頭header comment，厲害的

6. monokia dimmed顏色主題，碼員大愛

7. Path Intellisense: 路徑提示器，好用得不得了

8. Setting Sync: 同步你得設置和插件

9. output colorizer: 輸出著色

其他：

1. Code Spellchecker : 代碼拼寫檢查，有時候也很煩，但是為了養成好的命名習慣也是好的

2. Document This: 為JavaScript和TypeScript提供JSDoc comments

3. filesize : 會在左下角顯示文件大小，很不錯

4. markdownlint: markdown 語法提示器

還有些限於語言得插件，因人而異，不介紹了。

------

歡迎訪問個人博客： [http://xiaokedada.com](http://xiaokedada.com)

---

推薦個自己寫的，嘿嘿。現在測試過 win 和 mac :

ext install background

github:

GitHub - shalldie/vscode-background: A vscode extension to make it lovely.

vscode market:

background in Other category for Visual Studio Code

---

主要做前端開發的，使用語言是typescript。

1. Visual Studio Code Settings Sync，主要用來同步家裡和公司的vscode配置的。

2. Debugger for Chrome，在Chrome瀏覽器中調試。

3. Debugger for Firefox，在Firefox瀏覽器中調試。

4. TSLint | Visual Studio Marketplace，校驗ts語法。

5. Document This，目前vscode上最好的ts注釋插件。

6. Bookmarks | Visual Studio Marketplace，書籤沒有太大作用，有時候做個標記有點用。

7. vscode-todo | Visual Studio Marketplace，todo注釋，但是在mac上必須設置語言才可以。

8. TypeScript | Visual Studio Marketplace，typescript必備插件。

9. Can I Use | Visual Studio Marketplace，檢測特性是否可用，用了typescript我就很少用了。

10. npm | Visual Studio Marketplace，npm相關命令，集成了終端後，我就很少用了。

11. File Peek | Visual Studio Marketplace，預覽文件，一般看模塊時用到。

12. Gulp Snippets，寫gulp時用到。

13. Dash | Visual Studio Marketplace，查詢API，需要先裝Dash軟體。應該只能用在mac平台上。

14. https://marketplace.visualstudio.com/items/GregorBiswanger.json2ts，快速生成一個typescript介面。

15. CodeMetrics | Visual Studio Marketplace，有助於我重構代碼。

16. Emoji | Visual Studio Marketplace，寫注釋使用，顯得輕鬆一些。

補充：

1. Output Colorizer in Languages category for Visual Studio Code，彩色輸出有助於快速找到輸出信息。

2. CodeBing in Other category for Visual Studio Code，直接在vscode中搜索。

3. Knockout.js Snippets for VS Code in Snippets category for Visual Studio Code，knockout在html中快速綁定。

4. TypeLens in Other category for Visual Studio Code，查看引用數量。

5. TODO Parser in Other category for Visual Studio Code，和上面的7作用一樣，推薦使用這個。

6. CSScomb in Other category for Visual Studio Code，給css排序。

7. Auto Import in Other category for Visual Studio Code，自動引入模塊。

8. Vim in Other category for Visual Studio Code，提高編輯效率。
9. vscode-icons in Themes category for Visual Studio Code，看起來很舒服，然並卵。

---

謝邀, 我在使用的主要有這些 (加黑為列表最近新增):

自產

Sensitive Replace 替換選中的字元串同時保留大小寫, 比如選中 sensitiveReplace 和 SensitiveReplace, 想要替換為 helloWorld 和 HelloWorld.

ECMAScript Quotes Transformer 有時字元串寫了一半想轉成模板字元串, 或者想從模板字元串轉為普通字元串的時候比較順手.
Open in User-defined Console 方便用自定義的命令行工具打開, 比如我用的是 ConEmu.

非自產

Git Lens Git blame 標註, Code Lens, 還有更多.
Code Spellchecker 拼寫檢查, 速度相對快. Rewrap 長注釋/markdown 換行.
ESLint 流行的 Linter 插件, 平時都是關掉了 VS Code 自帶的 Linter, 太慢了.
Visual Studio Code Settings Sync 可以同步配置插件等到 gist.
Git History 查看文件版本信息.
Debugger for Chrome 在 Code 中調試.
vscode-todo 查看 TODO 備忘.

然後雖然我不用, 有的同學可能需要這個:

Vim 模擬器.

---

推薦個自己寫的REST Client插件https://marketplace.visualstudio.com/items?itemName=humao.rest-client能夠在vscode裡面輕鬆發送請求，查看響應等各種功能。非常期待大家的建議和意見。 GitHub地址: Huachao/vscode-restclient

---

vscode是老師介紹給我的，用了第一次就覺得很順手，感覺比Atom舒服（純個人感覺，有不同意見歡迎留言）最初版本的Vscode給我的感覺就是漢化不完整，插件幾乎以英文居多（介紹及命令等），以我這雅思6分水平有些介紹也是看不懂，最初選擇只要與我所編寫語言相關就下載安裝，在使用過程中逐漸發現有點和不足，把我用的順手的留下，不順手的就卸載掉，推薦給知友們，僅供參考：

vscode-icon，這款必須要推薦，明顯提升效率的小插件，在項目文件多類型多的情況下，找到制定文件會大大縮短時間；

Class autocomplete for HTML，編寫html代碼的朋友們對html代碼的一大體現就是重複，如果純用手敲不僅累還會影響項目進度，這款自動補全插件真的很棒；

beautify，這款類似於vscode里格式化代碼的功能，不錯；

Emoji，很好玩的一款插件，可以在代碼中插入emoji了，也許是程序猿的娛樂方式吧；

HTML Snippets，這款插件包含html標籤，非常全，很實用；

Can I Use，自動檢測所寫代碼能否在相應容器正常編譯執行；

JavaScript Snippet Pack，針對js的插件，包含了js的常用語法關鍵字，很實用；

Python，針對python的插件，這是我用過所有python插件中最全的，自動補全功能對有些關鍵字沒有作用，不過還是很好用；

HTML CSS Support，在編寫樣式表的時候，自動補全功能大大縮減了編寫時間，推薦！

Auto Close Tag，編寫html代碼的時候，寫完開始標籤，這款插件會自動補全結束標籤，其實上面所說的html自動補全插件一個Tab就搞定了，不過有時也需要這款插件；

Auto Rename Tag，非常實用！要修改標籤名稱的時候自動修改結束標籤，節省一半時間，提升效率，非常棒！

MagicPython，非常好的Python插件；

---

Quokka.js 可以即時顯示js和ts的運行結果，想試驗一些短代碼的運行結果，但是又不想之後刪除文件的時候可以用到

附上一張官方效果圖：

---

C 艸三件套

C/C++ Clang | Visual Studio Marketplace

Debug | Visual Studio Marketplace

Clang-Format

---

推薦個自己寫的插件：Code Runner | Visual Studio Marketplace 支持多種語言，能直接跑code snippet，非常方便。

如果你在VS Code寫HTML/XML的話，可以用下面兩個插件：

• Auto Close Tag : 輸入開始標籤後，自動添加結束標籤。比如輸入&，自動添加&

• Auto Rename Tag : 更改HTML/XML標籤名時，自動更新相對應的開始標籤或結束標籤的標籤名

---

我覺得background插件非常牛逼，匿了

---

有一些個人作品沒有提交到marketplace，可以在github搜一下vscode extension

---

vscode-fileheader 自己寫的一個.支持頭部注釋,自動更新文件更新時間.

---

vscode-icon 不錯，文件夾文件類型都有小圖標了。

---

補充幾個常在各種推薦中露面但其實現在已經被vscode內置支持的插件，所以這些插件不必安裝：

• guides 縮進輔助線 可在設置中搜索guides找到
• html css support html中提示css 因為該功能中途消失過，所以出現過這個插件，商場中下載300k+，不過1.8版本該功能又回來了
• Document this js 的注釋模板

主題方面(當然，內置主題不一定和市場中的其他同名或類名主題是一模一樣的配色)：

• monokai（dark和dim）
• solarized（light和dark)
• tomorrow-light-blue

---

上面基本都說到了。我說幾個（上面可能沒提到的）

• babel es6/es7 es6/7語法
• beautify css格式化

• javascritp code(es6) snippets
• Path Intellisense 路徑自動補全（後續或許會內置）
• can i use 前端都懂，css屬性適用情況
• dart code 學習dart中……
• gitignore 都懂 不過挺雞肋的
• preview 預覽，支持md ,html，jade，圖片uri和css屬性
• stylelint 用於css/scss/less語法檢查
• vs color picker 選色盤+取色器，不幸的是windows only

主題和圖標

個人喜歡亮色主題（當然不能太亮）向草紙黃（如經典的solarized light），淺灰色（如atom的one light以前pycharm上用的igor和egor）個人覺得不錯，其實黑色，深色這些並不護眼……

• light+material 白色，有點像知乎的背景色
• material icon theme 這是圖標主題
• monokai light 白色，背景色類色默認的vs亮色主題背景，只是語法高亮大讚
• quiet light for vsc 淺灰色 很像知乎最外側的背景色
• sunrise 淺淺鴉青色？不知道怎麼描述，看起來不錯的
• flatUI 將編輯器flat風格化

當然自帶的solarized light(紙黃色)也不錯，左側欄會跟隨主題變色，而以上三個比較違和，其餘d地方亮色，左側一列暗色…新發現可以在view裡面將這個左側活動欄隱藏掉。

---

Haskell 兩件套

Haskell ghc-mod

Haskell Syntax Highlighting

---

go，誰用誰知道

---

賣瓜,可能是目前顏色區分最細緻的主題——Eva Theme

---

作為一名FE Coder，一個好用的編輯器是在是太重要了。入職之後一直使用VS Code這個編輯器，感覺就是比sublime沉重了好多，但是比webstorm輕便了好多，反應速度也一直不錯，就一直用下來了，跟sublime、Atom比git功能好棒啊！

現在分享一下我用的插件吧，感覺還是挺實用的。

下載量截止至發布時間

• Auto Close Tag
• Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does. 自動補全HTML/XML標籤，減少50%的工作量！
• Download：878,716
• Show:

• Auto Rename Tag
• Description: Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.自動更改HTML/XML標籤，不需要再進行二次修改，減少50%的工作量！
• Download：355,689
• Show:

• Path Intellisense
• Description: Visual Studio Code plugin that autocompletes filenames.文件路徑自動補全！！
• Download：557,505
• Show:

• Bracket Pair Colorizer
• Description: This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.自動標識相匹配括弧的顏色，有利於區分，webstorm的默認功能，VS Code里需要單獨安裝！
• Download：217,084
• Show:

• vscode-ext-color-highlight
• Description: This extension styles css/web colors found in your document.好看的顏色展示哦~
• Download：134,428
• Show:

• Emoji Code
• Description: Snippets to insert escaped Emoji code into HTML, CSS, JavaScript/CoffeeScript/TypeScript/LiveScript, Python and Ruby.程序猿自娛自樂的一個東西吧，哎~
• Download：15,601
• Show:

• vscode-fileheader
• Description: Add notes to the file header, and supports automatic update file modification time.快捷鍵ctrl+alt+i在文件開頭自動輸入作者信息和修改信息等內容，感覺在給自己加戲 ~
• Download：15,036
• Show:

下面是一些也挺有趣的插件，就不一一展示了，但是裝上很有趣哦，列在這裡~

• vscode-background
• 一定看到我編輯器背景的開心了，每次看到都暖暖的呢~這個插件文檔很詳盡了，有問題看文檔就行

• VSCode - Babel
• 支持ES6和ES7的語法

• js-beautify for VS Code
• 除自帶的format功能外自帶的美化代碼的插件

• VS Code - Debugger for Chrome
• 官方的描述很精準：Debug your JavaScript code running in Google Chrome from VS Code.

• Git History
• 大名鼎鼎的git history就不必多說了，設置快捷鍵體驗更加哦~

• VS Code ESLint extension
• 同樣大名鼎鼎的還有ESLint...也不必多說了

• Visual Studio Code HTML Snippets，VS Code JavaScript (ES6) snippets，React-Redux ES6 Snippets for Visual Studio Code
• FE Coder的福音，多看看文檔可提高編碼效率??

最後值得一提的是這次試用的GIF錄屏軟體，LICEcap，小巧輕便，使用簡單，贊！

好，就說這麼多了，日後有空再把相關的內容補上。看著我的開心擼碼去啦

---

居然，沒有人說git blame，多好用的插件啊（當然，主要是對代碼管理者，比如技術團隊leader來說尤其有用，或者老是說「哎呀，誰覆蓋了我的代碼。」）~

---

必須Eslint :）

---

推薦閱讀：