vscode 經常使用插件

1. Search node_modules

用於搜索node_modules下的文件

2. CodeMetrics

Computes complexity in TypeScript / JavaScript files.
It looks like this

3. Code Runner

右鍵 run code 直接在vscode裏運行當前文件的代碼。支持多種語言。
Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, C# Script, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, and custom command

4. Relative Path Refactor

重構文件相關的引用路徑，當你把文件刪除了或者文件路徑移動了，其餘引用該文件的路徑會自動重構。
重構時，修復相對路徑錯誤。 自動查找和修復文件夾中全部文件的全部相對路徑。 修復後，查看更改！

5. Paste and Indent

格式化粘貼

This extension adds limited support for pasting and indenting code. Much like SublimeText's paste_and_indent.

6. Evermonkey

主要特徵：
☞ 它是 EditorConfig 面向 Visual Studio 官方發佈的擴展
☞ 能夠用來定義縮進，製表符以及行開始和結束位置的樣式
☞ 擁有能夠用來讀取和遵循已經定義好了的樣式規則的文本編輯器插件
☞ 使用了 editorconfig npm 軟件包

![](http://upload-images.jianshu.io/upload_images/910389-a4303b34166611c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Evernote 是最受歡迎的筆記應用程序之一。它能夠用於經過 Evermonkey 擴展來提升編碼的質量和效率。這個方便的 Visual Studio Code 擴展能讓 Evernote 支持 Markdown，與 Sublime Text 遵循相同的原則，但擁有更快速的體驗。

7. IntelliSense for CSS class names

它跟 CSS 同樣使人折服, 很難去記憶全部的CSS類。這個擴展能夠根據工做區中的 CSS 文件自動補全你輸入的 CSS 類名。

8. Bracket Pair Colorizer

Bracket Pair Colorizer 是一個括弧着色器，若是不一樣的括弧會讓你感到一團亂麻，這個 Visual Studio Code 擴展就能幫助你使用代碼着色選項來匹配它們。你能夠定義那些字符匹配指定的顏色。

9. TextTransform

設置字母大小寫轉換

{
        "key": "ctrl+k ctrl+u",
        "command": "uppercase",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+l",
        "command": "lowercase",
        "when": "editorTextFocus"
    }

VSCode快捷鍵大全

10. Power Mode

activate-power-mode 在其它編輯器裏很流行，有很酷的代碼編寫效果，那麼vscode的你也能夠嘗試這種極致體驗：
[圖片上傳失敗...(image-f8b3e5-1531365416804)]

11. Prettier - JavaScript formatter

VS Code package to format your Javascript / Typescript / CSS
我找他是用來格式化tsx文件的，vscode自帶的格式化能夠知足其餘文件格式化的須要，看個對比圖，
自帶的格式化tsx:

Prettier - JavaScript formatter格式化後的，

VS Code 折騰記 - (9) 新一輪前端插件(代碼質量|正則|版本控制|NG|Vue|React)
Visual Studio Code 必備插件，主題及語法提示

12. Copy Relative Path

在進行git操做的時候每每須要文件相對根目錄的路徑
vscode有自帶的copy path 可是copy出來的是D:demorebaseDemojin.txt
而後報錯

咱們就須要手動去改成D:/demo/rebaseDemo/jin.txt，這樣很麻煩,有了Copy Relative Path就方便多了，直接拿到根目錄的相對路徑src/meta.html
可是在當前workspace有多個項目，Copy Relative Path就會帶上項目的路徑

13. styled-jsx

css in js 的插件，官方說明須要兩個插件配合使用

Syntax Highlighting Visual Studio Code Extension

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install vscode-styled-jsx

[](https://github.com/zeit/style... Visual Studio Code Extension

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install vscode-styled-jsx-languageserver

next.js 推薦使用的css寫法就是styled-jsx，可是這個插件有個bug:Request textDocument/completion failed with message: Cannot read property 'kind' of undefined #2

<style jsx>
            {`
              .app-container {
                background-color: #fff;
                max-width: 640px;
                margin: auto;
                padding: 20px;
              }
            `}
          </style>

括號寫在style 標籤下面，沒有語法提示，下面這麼寫就是好的：

<style jsx>{`
   .app-container {
       background-color: #fff;
       max-width: 640px;
       margin: auto;
       padding: 20px;
    }
`}</style>

14. Paste Image

Paste image directly from clipboard to markdown/asciidoc(or other file)!
Support Mac/Windows/Linux! And support config destination folder.

用qq截圖或者複製頁面上的圖片，而後Ctrl+Alt+V就能夠輕鬆的複製圖片到markdown，這裏咱們能夠配置圖片的目錄， "pasteImage.path": "${projectRoot}/screenshot",這樣全部的markdown的圖片都會被保存到項目根目錄的screenshot目錄下

而後push到遠端git倉庫也是能夠完美呈現的

15. View Node Package

在當前文件右鍵選擇View Node Package Source,而後頭部就會顯示你當前文件依賴的第三方庫，

而後選中一個文件名，就會在瀏覽器中打開該庫的倉庫，就很容易看源碼，而不用在瀏覽器裏去搜索

16. Remove Comments

一鍵刪除當前文件的註釋，支持40多種語言

17. htmltagwrap

給代碼外面添加HTML標籤

vscode自帶的emmet有wrap功能，可是須要在vscode裏面設置快捷鍵，默認沒有快捷鍵

18. Vue CSS Peek

爲單頁面的 vue 文件提供 css 轉定義的支持,找到標籤上的classname 而後F12直接定位到該classname所在的位置

19. Aliyun Serverless VSCode Extension 阿里雲 Serverless 產品 函數計算 Function Compute

20. Git Graph extension for Visual Studio Code

21. Todo Tree

經過tree的形式展現項目中全部TODO項

22. 實時可視化Debug

23. Draw.io Integration 流程圖工具

目前http://draw.io支持3中文件後綴，你只須要新建3種後綴之一的文件就能夠在vs code中畫流程圖，它們分別是，

• .drawio
• .dio
• .drawio.svg

後續還會支持*.drawio.png，能夠直接保存爲常規圖片格式，目前還沒有發佈。

1. Partial Diff 對比代碼不一樣的地方

在寫單測的時候咱們咱們咱們有期待的結果expected，還有原始值，原始值通過一個函數的處理獲得expected,可是別人入手你的代碼的時候，這個函數徹底是個黑盒，在不看這個函數實現的時候，怎麼推測這個函數到底作了什麼，這個時候Partial Diff就很重要了，直接選取兩個代碼片斷作對比，很直觀的就發現，兩段數據發生了什麼變化，從而推測函數作了什麼。