VScode插件
VS Code 插件 Git lens
光標在的那一行后面有灰色顯示 最后修改人和時間
VS Code 常用插件
原文鏈接：https://www.cnblogs.com/joe235/p/13267973.html
拓展鏈接：https://www.jianshu.com/p/3eebde5748a6
1、View In Browser
在瀏覽器里預覽網頁必備。
2、vscode-icons
改變編輯器里面的文件圖標，個人比較稀飯這個。其他的這里就不說了。
image
3、Bracket Pair Colorizer
給嵌套的各種括號加上不同的顏色。
image
4、Highlight Matching Tag
高亮對應的 HTML 標簽 以及 標識出對應的各種括號。
image
5、Auto Rename Tag
自動修改匹配的 HTML 標簽。
image
6、Path Intellisense
智能路徑提示，可以在你輸入文件路徑時智能提示。
image
7、Markdown Preview
實時預覽 markdown。
8、stylelint
CSS / SCSS / Less 語法檢查
image
進價必備插件
9、Live Server
彩蛋1：
下面的小字注解： n p mNode 包管理器
是這樣寫出來的：n p m(Node 包管理器)
一個不錯的 Markdown 書寫技巧是吧？提升閱讀體驗，真是太刺激了 : )
我以前使用 Live Server 都是 n p mNode 包管理器 下載的，而且使用的時候需要在控制臺手動敲啟動代碼。還好 VSCode 有了相應的插件，現在只需要鼠標點幾下就行了。
這個插件基本功能是預覽網頁，但它的特點是：會將網頁在本地服務器上預覽，最重要的是代碼保存之后，瀏覽器自動刷新，有多方便不用我說了吧？
使用方法：
image
在 HTML 文件上右鍵
打開 HTML 文件，點擊編輯器右下角 Go Live 按鈕
image
10、Prettier
格式化插件。有的人可能會推薦 Beautify。我原來也是一直用這個，后來發現這個并不能格式化 React 的代碼。所以果斷換成 Prettier。
11、carbon-now-sh
將代碼分享為圖片（圖片的格式可以為 png 和 svg），最最最重要的是： 圖片逼格敲高 ↓↓↓
之所以將代碼分享為圖片，是因為如果直接分享代碼，在有些地方代碼格式可能會亂。
比如：你在評論區和別人交流代碼，結果那個評論區做的很垃圾，粘貼上去的代碼格式會很亂，有的代碼甚至被解析了？所以是不是有必要將代碼分享為圖片呢？
image
12、Codelf
Codelf 是一個用來給變量命名的網站，你只要輸入你想起的中文名，它就會給你提供很多建議的命名：
image
可能很多人知道有 Codeif 這么個網站，其實 VSCode 上有插件哦，是不是很神奇 : )
image
沖這個網站的逼格，必須安排！
13、Turbo Console Log
快捷添加 console.log，一鍵 注釋 / 啟用 / 刪除 所有 console.log。
簡直好用到犯規！
image
簡單說下這個插件要用到的快捷鍵:
ctrl + alt + l 選中變量之后，使用這個快捷鍵生成 console.log
alt + shift + c 注釋所有 console.log
alt + shift + u 啟用所有 console.log
alt + shift + d 刪除所有 console.log
14、GitLens
詳細的 Git 提交日志。
Git 重度使用者必備，尤其是多人協作時：哪一行代碼，何時、何人提交都有記錄。
image
媽媽再也不用擔心我背鍋了！
15、Regex Previewer
實時預覽正則表達式的效果。
image
16、css-auto-prefix
自動添加 CSS 私有前綴。
image
17、Change Case
轉換命名風格。
image
18、CSS Peek
定位 CSS 類名。
image
19、vscode-json
處理 JSON 文件，用法看圖：
image
20、HTML Boilerplate
雖然 VSCode 已經內置了一鍵生成 HTML 模板的快捷方式，但這個有另外的用處，看圖：
image
21、settings sync
在不同電腦間同步你的插件。
安裝了這么多插件，換了臺電腦又得重新安裝，所以，這個插件不考慮入手嗎？
image
這里簡述下這個插件怎么用:
首先要想在不同的設備間同步你的插件, 需要用到 Token 和Gist id
Token 就是你把插件上傳到 github 上時, 讓你保存的那段字符，Gist id 在你上傳插件的那臺電腦上保存著。
ps: 如果你沒有保存Token，也不知道Gist id，不要慌, 可以這樣獲取:
在你上傳 Sync 設置的 VSCode 里，按 F1, 然后輸入 Sync，選擇 Sync: 高級選項:
image
然后選擇:
image
這樣就會進入一個壓縮的文件，然后鼠標右鍵整理一下文檔格式如下:
image
這樣就能看見你的 Token 了。
接下來就是獲取你的 Gist id:
在 VSCode 里，依次打開: 文件 -> 首選項 -> 設置，然后輸入 Sync 進行搜索:
image
這樣就獲取到你的 Gist id。
知道了 Token 和 Gist id，就能在不同設備間同步你的 VSCode 插件。
(當然，你也可以把 Token 和 Gist id 分享給別人，這樣別人就能一鍵下載你用的 VSCode 插件!)
彩蛋2：
我的 Token 和 Gist id 分別是：
Token:
4f5135c3c9e7275950f58133bc4b5f75461ceef3
Gist id:
ce3ff9d53df48d738f1e9e86fff55a8c
里面有我用的所有 VSCode 插件 : )
其他插件推薦
22、React/Redux/react-router Snippets
React 代碼快捷生成。
image
23、Minify
壓縮 HTML、CSS、JS 代碼。
image
24、:emojisense:
快速挑選 Markdown 中的 Emoji。
image
當然不想下載這個插件，可以去這個網站找你想用的 Markdown Emoji 代碼：Emoji cheat sheet for Github
也可以下載瀏覽器插件，去尋找你想要的 Markdown Emoji代碼 (這里我用的火狐瀏覽器)：
image
image
當然，還有一個網站: Emoji Homepage，可以直接復制粘貼 Emoji，但是相應的 Markdown Emoji 代碼，需要自己轉換一下，比如這個表情:
image
鼠標經過顯示 See No Evil 那么他的 Markdown Emoji 代碼就是 🙈(全部小寫， 空格用下劃線代替)
25、TODO Highlight
高亮 TODO，FIXME、還可以自己配置要高亮的關鍵字。
我猜小伙伴們在跑代碼時一定和我一樣，經常打一些 TODO 標記吧？
所以，這個插件很適合你！
image
26、Icon Fonts
添加字體圖標。
image
27、SVG View
預覽 SVG。
image
28、px to rem
像素轉 rem。
29、code spell checker
對基本關鍵字拼寫校驗：
總結
- 上一篇： AutoHotKey程序防止反编译的简单
- 下一篇： 从零开始，做一个NodeJS博客（四）：