Visual Studio Code 擴展推薦


由于VSCode貌似沒有導(dǎo)出擴展列表的功能,所以在此記錄下自己經(jīng)常用到的一些擴展,同時也推薦給更多的朋友,希望能對大家有所幫助。
擴展列表按名稱排序

Auto Close Tag

輸入開始標(biāo)簽后,自動添加結(jié)束標(biāo)簽。比如輸入<div>,自動添加</div>

Auto Rename Tag

更改HTML/XML標(biāo)簽名時,自動更新相對應(yīng)的開始標(biāo)簽或結(jié)束標(biāo)簽的標(biāo)簽名

Beautify

格式化javascript,JSON,CSS,Sass和HTML代碼

Better Comments

編寫更加人性化的注釋


Annotated code
Annotated code

Bookmarks

添加行書簽

C#

使用VSCode編寫C#代碼必須的,安裝之后在默認(rèn)打開.cs文件時 還會自動下載調(diào)試器等

C# Extensions

C#擴展插件,強烈推薦,可以幫你在建立文件的時候初始化文件內(nèi)容包括對應(yīng)的命名空間等

C# XML Documentation Comments

可以快速的幫你添加注釋,如同在VS里面使用///來添加注釋

Can I Use

HTML5、CSS3、SVG的瀏覽器兼容性檢查

Code Outline

函數(shù)變量列表

Code Runner

運行選中代碼段(支持大量語言,包括Node)

Color Highlight

顏色代碼高亮插件

Color Info

提供你在 CSS 中使用顏色的相關(guān)信息。你只需在顏色上懸停光標(biāo),就可以預(yù)覽色塊中色彩模型的(HEX、 RGB、HSL 和 CMYK)相關(guān)信息了

Color Picker

拾色器

CSScomb

css屬性排序

cssrem

px轉(zhuǎn)換為rem

Debugger for Chrome

方便js調(diào)試的插件,前端項目在Chrome中運行起來之后,可以直接在VSCode中打斷點、查看輸出、查看控制臺,需要配置launch.json,詳情見插件說明。

Document This

jsdoc注釋生成

EditorConfig for Visual Studio Code

ESLint

這是個esint規(guī)則校驗擴展。vs code 會自動找到你工程中的.eslintrc和.eslintignore。你只需要設(shè)置下elsint選項。

Express

使用Visual Studio代碼中的Express Web服務(wù)器托管當(dāng)前工作空間

File Peek

根據(jù)路徑字符串,快速定位到文件

Font-awesome codes for html (snippets)

FontAwesome提示代碼段

Git Blame

可以查看當(dāng)前光標(biāo)所在位置的Git Log,最近一次提交的人和時間,顯示在左下角

Git History

查看git log

Guides

高亮縮進基準(zhǔn)線

HTML CSS Support

css提示(支持vue)

HTML Snippets

增強了zen-coding,增加了H5的自動補全,安裝后每次打開自動啟用

Import Cost

在引入npm包同時獲取所用包的體積,可配置顯示格式(minified or gziped)

Indenticator

縮進高亮

IntelliSense for CSS class names

CSS類名工具

JavaScript (ES6) code snippets

es6代碼片段

JavaScript Standard Style

JavaScript 標(biāo)準(zhǔn)編碼風(fēng)格

  • 使用兩個空格 – 進行縮進
  • 字符串使用單引號 – 需要轉(zhuǎn)義的地方除外
  • 不再有冗余的變量 – 這是導(dǎo)致 大量 bug 的源頭!
  • 無分號 – 這里有3篇文章說明不用分號的好處:文章1 文章2 文章3
  • 行首不要以 (, [, or `開頭
  • 關(guān)鍵字后加空格 if (condition) { ... }
  • 函數(shù)名后加空格 function name (arg) { ... }
  • 堅持使用全等 ===摒棄 ==一但在需要檢查 null || undefined時可以使用 obj == null。
  • 一定要處理 Node.js 中錯誤回調(diào)傳遞進來的 err參數(shù)。
  • 使用瀏覽器全局變量時加上 window前綴 – documentnavigator除外
  • 避免無意中使用到了這些命名看上去很普通的全局變量, open, length,event 還有 name。
  • 請參閱 完整的規(guī)則列表

npm

運行npm命令

Npm Intellisense

對package.json內(nèi)中的依賴包的名稱提示

Output Colorizer

彩色輸出信息

Path Autocomplete

路徑完成提示

Path Intellisense

文件路徑補全

Prettify JSON

格式化JSON

SpellChecker

自然語言的拼寫檢查

SVG Viewer

svg預(yù)覽

Trailing Spaces

突出顯示尾隨空格并將其刪除

Version Lens

package.json文件顯示模塊當(dāng)前版本和最新版本

vetur

vue單文件能夠像html,js,css一樣編寫,注釋

View In Browser

右鍵在瀏覽器打開

Visual Studio Code Format

vscode代碼格式增強工具

vscode-icons

美化VSCode的界面,在文件名前面顯示小圖標(biāo)

Vue 2 Snippets

vue2的語法高亮,語法提示

VueHelper

Vue2代碼段(包括Vue2 api、vue-router2、vuex2)

wpy-beautify

vue2單文件格式化

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,724評論 19 139
  • 參考聊聊架構(gòu)里面的文章 UI組件 element ★9305 - 餓了么出品的Vue2的web UI工具套件Vux...
    wangxiaoda閱讀 1,531評論 0 14
  • 種草給大家,我的Atom在windows上最近老閃退,所以換VScode嘍。在Mac上Atom還是蠻好用的。 去官...
    續(xù)寫那未完的記憶閱讀 5,176評論 1 3
  • 沒想到三年后的再一次重逢 是在鬧哄哄的佐丹奴 我在試衣鏡前看著自己 就突然看到了身后的你 一怔之間 感覺一切都沒有...
    仔仔姨閱讀 979評論 0 2
  • 01 在簡書上參加了好多個群,開始是應(yīng)專欄編輯邀請而入群的,有連載群、短篇小說群、談寫作群等,后來又參加了陳遠(yuǎn)歌的...
    浮生小姿閱讀 772評論 28 36

友情鏈接更多精彩內(nèi)容