由于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
編寫更加人性化的注釋
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前綴 –document和navigator除外 - 避免無意中使用到了這些命名看上去很普通的全局變量,
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單文件格式化