vscode常用插件

0. IntelliJ IDEA Keybindings

1. Chinese: 使vscode顯示為中文

2. Settings Sync：

   同步vscode設置和插件的插件，安裝好后重新加載激活，僅需登錄GitHub選擇gist即可使用Alt+Shift+D下載，Alt+Shift+U上傳。

   在不同電腦間同步你的插件。最好用的插件，沒有之一，一台電腦配置好之后，其它的幾台電腦都不用配置。新機器登錄一下就搞定了。再也不用折騰環境了，

   使用GitHub Gist同步多台計算機上的設置，代碼段，主題，文件圖標，啟動，鍵綁定，工作區和擴展。

   

   這里簡述下這個插件怎么用:

   首先要想在不同的設備間同步你的插件, 需要用到 Token 和Gist id

   Token 就是你把插件上傳到 github 上時, 讓你保存的那段字符，Gist id 在你上傳插件的那台電腦上保存着。

   ps: 如果你沒有保存Token，也不知道Gist id，不要慌, 可以這樣獲取:

   1.生成token：登陸你的github，settings --> Developer settings --> Personal access tokens --> Generate new token
   填寫 note 選擇 gist Create gists 選項 點擊生成按鈕 記錄token

   2.生成gist：個人中心 --> your dists -> 創建gists--> 在地址欄最后一串字符就是Gists ID

   3.在Setting Sync歡迎界面中，配置vscode中的Setting Sync,輸出token和gists確定
   

4.上傳、下載vscode中的配置信息

CTRL+SHIFT+P調起vscode的配置項 輸出 sync 選擇上傳或下載操作

5.token和gistid 保存位置：

快捷鍵shift+ctrl+p,選擇sync:高級選項,sync:編輯擴展本地設置

進入syncLocalSettings.json文件,修改token值為上述token,保存。

file->prefrence->settings 搜索sync:gist,,將上述獲取的gistID填寫進去

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

(當然，你也可以把 Token 和 Gist id 分享給別人，這樣別人就能一鍵下載你用的 VSCode 插件!)

3. Path Autocomplete: 文件路徑自動補全

4. windows opacity

   設置vscode透明背景

5. vscode-icons

   改變編輯器里面的文件圖標

6. carbon-now-sh

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

   安裝好插件以后，在VSCode中選中要生成的代碼，然后按Alt+Cmd+A或者(Alt+Windows+A on Windows)，就會跳到瀏覽器生成頁面！！！

   

7. Bracket Pair Colorizer

   讓括號擁有獨立的顏色，易於區分。可以配合任意主題使用。

   Bracket Pair Colorizer這款插件可以給()、[]、{}這些常用括號顯示不同顏色，當點擊對應括號時能夠用線段直接鏈接到一起，讓層次結構一目了然。除此之外，它還支持用戶自定義符號。

8.Partial Diff

對比兩段代碼或文件，文件比較是一種即常用有實用的一項功能，例如，我們想查看哪里修改了代碼、查看輸出的日志信息有什么區別等等，如果用肉眼逐個詞的去分辨，顯然是無法承受的。

9. TODO Tree

   習慣使用TODO、FIXME標簽是一個非常好的習慣。

   當我們發現某塊代碼需要修改，或者某塊代碼需要以后進一步完善，如果能夠給它做一個標記，那么后續定位到對應位置是一件非常輕松高效的事情。

   關於TODO標簽，很多作者都推薦過TODO Highlight這款插件，但是，我更加推薦使用TODO Tree。

​ 雖然很多標簽工具能夠實現TODO標簽高亮，但問題是“我們怎么快速定位到對應的標簽？”逐個的打開文件去尋找顯然是很麻煩的，效率並沒有得到太大的提升。

​ TODO Tree則不同，它不僅可以實現標簽高亮，還可以在活動欄添加一個選項卡，它能夠以不同視圖展示我們標記的位置，單擊對應標簽就能夠快速定位到指定位置。

10. KoroFileHeader

    1.安裝插件KoroFileHeader

    2.在首選項中找到設置
    文件 -> 首選項 -> 設置 -> 輸入fileheader

    在第二個函數設置 - 在點擊settings.json 之后會跳轉 settings.json 
    並自動生成 “fileheader.cursorMode” - 直接在 “fileheader.cursorMode” 內部自定義注釋模板即可
    
    
    Fileheader: Custom Made  文件頭部注釋
    
    ```
      "fileheader.customMade": {
    
          "Descripttion":"",
          "version":"",
          "Author":"caibaotimes",
          "Date":"Do not edit",
          "LastEditTime":"Do not Edit"
      }
    ```
    

    3.使用注釋

    文件頭部注釋：
    快捷鍵：crtl+alt+i（window）,ctrl+cmd+t (mac)

    • 函數注釋
      快捷鍵：ctrl+alt+t (window), ctrl+alt+t(mac)
    • 在首選項-》鍵盤快捷方式-》中找到fileheader快捷鍵，可以自己修改

11. Indent-Rainbow

    用四種不同顏色交替着色文本前面的縮進

12. GitLens

    先裝git，git日志查看插件，詳細的 Git 提交日志。

    GitLens 增強了 Visual Studio Code 中內置的 Git 功能。例如 commits 搜索，歷史記錄和和查看代碼作者身份，還能通過強大的比較命令獲得有價值的見解等等

13. Git History

    以圖表的形式查看 git 日志 右鍵就可以看到git:history 標簽

14. **File Peek **

    根據路徑字符串，快速定位到文件

15. any-rule 正則插件

    使用

    方式1:

    按F1(mac下fn+F1)打開正則列表.

    輸入關鍵詞搜索, 比如"手機".

    

    方式2:

    在代碼任意位置輸入"@zz".

    

16. better comments

    不同的注釋顯示不同的顏色，*，？，！起頭然后開始寫，你可以看到注釋的顏色是不同的

    通過使用警報、信息、待辦事項等注釋來改進代碼注釋！

    

17. code spell checker

    對基本關鍵字拼寫校驗

18. Project Manager

    它可以幫助您輕松訪問項目，無論它們位於何處。不要再錯過那些重要的項目了。您可以定義自己的收藏項目，或選擇自動檢測VSCode項目，Git，Mercurial和SVN存儲庫或任何文件夾。

    從版本8開始，您就有了專門的項目活動欄！

    以下是Project Manager提供的一些功能：

    • 將任何項目保存為收藏夾
    • 自動檢測VSCode，GIT中，水銀或SVN存放區
    • 在相同或新窗口中打開項目
    • 識別已刪除/重命名的項目
    • 一個狀態欄標識當前項目
    • 專門的活動欄

    這兩種方式對於需要經常切換項目時，比較耗時
    為解決這個問題，vscode提供了Project Manager插件管理，開發時常用的項目

    （1）command+ shift + p打開配置文件，
    輸入 Project Manager: Edit Projects

    [
    	{
    		"name": "nuxtest",
    		"rootPath": "e:\\nuxtest",
    		"paths": [],
    		"group": ""
    	},
    	{
    		"name": "vuetest",
    		"rootPath": "e:\\vuetest",
    		"paths": [],
    		"group": ""
    	}
    ]
    

    （2）在左側圖標欄下就會有個小文件夾的選項，點擊進去就可以切換項目了。

19. Better Align

    整潔的代碼，是一個優秀程序員必須要做到的。當我們閱讀那些大型公司開源的代碼時，會發現，它的設計模式、它的編程規范都讓人贊嘆不已。

    Better Align就是這樣一款能夠實現代碼規范的工具，它主要用於代碼的上下對齊。

    它能夠用冒號（：）、賦值（=，+=，-=，*=，/=）和箭頭（=>）對齊代碼。

​

**使用方法：Ctrl+Shift+p輸入“Align”確認即可。**

20. Markdown All in One

    Markdown對於開發者而言，應該是一種常用的文檔書寫方式，雖然我在獨立Markdown文檔書寫時習慣於使用Typora，但是對於開發過程中涉及到的API接口文檔、README，我還是習慣於使用VS Code。

    Markdown All in One這款插件可以實現媲美Typora的Markdown編輯體驗，它具備如下特性，

    • 豐富的快捷鍵
    • TOC標簽
    • 數學公式
    • 自動完成
    • 列表編輯
    • 輸出HTML同時轉PDF
    • Github風格文檔

    這款插件真正做到了All in One。

21. Emoji 在代碼中輸入emoj

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

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

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

22. Prettify

    JSON 格式化JSON

23. Path Intellisense

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

24. Auto Rename Tag

    自動修改匹配的 HTML 標簽。

25. Highlight Matching Tag

    高亮對應的 HTML 標簽 以及 標識出對應的各種括號。

26. CSS Peek

    定位 CSS 類名。使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼

27. css-auto-prefix

    自動添加 CSS 私有前綴。

28. 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

29. VS code 主題集合

    • Night Owl

      一個非常適合夜貓子的 VS Code 主題。像是為喜歡深夜編碼的人精心設計的。

    • Dracula Official

      官方吸血鬼主題，博主用的就是這款，很漂亮

30. VUE插件

　　vetur 　　 語法高亮、智能感知、Emmet等

　　VueHelper 　　snippet代碼片段

31. React/Redux/react-router Snippets

    React 代碼快捷生成。

    

32. Node.js Modules Intellisense

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

33. Codelf

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

34. Minify

    壓縮 HTML、CSS、JS 代碼。

35. vscode-faker

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