常用插件

Auto Close Tag

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

Auto Rename Tag

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

Beautify

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

Bootstrap 4 & Font awesome snippets

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

Bracket Pair Colorizer

顏色識(shí)別匹配括號(hào)

Class autocomplete for HTML

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

Code Runner

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

點(diǎn)擊這個(gè)按鈕就可以運(yù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ǎn)調(diào)試

簡(jiǎn)單使用：戳我

Document This

添加注釋塊

設(shè)置：

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

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

ESLint

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

配置：戳我

Font-awesome codes for html

用于 html 的Font-awesome代碼片段

filesize

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

Git History

以圖表的形式查看git日志

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

Git Lens

git 日志插件

HTML CSS Support

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

HTML Snippets

html 代碼片段（必備）

htmlhint

html代碼檢測(cè)

htmltagwrap

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

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

Indenticator

突出目前的縮進(jìn)深度

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

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

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

使用

markdownlint

markdown 語法檢查

Node.js Modules Intellisense

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

npm Intellisense

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

open in browser

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

快捷鍵alt+b

Output Colorizer

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

Path Intellisense

路徑自動(dòng)補(bǔ)全（必備）

Prettier

格式化JavaScript / TypeScript / CSS 。

Project Manager

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

Sass

寫 sass 必備

vscode-faker

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

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

Quokka.js

實(shí)時(shí)觀看 javascript 的變量的變化

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

Regex Previewer

測(cè)試正則的插件

TSLint

檢查typescript編程時(shí)的語法錯(cuò)誤語法

TypeScript Importer

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

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

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

One Dark Pro

這個(gè)也好看??

Atom One Dark Theme(老版本)

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

One Monokai Theme

Eva Theme

里面包含黑色和白色主題，這個(gè)白色主題感覺挺好看的

Boxy Theme Kit

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