VScode插件推薦

1、代碼片斷類插件

英文叫作 Snippets，就是把常見的代碼模式抽出來，經過 2~3 個鍵就能展開 N 行代碼。

VS Code JavaScript(ES6) snippets

當前最流行的，已有超過 120 萬的下載量。這個插件爲 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的語法支持；

 

 

React-Redux ES6 Snippets

 

 

jQuery Code Snippets

 

 

2、自動補全類插件

Path Intellisense

自動路勁補全

 

 

Visual Studio IntelliCode

從 GitHub 上高星的開源項目通過大量的機器學習訓練，給開發者提供最合適的 IntelliSense 上下文建議功能，除此以外，還有代碼格式化和規則推測等功能。

 

 

Npm Intellisense

用於在import語句中自動填充npm模塊

 

 

IntelliSense for CSS class names

智能提示 css 的 class 名，目前也沒有用

 

 

Vetur

Vue 的語法高亮、智能感知、Emmet 等；

 

 

Surround

在你的代碼塊中增長外包裹模板

 

 

htmltagwrap

能夠在選中HTML標籤中外面套一層標籤
使用方法：選中要包裹的代碼，快捷鍵Alt+w，默認外包裹標籤爲p，能夠在設置裏搜索htmltagwrap將外包裹標籤改成div

 

 

Image Preview

鼠標懸浮在連接或者裝訂線(gutter)左邊能夠預覽到圖片

 

 

HTML CSS Support

讓 html 標籤上寫class 智能提示當前項目所支持的樣式。目前沒有用，多是由於當前做者的開發模式是html和css分開文件開發的。

 

 

---

3、功能加強插件

Debugger for Chrome

讓 vscode 映射 chrome 的 debug 功能，靜態頁面均可以用 vscode 來打斷點調試，須要另外配置，有點麻煩；

 

 

Project Manager

在多個項目以前快速切換的工具
工程項目過多時，shift+cmd+p(shift+ctrl+p) 而後輸入project，第一次選擇edit Project編輯本身的工程項目，以後就能夠直接選擇open打開你的項目

 

 

jumpy

經過快捷鍵快速跳轉至某一個位置，對windows來講沒什麼用

 

 

language-stylus

爲Stylus文件添加語法突出顯示，stylus是 CSS 的預處理框架

 

 

code spell checker

檢查你的英文單詞拼寫是否有誤，若是有庫裏不存在的單詞則會下下波浪線

 

 

Settings Sync

Visual Studio代碼設置同步，須要github帳號輔助的

 

 

JS Refactor

自動重構工具，目前沒發現沒怎麼用

 

 

turbo console log

自動編寫有意義的日誌消息

 

 

如下是做者本人的快捷鍵設置

 

 

turboConsoleLog.displayLogMessage //control+option+L 

change case

雖然 VSCode 內置了開箱即用的文本轉換選項，但其只能進行文本大小寫的轉換。而此插件則添加了用於修改文本的更多命名格式，包括駝峯命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等。

 

 

在快捷鍵配置中配置

extension.changeCase.camel //快捷鍵設置爲ctrl+alt+u /commond+option+u將下劃線轉駝峯 extension.changeCase.snake //快捷鍵設置爲alt+u /control+option+u 將駝峯轉爲下劃線 

---

4、markdown相關插件

Markdown All in One

讓vscode支持markdown .md文件

 

 

Markdown Preview Enhanced（未用）

實時預覽markdown，markdown使用者必備

markdownlint

markdown語法糾錯

---

5、Git相關插件

GitLens

豐富的 git 日誌插件，很是強大，具體看官方介紹或者https://segmentfault.com/a/1190000015360390

 

 

Git blame

blame是追溯的意思，查看當前文件歷史上誰修改過

 

 

編輯器左下角能看到是最近一次的編輯信息，點擊右下角彈窗可直接打開網頁gitlab，查看提交記錄

 

 

.Git History

以圖表的形式查看以及根據條件搜索git日誌
在當前文件右鍵點擊Git:viewFileHistory，就能查看當前文件的全部提交信息，而且支持篩選，搜索。

 

 

 

 

gi

gi是gitignore縮寫，它能夠在Visual Studio Code內部生成.gitignore文件的擴展。gi使用gitignore.io API來更新操做系統，IDE和編程語言列表。

 

 

 

---

6、代碼檢測相關插件

ESlint

ESlint 接管原生 js 提示，能夠自定製提示規則；

 

 

TSLint

 

 

Regex Previewer

這是一個用於實時測試正則表達式的實用工具。它能夠將正則表達式模式應用在任何打開的文件上，並高亮全部的匹配項。
在並排文檔中顯示當前正則表達式的匹配項

 

 

 

 

---

7、美化編輯器類

Bracket Pair Colorizer

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

 

 

使用結果：

 

 

vscode-icon

讓 vscode 資源樹目錄加上圖標

 

 

color highlight

 

 

Output Colorizer

輸出提示的文字顏色有一些變化，方便獲取關鍵信息

 

 

Guides

指導線，當前所在的級別縮進線會變紅，當前在哪一級一目瞭然。

 

 

 

 

Log File Highlighter

日誌文件(.log後綴的文件)高亮

 

 

---

8、其餘

Laravel goto view

跳轉到相應的文件路徑

 

 

open in browser

當前的 html 文件用瀏覽器打開，快捷鍵alt+b，或者右鍵點擊html文件，選擇open in default Browsers

 

 

sass

 

 

TypeScript Hero

 

 

Remote

遠程開發用的

 

 

---

TODO相關

Todo Tree

 

 

TODO Highlight

可以在你的代碼中標記出全部的 TODO 註釋，以便更容易追蹤任何未完成的業務

 

 

---

提示類

Import Cost

在編輯器中顯示引入包的大小

 

 

 

 

filesize

在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間

 

 

Quokka.js

實時觀看 javascript 的變量的變化
先shift+cmd+p （ctrl+shift+p）輸入 quokka 選擇 new javascript 就好了

 

 

CSS peek

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

 

 

---

註釋類

1.Better Comments

使註釋有人性化的高亮顯示

 

 

使用方法：

/** * 個人方法 * *重要的信息會被高亮顯示 * !及其反對的代碼,不要使用 * TODO 重構此方法 * @param 該方法的參數 */ 

 

 

Document This

快速註釋

fileheader

頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間
ctrl + alt + i你能夠在頭部插入註釋，ctrl + s保存文件後，自動更新時間和做者。

 

 

---

圖片相關

SVG Viewer(目前還沒用)

無需離開編輯器，即可以打開 SVG 文件並查看它們