VScode插件推薦

代碼高亮

Art Template Helper

支持Art template highlight

Babel JavaScript

JavaScript語法高亮顯示ES201x, React JSX, Flow和GraphQL。

Color Highlight

展現擴展樣式css/web顏色。

DotENV

高亮顯示支持環境(.env)文件

Protobuf support

Protobuf 高亮

視覺效果

Power Mode

可以裝大神的炫酷插件

Close HTML/XML tag

這個擴展容許用顏色來標識匹配的括號。用戶能夠定義匹配哪些字符，使用哪些顏色。

Import Cost

查看引入模塊體積

Output Colorizer

爲輸出/調試/擴展面板和*.log文件添加了語法着色。

vscode-icons

icons美化

格式化

Beautify

在Visual Studio代碼中美化javascript、JSON、CSS、Sass和HTML。

Better Comments

更好的Comments擴展將幫助您在代碼中建立更友好的註釋。

Bracket Pair Colorizer

這個擴展容許用顏色來標識匹配的括號。用戶能夠定義匹配哪些字符，使用哪些顏色。

語法提示

ES7 React/Redux/GraphQL/React-Native snippets

語法簡寫

HTML Snippets

標籤語法簡寫

IntelliSense for CSS class names in HTML

類名提示

htmltagwrap

包裹html的標籤簡寫

JavaScript Booster

顯示可優化建議

Npm Intellisense

Visual Studio代碼插件，自動完成導入語句中的npm模塊。

工具

Color Picker

幫助與GUI生成顏色代碼，如CSS顏色符號。

而且，一個命令轉換顏色來改變顏色符號。

Document This

它自動爲TypeScript和JavaScript文件生成詳細的JSDoc註釋。

Partial Diff

比對選中的代碼

Code Runner

終端運行選中代碼

CSS Peek

從類名或ID找到定義樣式片斷

Debugger for Chrome

在谷歌Chrome瀏覽器中調試JavaScript代碼的VS代碼擴展，或者支持Chrome DevTools協議的其餘目標。

JS & CSS Minifier

簡單壓縮ES5/ES6/ES7/ES8 and CSS

Live Server

啓動本地服務器

node-readme

打開指定模塊的readme文件

Project Manager

項目管理

TabOut

跳出符號等

Git History

查看和搜索git日誌以及圖表和詳細信息。

查看文件的前一個副本。

查看和搜索歷史

查看一個或全部分支的歷史(git日誌)

查看文件的歷史

查看文件中的行歷史(Git fault)。

查看做者的歷史

比較分支

跨提交比較文件

挑選提交

從新提交

從提交建立分支

在treeview中查看提交信息(全部更改的快照)

合併和變基

打開該文件以查看歷史記錄

Git History Diff

git歷史。查看提交的細節。查看已提交文件的差別。

GitLens — Git supercharged

GitLens加強了Visual Studio代碼中內置的Git功能。它幫助您經過Git blame註釋和代碼鏡頭直觀地查看代碼做者，無縫地導航和探索Git存儲庫，經過強大的比較命令得到有價值的看法，等等。

配置

EditorConfig for VS Code

用項目的.editorconfig文件中的設置覆蓋編輯器默認設置

ESLint

擴展使用安裝在打開的工做區文件夾中的ESLint庫。若是文件夾不提供，擴展名將尋找全局安裝版本。

在新的文件夾上，您可能還須要建立.eslintrc配置文件。

stylelint

校驗CSS/SCSS/LESS

Settings Sync

保存配置