常用插件

Auto Close Tag

自動添加HTML / XML關(guān)閉標(biāo)簽（必備）

Auto Rename Tag

自動重命名配對的HTML / XML標(biāo)簽(必備)

Beautify

格式化javascript,，JSON，CSS,，Sass,，和HTML

Bootstrap 4 & Font awesome snippets

包含Bootstrap 4＆Font awesome 的代碼片段

Bracket Pair Colorizer

顏色識別匹配括號

Class autocomplete for HTML

智能提示HTML class =“”屬性（必備）

Code Runner

非常強大的一款插件,，能夠運行多種語言的代碼片段或代碼文件：C，C ++,，Java,，JavaScript，PHP,，Python,，Perl，Ruby,，Go等等,，安裝完成后，右上角出現(xiàn)：

點擊這個按鈕就可以運行你的文件了（必備）

css peek

能夠查看CSS ID和類的字符串作為HTML文件中相應(yīng)的CSS定義（必備）

使用方法：將光標(biāo)放在class里面的屬性,，右擊

Dash

查文檔必備,，搭配 dash（不過似乎只有 mac 版）??

快捷鍵 ctrl + h 它根據(jù)你當(dāng)前選中的語言查找 dash 里面的文檔

Debugger for Chrome

讓 vscode 映射 chrome 的 debug功能，使靜態(tài)頁面都可以用 vscode 來打斷點調(diào)試

簡單使用：戳我

Document This

添加注釋塊

設(shè)置：

 "docthis.includeAuthorTag": true,//出現(xiàn)@Author
 "docthis.includeDescriptionTag": true,//出現(xiàn)@Description
 "docthis.authorName": "shenzekun",//作者名字

快捷鍵： 按兩次Ctrl+alt+d

ESLint

EsLint可以幫助我們檢查Javascript編程時的語法錯誤,。比如：在Javascript應(yīng)用中,，你很難找到你漏泄的變量或者方法。EsLint能夠幫助我們分析JS代碼,，找到bug并確保一定程度的JS語法書寫的正確性,。

配置：戳我

Font-awesome codes for html

用于 html 的Font-awesome代碼片段

filesize

在底部狀態(tài)欄顯示當(dāng)前文件大小，點擊后還可以看到詳細創(chuàng)建,、修改時間

Git History

以圖表的形式查看git日志

使用 command+shift+p（Ctrl+shift+p） 輸入git log就可以看到了

Git Lens

git 日志插件

HTML CSS Support

在 html 標(biāo)簽上寫class 智能提示當(dāng)前項目所支持的樣式（必備）

HTML Snippets

html 代碼片段（必備）

htmlhint

html代碼檢測

htmltagwrap

可以在選中HTML標(biāo)簽中外面套一層標(biāo)簽

使用：選擇一大段代碼,，然后按“Alt + W”

Indenticator

突出目前的縮進深度

IntelliSense for CSS class names

智能提示 css 的 class 名

Image Preview

鼠標(biāo)移到路徑里顯示圖像預(yù)覽

JavaScript (ES6) code snippets

es6代碼片段（必備）

JavaScript Snippet Pack

js代碼片段（必備）

jQuery Code Snippets

jQuery 代碼片段

Live Sass Compiler

實時編譯 sass ,不過需要配置，附上我的配置

"liveSassCompile.settings.formats":[
        // You can add more
        {
            "format": "compressed",//壓縮
            "extensionName": ".min.css",//編譯后綴名
            "savePath": "./css"http://編譯保存的路徑
        }
    ],

使用

markdownlint

markdown 語法檢查

Node.js Modules Intellisense

可以在導(dǎo)入語句中自動完成JavaScript / TypeScript模塊,。

npm Intellisense

在導(dǎo)入語句中自動填充npm模塊,跟Node.js Modules Intellisense差不多

open in browser

當(dāng)前的 html 文件用瀏覽器打開,，類似 webstorm 的那四個小瀏覽器圖標(biāo)功能，前提條件html 文件必須保存

快捷鍵alt+b

Output Colorizer

輸出提示的文字顏色有一些變化,，方便獲取關(guān)鍵信息

Path Intellisense

路徑自動補全（必備）

Prettier

格式化JavaScript / TypeScript / CSS ,。

Project Manager

工程項目過多時,，shift+cmd+p(shift+ctrl+p) 然后輸入project,，第一次選擇edit Project編輯自己的工程項目，之后就可以直接選擇open打開你的項目

Sass

寫 sass 必備

vscode-faker

生成假數(shù)據(jù),，地址,，電話，圖片等等

打開方式shift+cmd+p(shift+ctrl+p)) 然后輸入faker 就可以選擇了

Quokka.js

實時觀看 javascript 的變量的變化

使用：先shift+cmd+p （ctrl+shift+p）輸入 quokka 選擇 new javascript 就行了??

Regex Previewer

測試正則的插件

TSLint

檢查typescript編程時的語法錯誤語法

TypeScript Importer

自動搜索工作區(qū)文件中的TypeScript定義,，并將所有已知符號作為完成項,，以允許代碼完成。

vscode-icons

目錄樹圖標(biāo)

react

React-Native/React/Redux snippets for es6/es7

react代碼片段,，下載人數(shù)超多??

react-beautify

格式化 javascript, JSX, typescript, TSX 文件

vue

vetur

語法高亮,、智能感知

VueHelper

vue代碼片段

Vue TypeScript Snippets

vue的 typescript 代碼片段

Vue 2 Snippets

vue 2代碼片段

主題

Dracula Official

個人最喜歡的主題,，應(yīng)該是最好看的主題之一??

One Dark Pro

這個也好看??

Atom One Dark Theme(老版本)

這個和 One Dark Pro差不多，One Dark Pro顏色主題多一些

One Monokai Theme

Eva Theme

里面包含黑色和白色主題,，這個白色主題感覺挺好看的

Boxy Theme Kit

大家還有什么好的插件推薦嗎??