基礎(chǔ)必備插件
在瀏覽器里預(yù)覽網(wǎng)頁必備。
改變編輯器里面的文件圖標(biāo)琉用，個(gè)人比較稀飯這個(gè)。其他的這里就不說了策幼。
給嵌套的各種括號加上不同的顏色。
高亮對應(yīng)的 HTML 標(biāo)簽?以及?標(biāo)識(shí)出對應(yīng)的各種括號晶丘。
自動(dòng)修改匹配的 HTML 標(biāo)簽到逊。
智能路徑提示，可以在你輸入文件路徑時(shí)智能提示觉壶。
實(shí)時(shí)預(yù)覽 markdown。
CSS / SCSS / Less 語法檢查
9叔遂、Live Server
彩蛋1：
下面的小字注解： npmNode 包管理器
是這樣寫出來的：<ruby>n p m<rp>(</rp><rt>Node 包管理器</rt><rp>)</rp></ruby>
一個(gè)不錯(cuò)的 Markdown 書寫技巧是吧？提升閱讀體驗(yàn)争剿，真是太刺激了 : )
我以前使用 Live Server 都是 n p mNode 包管理器 下載的已艰，而且使用的時(shí)候需要在控制臺(tái)手動(dòng)敲啟動(dòng)代碼。還好 VSCode 有了相應(yīng)的插件蚕苇，現(xiàn)在只需要鼠標(biāo)點(diǎn)幾下就行了哩掺。
這個(gè)插件基本功能是預(yù)覽網(wǎng)頁，但它的特點(diǎn)是：會(huì)將網(wǎng)頁在本地服務(wù)器上預(yù)覽涩笤，最重要的是代碼保存之后嚼吞，瀏覽器自動(dòng)刷新盒件，有多方便不用我說了吧？
使用方法：
在 HTML 文件上右鍵
打開 HTML 文件舱禽，點(diǎn)擊編輯器右下角 Go Live 按鈕
10炒刁、Prettier
格式化插件。有的人可能會(huì)推薦 Beautify誊稚。我原來也是一直用這個(gè)翔始，后來發(fā)現(xiàn)這個(gè)并不能格式化 React 的代碼。所以果斷換成 Prettier里伯。
將代碼分享為圖片（圖片的格式可以為 png 和 svg），最最最重要的是：?圖片逼格敲高 ↓↓↓
之所以將代碼分享為圖片俏脊，是因?yàn)槿绻苯臃窒泶a全谤，在有些地方代碼格式可能會(huì)亂肤晓。
比如：你在評論區(qū)和別人交流代碼爷贫，結(jié)果那個(gè)評論區(qū)做的很垃圾，粘貼上去的代碼格式會(huì)很亂补憾，有的代碼甚至被解析了漫萄？所以是不是有必要將代碼分享為圖片呢？
12盈匾、Codelf
Codelf?是一個(gè)用來給變量命名的網(wǎng)站腾务，你只要輸入你想起的中文名，它就會(huì)給你提供很多建議的命名：
可能很多人知道有?Codeif?這么個(gè)網(wǎng)站削饵，其實(shí) VSCode 上有插件哦岩瘦，是不是很神奇?: )
沖這個(gè)網(wǎng)站的逼格，必須安排窿撬！
13启昧、Turbo Console Log
快捷添加 console.log，一鍵 注釋 / 啟用 / 刪除 所有 console.log劈伴。
簡直好用到犯規(guī)密末！
簡單說下這個(gè)插件要用到的快捷鍵:
ctrl + alt + l 選中變量之后，使用這個(gè)快捷鍵生成 console.log
alt + shift + c 注釋所有 console.log
alt + shift + u 啟用所有 console.log
alt + shift + d 刪除所有 console.log
14跛璧、GitLens
詳細(xì)的 Git 提交日志严里。
Git 重度使用者必備，尤其是多人協(xié)作時(shí)：哪一行代碼追城，何時(shí)刹碾、何人提交都有記錄。
媽媽再也不用擔(dān)心我背鍋了！
實(shí)時(shí)預(yù)覽正則表達(dá)式的效果。
自動(dòng)添加 CSS 私有前綴瞬矩。
轉(zhuǎn)換命名風(fēng)格。
定位 CSS 類名涵叮。
19、vscode-json
處理 JSON 文件伞插，用法看圖：
20割粮、HTML Boilerplate
雖然 VSCode 已經(jīng)內(nèi)置了一鍵生成 HTML 模板的快捷方式，但這個(gè)有另外的用處媚污，看圖：
21舀瓢、settings sync
在不同電腦間同步你的插件。
安裝了這么多插件耗美，換了臺(tái)電腦又得重新安裝京髓，所以，這個(gè)插件不考慮入手嗎商架？
這里簡述下這個(gè)插件怎么用:
首先要想在不同的設(shè)備間同步你的插件, 需要用到?Token?和Gist id
Token?就是你把插件上傳到 github 上時(shí), 讓你保存的那段字符堰怨，Gist id?在你上傳插件的那臺(tái)電腦上保存著。
ps: 如果你沒有保存Token蛇摸，也不知道Gist id备图，不要慌, 可以這樣獲取:
在你上傳 Sync 設(shè)置的 VSCode 里，按 F1, 然后輸入 Sync赶袄，選擇?Sync: 高級選項(xiàng):
然后選擇:
這樣就會(huì)進(jìn)入一個(gè)壓縮的文件揽涮，然后鼠標(biāo)右鍵整理一下文檔格式如下:
這樣就能看見你的?Token?了。
接下來就是獲取你的?Gist id:
在 VSCode 里饿肺，依次打開: 文件 -> 首選項(xiàng) -> 設(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 插件 : )
其他插件推薦
22汰聋、React/Redux/react-router Snippets
React 代碼快捷生成。
23喊积、Minify
壓縮 HTML烹困、CSS、JS 代碼乾吻。
快速挑選 Markdown 中的 Emoji拟蜻。
當(dāng)然不想下載這個(gè)插件，可以去這個(gè)網(wǎng)站找你想用的?Markdown Emoji?代碼：Emoji cheat sheet for Github
也可以下載瀏覽器插件枯饿，去尋找你想要的?Markdown Emoji代碼 (這里我用的火狐瀏覽器)：
當(dāng)然酝锅，還有一個(gè)網(wǎng)站:?Emoji Homepage，可以直接復(fù)制粘貼 Emoji奢方，但是相應(yīng)的?Markdown Emoji?代碼搔扁，需要自己轉(zhuǎn)換一下，比如這個(gè)表情:
鼠標(biāo)經(jīng)過顯示 See No Evil 那么他的 Markdown Emoji 代碼就是 :see_no_evil:(全部小寫蟋字， 空格用下劃線代替)
25稿蹲、TODO Highlight
高亮 TODO，F(xiàn)IXME鹊奖、還可以自己配置要高亮的關(guān)鍵字苛聘。
我猜小伙伴們在跑代碼時(shí)一定和我一樣，經(jīng)常打一些 TODO 標(biāo)記吧忠聚？
所以设哗，這個(gè)插件很適合你！
26咒林、Icon Fonts
添加字體圖標(biāo)熬拒。
27爷光、SVG View
預(yù)覽 SVG垫竞。
28、px to rem
像素轉(zhuǎn) rem蛀序。
29欢瞪、ny-rule?正則插件?
使用
方式1:
按F1(mac下fn+F1)打開正則列表.
輸入關(guān)鍵詞搜索, 比如"手機(jī)".
方式2:
右鍵選擇"??正則大全".
方式3:
在代碼任意位置輸入"@zz".
