超實用VS Code插件推薦

文中有彩蛋，歡迎探索並食用 : )

這些插件按照 我平時使用的頻率排序（從前往後成遞增關係）

目前更新到了 30 個插件

感謝評論區小夥伴花時間提出的名稱問題。爲了防止歧義，文中提到的插件名稱和在 VS Code 中搜索到的保持一致（大小寫，連字符等）

下面進入正題：

基礎必備插件

1、View In Browser

在瀏覽器裏預覽網頁必備。

2、vscode-icons

改變編輯器裏面的文件圖標，個人比較稀飯這個。其他的這裏就不說了。

3、Bracket Pair Colorizer

給嵌套的各種括號加上不同的顏色。

4、Highlight Matching Tag

高亮對應的 HTML 標籤和標識出對應的各種括號的功能。

5、Auto Rename Tag

自動修改匹配的 HTML 標籤。

6、Path Intellisense

智能路徑提示，可以在你輸入文件路徑時智能提示。

7、Markdown Preview

實時預覽 markdown。

8、stylelint

CSS / SCSS / Less 語法檢查

進價必備插件

9、Live Server

彩蛋1：
下面的小字註解： n p m(Node 包管理器)
是這樣寫出來的：<ruby>n p m<rp>(</rp><rt>Node 包管理器</rt><rp>)</rp></ruby>
一個不錯的 Markdown 書寫技巧是吧？提升閱讀體驗，真是太刺激了 : )

我以前使用 Live Server 都是 n p m(Node 包管理器) 下載的，而且使用的時候需要在控制檯手動敲啓動代碼。還好 VSCode 有了相應的插件，現在只需要鼠標點幾下就行了。

這個插件基本功能是預覽網頁，但它的特點是：會將網頁在本地服務器上預覽，最重要的是代碼保存之後，瀏覽器自動刷新，有多方便不用我說了吧？

使用方法：

在 HTML 文件上右鍵
打開 HTML 文件，點擊編輯器右下角 Go Live 按鈕

10、Prettier

大名鼎鼎的 格式化插件。有的人可能會推薦 Beautify。我原來也是一直用這個，後來發現這個並不能格式化 React 的代碼。所以果斷換成 Prettier。

11、CSScomb

2019/5/23 更新

看名字應該可以聯想到它的功能了吧？沒錯，正如其名，一把梳理 CSS 屬性順序的 “梳子”。CSS 屬性書寫順序非常重要，一個合格的前端er 一定會有他遵循的 CSS 書寫順序規則。至於 CSS 屬性書寫順序，這裏我推薦騰訊 AollyTeam 團隊的規範：http://alloyteam.github.io/CodeGuide/#css-declaration-order

下面簡單說下這個插件怎麼用。按照插件的文檔說明：

在項目的根目錄下創建一個名爲：.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 屬性書寫順序，可以按照自己遵循的規範設置，所以我直接替換成了騰訊的。

這個配置文件裏面各個字段的作用可以戳這裏查看：https://github.com/csscomb/csscomb.js/blob/master/doc/options.md

放一個效果圖：

下面的 content 屬性放在第一個是我的個人習慣，其他的順序都和 AollyTeam 的規範保持一致。

強迫癌看後表示很舒服！

12、carbon-now-sh

將代碼分享爲圖片（圖片的格式可以爲 png 和 svg），最最最重要的是： 圖片逼格敲高 ↓↓↓

之所以將代碼分享爲圖片，是因爲如果直接分享代碼，在有些地方代碼格式可能會亂。
比如：你在評論區和別人交流代碼，結果那個評論區做的很垃圾，粘貼上去的代碼格式會很亂，有的代碼甚至被解析了？所以是不是有必要將代碼分享爲圖片呢？

13、CodeIf

CodeIf 是一個用來給變量命名的網站，你只要輸入你想起的中文名，它就會給你提供很多建議的命名：

可能很多人知道有 CodeIf 這麼個網站，其實 VS Code 上有插件哦，是不是很神奇 : )

衝這個網站的逼格，必須安排！

14、Turbo Console Log

快捷添加 console.log，一鍵註釋 / 啓用 / 刪除所有 console.log。

簡直好用到犯規！

簡單說下這個插件要用到的快捷鍵:

ctrl + alt + l 選中變量之後，使用這個快捷鍵生成 console.log
alt + shift + c 註釋所有 console.log
alt + shift + u 啓用所有 console.log
alt + shift + d 刪除所有 console.log

15、GitLens

詳細的 Git 提交日誌。
Git 重度使用者必備，尤其是多人協作時：哪一行代碼，何時、何人提交都有記錄。

媽媽再也不用擔心我背鍋了！

16、LeetCode

2019 / 4 / 24 更新。今天婦聯4首映，沒有去看，還被劇透，很難受。

看到這個名字是不是很熟悉？？？沒錯，它就是有名的刷題網站 LeetCode 啦。今天我是才知道 VS Code 中有插件，果斷入手 (๑•̀ㅂ•́)و✧

使用很簡單輸入用戶名和密碼就行了，看圖：

是不是想着自己刷完 LeetCode，拿到大廠 offer 的樣子已經激動地搓手手了呢？那就趕緊入手吧！

17、Regex Previewer

實時預覽正則表達式的效果。

18、css-auto-prefix

自動添加 CSS 私有前綴。

19、change-case

轉換命名風格。

10、CSS Peek

定位 CSS 類名。

21、vscode-json

處理 JSON 文件，用法看圖：

22、HTML Boilerplate

雖然 VSCode 已經內置了一鍵生成 HTML 模板的快捷方式，但這個有另外的用處，看圖：

23、Settings Sync

在不同電腦間同步你的插件。

安裝了這麼多插件，換了臺電腦又得重新安裝，所以，這個插件不考慮入手嗎？

這裏簡述下這個插件怎麼用:

首先要想在不同的設備間同步你的插件, 需要用到 Token 和Gist id
Token 就是你把插件上傳到 github 上時, 讓你保存的那段字符，Gist id 在你上傳插件的那臺電腦上保存着。

ps: 如果你沒有保存Token，也不知道Gist id，不要慌, 可以這樣獲取:
在你上傳 Sync 設置的 VSCode 裏，按 F1, 然後輸入 Sync，選擇 Sync: 高級選項:

然後選擇:

這樣就會進入一個壓縮的文件，然後鼠標右鍵整理一下文檔格式如下:

這樣就能看見你的 Token 了。

接下來就是獲取你的 Gist id:
在 VSCode 裏，依次打開: 文件 -> 首選項 -> 設置，然後輸入 Sync 進行搜索:

這樣就獲取到你的 Gist id。

知道了 Token 和 Gist id，就能在不同設備間同步你的 VSCode 插件。

(當然，你也可以把 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。

當然不想下載這個插件，可以去這個網站找你想用的 Markdown Emoji 代碼：Emoji cheat sheet for Github

也可以下載瀏覽器插件，去尋找你想要的 Markdown Emoji代碼 (這裏我用的火狐瀏覽器)：

當然，還有一個網站: Emoji Homepage，可以直接複製粘貼 Emoji，但是相應的 Markdown Emoji 代碼，需要自己轉換一下，比如這個表情:

鼠標經過顯示 See No Evil 那麼他的 Markdown Emoji 代碼就是 :see_no_evil:(全部小寫，空格用下劃線代替)