vscode 前端插件推薦

經常使用插件

Auto Close Tag

自動添加HTML / XML關閉標籤（必備）

Auto Rename Tag

自動重命名配對的HTML / XML標籤(必備)

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等等，安裝完成後，右上角出現：

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

css peek

可以查看CSS ID和類的字符串做爲HTML文件中相應的CSS定義（必備）

使用方法：將光標放在class裏面的屬性，右擊

Dash

查文檔必備，搭配 dash（不過彷佛只有 mac 版）😁

快捷鍵 ctrl + h 它根據你當前選中的語言查找 dash 裏面的文檔

Debugger for Chrome

讓 vscode 映射 chrome 的 debug功能，使靜態頁面均可以用 vscode 來打斷點調試

簡單使用：戳我

Document This

添加註釋塊

設置：

"docthis.includeAuthorTag": true,//出現@Author
 "docthis.includeDescriptionTag": true,//出現@Description
 "docthis.authorName": "shenzekun",//做者名字

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

ESLint

EsLint能夠幫助咱們檢查Javascript編程時的語法錯誤。好比：在Javascript應用中，你很難找到你漏泄的變量或者方法。EsLint可以幫助咱們分析JS代碼，找到bug並確保必定程度的JS語法書寫的正確性。

配置：戳我

Font-awesome codes for html

用於 html 的Font-awesome代碼片斷

filesize

在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間

Git History

以圖表的形式查看git日誌

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

Git Lens

git 日誌插件

HTML CSS Support

在 html 標籤上寫class 智能提示當前項目所支持的樣式（必備）

HTML Snippets

html 代碼片斷（必備）

htmlhint

html代碼檢測

htmltagwrap

能夠在選中HTML標籤中外面套一層標籤

使用：選擇一大段代碼，而後按「Alt + W」

Indenticator

突出目前的縮進深度

IntelliSense for CSS class names

智能提示 css 的 class 名

Image Preview

鼠標移到路徑裏顯示圖像預覽

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"//編譯保存的路徑
        }
    ],

使用

markdownlint

markdown 語法檢查

Node.js Modules Intellisense

能夠在導入語句中自動完成JavaScript / TypeScript模塊。

npm Intellisense

在導入語句中自動填充npm模塊,跟Node.js Modules Intellisense差很少

open in browser

當前的 html 文件用瀏覽器打開，相似 webstorm 的那四個小瀏覽器圖標功能，前提條件html 文件必須保存

快捷鍵alt+b

Output Colorizer

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

Path Intellisense

路徑自動補全（必備）

Prettier

格式化JavaScript / TypeScript / CSS 。

Project Manager

工程項目過多時，shift+cmd+p(shift+ctrl+p) 而後輸入project，第一次選擇edit Project編輯本身的工程項目，以後就能夠直接選擇open打開你的項目

Sass

寫 sass 必備

vscode-faker

生成假數據，地址，電話，圖片等等

打開方式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

自動搜索工做區文件中的TypeScript定義，並將全部已知符號做爲完成項，以容許代碼完成。

vscode-icons

目錄樹圖標

react

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

react代碼片斷，下載人數超多😉

react-beautify

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

vue

vetur

語法高亮、智能感知

VueHelper

vue代碼片斷

Vue TypeScript Snippets

vue的 typescript 代碼片斷

Vue 2 Snippets

vue 2代碼片斷

主題

Dracula Official

我的最喜歡的主題，應該是最好看的主題之一😀

One Dark Pro

這個也好看😄

Atom One Dark Theme(老版本)

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

One Monokai Theme

Eva Theme

裏面包含黑色和白色主題，這個白色主題感受挺好看的

Boxy Theme Kit

---

你們還有什麼好的插件推薦嗎🤓