基礎(chǔ)必備插件
1、View In Browser
在瀏覽器里預(yù)覽網(wǎng)頁必備。
2、vscode-icons
改變編輯器里面的文件圖標(biāo)，個人比較稀飯這個。其他的這里就不說了。
3、Bracket Pair Colorizer
給嵌套的各種括號加上不同的顏色。
4、Highlight Matching Tag
高亮對應(yīng)的 HTML 標(biāo)簽和標(biāo)識出對應(yīng)的各種括號的功能。
5、Auto Rename Tag
自動修改匹配的 HTML 標(biāo)簽。
6、Path Intellisense
智能路徑提示，可以在你輸入文件路徑時智能提示。
7、Markdown Preview
實時預(yù)覽 markdown。
8、stylelint
CSS / SCSS / Less 語法檢查
進(jìn)價必備插件
9、Live Server
彩蛋1：
下面的小字注解： <ruby style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;">n p m<rt style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;">Node 包管理器</rt></ruby>
是這樣寫出來的：<ruby>n p m<rp>(</rp><rt>Node 包管理器</rt><rp>)</rp></ruby>
一個不錯的 Markdown 書寫技巧是吧？提升閱讀體驗，真是太刺激了 : )
我以前使用 Live Server 都是 <ruby style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;">n p m<rt style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word;">Node 包管理器</rt></ruby> 下載的，而且使用的時候需要在控制臺手動敲啟動代碼。還好 VSCode 有了相應(yīng)的插件，現(xiàn)在只需要鼠標(biāo)點(diǎn)幾下就行了。
這個插件基本功能是預(yù)覽網(wǎng)頁，但它的特點(diǎn)是：會將網(wǎng)頁在本地服務(wù)器上預(yù)覽，最重要的是代碼保存之后，瀏覽器自動刷新，有多方便不用我說了吧？
使用方法：
-
在 HTML 文件上右鍵
在這里插入圖片描述 -
打開 HTML 文件，點(diǎn)擊編輯器右下角 Go Live 按鈕
在這里插入圖片描述
10、Prettier
大名鼎鼎的 格式化插件。有的人可能會推薦 Beautify。我原來也是一直用這個，后來發(fā)現(xiàn)這個并不能格式化 React 的代碼。所以果斷換成 Prettier。
11、CSScomb
2019/5/23 更新
看名字應(yīng)該可以聯(lián)想到它的功能了吧？沒錯，正如其名，一把梳理 CSS 屬性順序的 “梳子”。CSS 屬性書寫順序非常重要，一個合格的前端er 一定會有他遵循的 CSS 書寫順序規(guī)則。至于 CSS 屬性書寫順序，這里我推薦騰訊 AollyTeam 團(tuán)隊的規(guī)范：http://alloyteam.github.io/CodeGuide/#css-declaration-order
下面簡單說下這個插件怎么用。按照插件的文檔說明：
在項目的根目錄下創(chuàng)建一個名為：.csscomb.json / csscomb.json / .csscomb.js / csscomb.js 的文件，然后添加一些配置項。也可以將配置項寫入項目的 package.json 文件中的 csscombConfig 字段。
至于添加的配置項，CSScomb 提供了示例配置文件：https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json
其中的 sort-order 就是 CSS 屬性書寫順序，可以按照自己遵循的規(guī)范設(shè)置，所以我直接替換成了騰訊的。
這個配置文件里面各個字段的作用可以戳這里查看：https://github.com/csscomb/csscomb.js/blob/master/doc/options.md
放一個效果圖：
下面的
content屬性放在第一個是我的個人習(xí)慣，其他的順序都和 AollyTeam 的規(guī)范保持一致。
強(qiáng)迫癌看后表示很舒服！
12、carbon-now-sh
將代碼分享為圖片（圖片的格式可以為 png 和 svg），最最最重要的是： 圖片逼格敲高 ↓↓↓
之所以將代碼分享為圖片，是因為如果直接分享代碼，在有些地方代碼格式可能會亂。
比如：你在評論區(qū)和別人交流代碼，結(jié)果那個評論區(qū)做的很垃圾，粘貼上去的代碼格式會很亂，有的代碼甚至被解析了？所以是不是有必要將代碼分享為圖片呢？
13、CodeIf
CodeIf 是一個用來給變量命名的網(wǎng)站，你只要輸入你想起的中文名，它就會給你提供很多建議的命名：
可能很多人知道有 CodeIf 這么個網(wǎng)站，其實 VS Code 上有插件哦，是不是很神奇 : )
沖這個網(wǎng)站的逼格，必須安排！
14、Turbo Console Log
快捷添加 console.log，一鍵 注釋 / 啟用 / 刪除 所有 console.log。
簡直好用到犯規(guī)！
簡單說下這個插件要用到的快捷鍵:
ctrl + alt + l 選中變量之后，使用這個快捷鍵生成 console.log
alt + shift + c 注釋所有 console.log
alt + shift + u 啟用所有 console.log
alt + shift + d 刪除所有 console.log
15、GitLens
詳細(xì)的 Git 提交日志。
Git 重度使用者必備，尤其是多人協(xié)作時：哪一行代碼，何時、何人提交都有記錄。
媽媽再也不用擔(dān)心我背鍋了！
16、LeetCode
2019 / 4 / 24 更新。今天婦聯(lián)4首映，沒有去看，還被劇透，很難受。
看到這個名字是不是很熟悉？？？沒錯，它就是有名的刷題網(wǎng)站 LeetCode 啦。今天我是才知道 VS Code 中有插件，果斷入手 (??????)??
使用很簡單輸入用戶名和密碼就行了，看圖：
是不是想著自己刷完 LeetCode，拿到大廠 offer 的樣子已經(jīng)激動地搓手手了呢 ？那就趕緊入手吧！
17、Regex Previewer
實時預(yù)覽正則表達(dá)式的效果。
18、css-auto-prefix
自動添加 CSS 私有前綴。
19、change-case
轉(zhuǎn)換命名風(fēng)格。
20、CSS Peek
定位 CSS 類名。
21、vscode-json
處理 JSON 文件，用法看圖：
22、HTML Boilerplate
雖然 VSCode 已經(jīng)內(nèi)置了一鍵生成 HTML 模板的快捷方式，但這個有另外的用處，看圖：
23、Settings Sync
在不同電腦間同步你的插件。
安裝了這么多插件，換了臺電腦又得重新安裝，所以，這個插件不考慮入手嗎？
這里簡述下這個插件怎么用:
- 首先要想在不同的設(shè)備間同步你的插件, 需要用到
Token和Gist id -
Token就是你把插件上傳到 github 上時, 讓你保存的那段字符，Gist id在你上傳插件的那臺電腦上保存著。
ps: 如果你沒有保存Token，也不知道Gist id，不要慌, 可以這樣獲取:
在你上傳 Sync 設(shè)置的 VSCode 里，按 F1, 然后輸入 Sync，選擇 Sync: 高級選項:
然后選擇:
這樣就會進(jìn)入一個壓縮的文件，然后鼠標(biāo)右鍵整理一下文檔格式如下:
這樣就能看見你的 Token 了。
接下來就是獲取你的 Gist id:
在 VSCode 里，依次打開: 文件 -> 首選項 -> 設(shè)置，然后輸入 Sync 進(jìn)行搜索:
這樣就獲取到你的 Gist id。
知道了 Token 和 Gist id，就能在不同設(shè)備間同步你的 VSCode 插件。
(當(dāng)然，你也可以把 Token 和 Gist id 分享給別人，這樣別人就能一鍵下載你用的 VSCode 插件!)
彩蛋2：
我的Token和Gist id分別是：
Token:
4f5135c3c9e7275950f58133bc4b5f75461ceef3
Gist id:
ce3ff9d53df48d738f1e9e86fff55a8c里面有我用的所有 VSCode 插件 : )
其他插件推薦
24、ES7 React/Redux/GraphQL/React-Native snippets
React/Redux/GraphQL/React-Native 代碼快捷生成。
25、Minify
壓縮 HTML、CSS、JS 代碼。
26、:emojisense:
快速挑選 Markdown 中的 Emoji。
當(dāng)然不想下載這個插件，可以去這個網(wǎng)站找你想用的 Markdown Emoji 代碼：Emoji cheat sheet for Github
也可以下載瀏覽器插件，去尋找你想要的 Markdown Emoji代碼 (這里我用的火狐瀏覽器)：
當(dāng)然，還有一個網(wǎng)站: Emoji Homepage，可以直接復(fù)制粘貼 Emoji，但是相應(yīng)的 Markdown Emoji 代碼，需要自己轉(zhuǎn)換一下，比如這個表情:
鼠標(biāo)經(jīng)過顯示 See No Evil 那么他的 Markdown Emoji 代碼就是 :see_no_evil:(全部小寫， 空格用下劃線代替)
27、TODO Highlight
高亮 TODO，F(xiàn)IXME、還可以自己配置要高亮的關(guān)鍵字。
我猜小伙伴們在跑代碼時一定和我一樣，經(jīng)常打一些 TODO 標(biāo)記吧？
所以，這個插件很適合你！
28、Icon Fonts
添加字體圖標(biāo)。
29、SVG Viewer
預(yù)覽 SVG。
30、px to rem
像素轉(zhuǎn) rem。
