插件列表：

Color Info?

? ? ?這個(gè)便捷的插件苗踪，將為你提供你在CSS 中使用顏色的相關(guān)信息济瓢。你只需在顏色上懸停光標(biāo)，就可以預(yù)覽色塊中色彩模型的（HEX棵帽、 RGB熄求、HSL 和 CMYK）相關(guān)信息了。

代碼片段比對(duì)

Partial Diff

SVN

? ? ? ?不解釋

Vetur

? —— 語法高亮逗概、智能感知弟晚、Emmet等

包含格式化功能，Alt+Shift+F（格式化全文）逾苫，Ctrl+K Ctrl+F（格式化選中代碼指巡，兩個(gè)Ctrl需要同時(shí)按著）

EsLint

? —— 語法糾錯(cuò)

JavaScript(ES6) code snippets

? ? —— ES6語法智能提示以及快速輸入，除js外還支持.ts隶垮，.jsx，.tsx秘噪，.html狸吞，.vue，省去了配置其支持各種包含js代碼文件的時(shí)間

Path Intellisense

? ?—— 自動(dòng)路勁補(bǔ)全

HTML CSS Support?

? ? ?—— 讓 html 標(biāo)簽上寫class 智能提示當(dāng)前項(xiàng)目所支持的樣式

vue

emmet

Chinese

? ?設(shè)置簡體中文? ? //中文

Auto Rename Tag?

? //自動(dòng)重命名配對(duì)的HTML / XML標(biāo)簽(必備)

Beautify

? //格式化javascript指煎，JSON蹋偏，CSS，Sass至壤，和HTML

Class autocomplete for HTML??

? ? //智能提示HTML class =“”屬性（必備）

Code Runner

?//非常強(qiáng)大的一款插件威始，能夠運(yùn)行多種語言的代碼片段或代碼文件：C，C ++像街，Java黎棠，JavaScript，PHP镰绎，Python脓斩，Perl，Ruby畴栖，Go等等随静，安裝完成后，右上角出現(xiàn)：

點(diǎn)擊這個(gè)按鈕就可以運(yùn)行你的文件了（必備）

Debugger for Chrome??

? ? //讓vscode映射 chrome 的 debug功能吗讶，使靜態(tài)頁面都可以用 vscode 來打斷點(diǎn)調(diào)試

Document This??

//添加注釋塊

Filesize

?//在底部狀態(tài)欄顯示當(dāng)前文件大小燎猛，點(diǎn)擊后還可以看到詳細(xì)創(chuàng)建、修改時(shí)間

Git History

以圖表的形式查看git日志

使用command+shift+p（Ctrl+shift+p） 輸入git log就可以看到了

GitLens?

? ? ?可以增強(qiáng) VSCode 內(nèi)置 Git 的功能照皆。例如 commits 搜索重绷，歷史記錄和顯示的代碼作者身份具體功能可以查看Feature list

git日志插件

HTML Snippets

html代碼片段（必備）

htmlhint

html代碼檢測(cè)

htmltagwrap

可以在選中HTML標(biāo)簽中外面套一層標(biāo)簽

使用：選擇一大段代碼，然后按“Alt + W”

Indenticator

突出目前的縮進(jìn)深度

IntelliSense for CSS class names

智能提示css 的 class 名

Image Preview

鼠標(biāo)移到路徑里顯示圖像預(yù)覽

JavaScript Snippet Pack

js代碼片段（必備）

jQuery Code Snippets

jQuery代碼片段

?自動(dòng)提示jquery膜毁，如果是你一個(gè)重度JQ使用者论寨，可以考慮安裝

Live Sass Compiler

實(shí)時(shí)編譯sass ,不過需要配置星立，附上我的配置

"liveSassCompile.settings.formats":[? ?// You can add more? ? {

? ? "format": "compressed",//壓縮

? ? ? "extensionName": ".min.css",//編譯后綴名

? ? ? ?"savePath": "./css"//編譯保存的路徑

?}

? ?],

使用

markdownlint

markdown語法檢查

Node.js Modules Intellisense

可以在導(dǎo)入語句中自動(dòng)完成JavaScript / TypeScript模塊。

?npm Intellisense

在導(dǎo)入語句中自動(dòng)填充npm模塊,跟Node.js Modules Intellisense差不多

open in browser

當(dāng)前的html文件用瀏覽器打開葬凳，類似 webstorm 的那四個(gè)小瀏覽器圖標(biāo)功能绰垂，前提條件html 文件必須保存

快捷鍵alt+b

Output Colorizer

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

?Prettier

格式化JavaScript / TypeScript / CSS火焰。

Project Manager

工程項(xiàng)目過多時(shí)劲装，shift+cmd+p(shift+ctrl+p)然后輸入project，第一次選擇edit Project編輯自己的工程項(xiàng)目昌简，之后就可以直接選擇open打開你的項(xiàng)目

Sass

寫sass必備

?vscode-faker

生成假數(shù)據(jù)占业，地址，電話纯赎，圖片等等

打開方式shift+cmd+p(shift+ctrl+p)) 然后輸入faker 就可以選擇了

Quokka.js

實(shí)時(shí)觀看javascript的變量的變化

使用：先shift+cmd+p （ctrl+shift+p）輸入 quokka 選擇 new javascript 就行了?

Regex Previewer

測(cè)試正則的插件

?TSLint

檢查typescript編程時(shí)的語法錯(cuò)誤語法

TypeScript Importer

自動(dòng)搜索工作區(qū)文件中的TypeScript定義谦疾，并將所有已知符號(hào)作為完成項(xiàng)，以允許代碼完成犬金。

vscode-icons

目錄樹圖標(biāo)

react

React-Native/React/Redux snippets for es6/es7

react代碼片段念恍，下載人數(shù)超多?

VueHelper? ?

vue代碼片段

vue-helper?(支持CTRL+點(diǎn)擊函數(shù)跳轉(zhuǎn) || 綁定對(duì)象跳轉(zhuǎn)）

vscode怎么快速查看vue的函數(shù)定義

參考：https://blog.csdn.net/Amouzy/article/details/123282132

Vue TypeScript Snippets

vue的 typescript 代碼片段

Vue 2 Snippets

vue 2代碼片段

Typings Installer? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ——安裝vscode 的代碼提示依賴庫，基于typtings的晚顷，比如提示angular或者jQuery智能感知

JS-CSS-HTML Formatter? ?

? ? ? ? ? ? ? ? ? ? ?——代碼對(duì)齊峰伙。每次保存代碼的時(shí)候它會(huì)自動(dòng)對(duì)齊代碼

主題

Dracula Official

個(gè)人最喜歡的主題，應(yīng)該是最好看的主題之一

One Dark Pro

這個(gè)也好看

Atom One Dark Theme(老版本)

這個(gè)和One Dark Pro差不多该默，One Dark Pro顏色主題多一些

One Monokai Theme

Eva Theme

里面包含黑色和白色主題瞳氓，這個(gè)白色主題感覺挺好看的

Boxy Theme Kit

Ayu

Ayu提供三種不同的顏色變體，包括深色栓袖，淺色和海市rage樓匣摘。

它還允許用戶使用其自定義的Ayu圖標(biāo)包來實(shí)現(xiàn)工作臺(tái)的統(tǒng)一外觀。

該主題是使用Java構(gòu)建的裹刮，因此很容易對(duì)其進(jìn)行修改或擴(kuò)展其功能恋沃。

您可以輕松地從其GitHub存儲(chǔ)庫中派生此主題，并在此主題之上開始構(gòu)建必指。

vscode設(shè)置顯示代碼縮略圖

文件–首選項(xiàng)–設(shè)置 搜索 minimap 打上對(duì)勾就可以了

Bracket Pair Colorizer

顏色識(shí)別匹配括號(hào)

VS Code 1.63.1自身已經(jīng)支持了 囊咏，通過在settings.json添加如下配置{"editor.bracketPairColorization.enabled": true,"editor.guides.bracketPairs":"active"}

Code Spell Checker 單詞拼寫檢查

? ? ?檢測(cè)代碼中單詞拼寫正確性

? ? ? 我們?cè)诰帉懘a的時(shí)候經(jīng)常會(huì)不小心拼寫錯(cuò)誤造成軟件運(yùn)行失敗，安裝這個(gè)插件后會(huì)自動(dòng)幫我們識(shí)別單詞拼寫錯(cuò)誤并且給出修改建議塔橡，大大幫我們減輕了排除bug的壓力梅割。

?CSS Peek

使用此插件，你可以追蹤至樣式表中CSS 類和 ids 定義的地方葛家。當(dāng)你在 HTML 文件中右鍵單擊選擇器時(shí)户辞，選擇“ Go to Definition 和 Peek definition ”選項(xiàng)，它便會(huì)給你發(fā)送樣式設(shè)置的 CSS 代碼癞谒。

Better Align

??#對(duì)齊用的底燎，設(shè)置一下快捷鍵 Ctrl + Alt + =,對(duì)塊自動(dòng)等號(hào)對(duì)齊

Import Cost

引入包大小計(jì)算,對(duì)于項(xiàng)目打包后體積掌握很有幫助

HTML Boilerplate

通過使用HTML 模版插件刃榨，你就擺脫了為 HTML 新文件重新編寫頭部和正文標(biāo)簽的苦惱。你只需在空文件中輸入 html双仍，并按 Tab 鍵枢希，即可生成干凈的文檔結(jié)構(gòu)。

TODO Highlight

這個(gè)插件能夠在你的代碼中標(biāo)記出所有的TODO 注釋朱沃，以便更容易追蹤任何未完成的業(yè)務(wù)苞轿。在默認(rèn)的情況下，它會(huì)查找 TODO 和 FIXME 關(guān)鍵字逗物。當(dāng)然搬卒，你也可以添加自定義表達(dá)式。

Rainbow Brackets

為圓括號(hào)翎卓，方括號(hào)和大括號(hào)提供彩虹色契邀。這對(duì)于Lisp或Clojure程序員，當(dāng)然還有JavaScript和其他程序員特別有用失暴。

效果如下：

Indent-Rainbow

用四種不同顏色交替著色文本前面的縮進(jìn)

scss?IntelliSense? ?scss?智能提示坯门，補(bǔ)全

AutoFileName (文件路徑自動(dòng)補(bǔ)全插件)

? ? ? ?當(dāng)你需要 require 本地文件時(shí)，這個(gè)插件將為你提供基于你輸入的文件路徑的自動(dòng)補(bǔ)全的選項(xiàng)锐帜。

Pigment? ??

遇到顏色代碼時(shí)，Pigment會(huì)將顏色渲染在這段代碼的下面畜号。

Settings Sync

Settings Sync 提供了同步個(gè)人設(shè)置的功能缴阎，當(dāng)我們需要換電腦進(jìn)行開發(fā)時(shí)，比如回家用自己的電腦简软，或者換了新的電腦蛮拔，該插件可以幫你同步之前做的設(shè)置，不需要在每臺(tái)電腦上都重新設(shè)置一次痹升。

vscode 選中后相同內(nèi)容高亮插件推薦

highlight-icemode

? ?first step

ctrl + shift + p 打開 command panel , 輸入 preferences: open user settings 打開用戶設(shè)置建炫，找到 highlight-icemode 配置項(xiàng)

secode step

將左側(cè)內(nèi)容復(fù)制到右側(cè)可編輯tab 中，設(shè)置上自己想要的顏色就ok了疼蛾。

{

????// Set backgroundColor

????"highlight-icemode.backgroundColor": "red",

????// Set Border Color

????"highlight-icemode.borderColor": "blue"

}

vscode中選擇HTML標(biāo)簽對(duì)高亮

擴(kuò)展插件中肛跌，安裝這個(gè)插件“VSCode Highlight Matching Tag”

vs code這個(gè)編輯器，如果高亮顯示對(duì)應(yīng)的標(biāo)簽察郁？

我一點(diǎn)div, vs code這個(gè)編輯器把所有的div都高亮了衍慎，但是只想高亮閉合的那個(gè)div,該怎么設(shè)置呢?謝謝

這個(gè)問題也困惑我很久了，brackets就可以很好的實(shí)現(xiàn)皮钠，但是其他功能又沒有vsc好用稳捆，糾結(jié)。

問題解決麦轰，把正在編輯的文件識(shí)別為html就可以顯示高亮顯示對(duì)應(yīng)標(biāo)簽了乔夯。php文件?

手動(dòng)識(shí)別為

砖织，就可以了

vue-beautify

vue文件格式化，有三種用法

1末荐、快捷鍵ctrl+shift+f ;

2侧纯、在文件中右鍵選擇Beautify Vue ;

3、按f1,搜索 Beautify Vue然后點(diǎn)擊.

拓展插件

這部分主要介紹一些針對(duì)特定開發(fā)環(huán)境的插件

Vscode-element-helper

使用element-ui庫的可以安裝這個(gè)插件鞠评，編寫標(biāo)簽時(shí)自動(dòng)提示element標(biāo)簽名稱茂蚓。

https://upload-images.jianshu.io/upload_images/2484592-2c9831f44f9834a7.gif?imageMogr2/auto-orient/strip|imageView2/2/w/992/format/webp

?Version Lens? 工具包版本信息

在package.json中顯示你下載安裝的npm工具包的版本信息，同時(shí)會(huì)告訴你當(dāng)前包的最新版本剃幌。

WakaTime 計(jì)算代碼工作量

這是一款時(shí)間記錄工具聋涨，它可以幫助你在vs code中記錄有效的編程的時(shí)間。

并且將數(shù)據(jù)用折線圖的形式展示出來负乡，為你呈現(xiàn)一周內(nèi)的工作趨勢(shì)牍白，曾經(jīng)編寫項(xiàng)目的時(shí)候最多一天編程將近12個(gè)小時(shí)，你的付出和努力wakatime都知道抖棘。

同時(shí)在他的官網(wǎng)中茂腥，也會(huì)顯示用扇形圖的形式顯示你編寫各個(gè)語言所占用的時(shí)間比例，以及你在各個(gè)項(xiàng)目中所用的時(shí)間占比切省，是一個(gè)非常好的數(shù)據(jù)報(bào)告最岗，項(xiàng)目結(jié)束的時(shí)候你可以在它的Dashboard中清晰地看出自己的時(shí)間都是如何分配的。

Settings Sync VSCode設(shè)置同步到Gist（現(xiàn)已棄用）

有時(shí)候我們到了新公司或者換了新電腦需要配置新的開發(fā)環(huán)境朝捆，這時(shí)候一個(gè)一個(gè)下載插件般渡，再重新配置vs code就非常麻煩而且你還不一定記得那么全面，通過這個(gè)插件我們可以將當(dāng)前vs code中的配置上傳到Gist芙盘，之后再通過Gist下載驯用，就可以將所有配置同步到新環(huán)境中了。

點(diǎn)擊左側(cè)側(cè)邊欄Developer settings儒老，進(jìn)入開發(fā)者設(shè)置蝴乔。

選擇Personal access tokens，點(diǎn)擊右側(cè)Generate new token驮樊。

填寫token名稱薇正，在下方勾選gist。

點(diǎn)擊下方的Generate token按鈕生成一個(gè)新的token囚衔。

將生成的新的token保存下來铝穷。

在vscode中安裝Settings Sync插件，輸入Ctrl+Shift+p輸入Sync佳魔，選擇更新/上傳配置曙聂。

將github中生成的token輸入，點(diǎn)擊回車鞠鲜。

在控制臺(tái)中自動(dòng)生成一串id,之后便可以通過token和id進(jìn)行配置同步宁脊。

輸入Ctrl+Shift+p輸入Sync断国，選擇下載配置，輸入token和id即可同步下載榆苞。

minapp

微信小程序標(biāo)簽稳衬、屬性的智能補(bǔ)全（同時(shí)支持原生小程序、mpvue 和 wepy 框架坐漏，并提供 snippets）

colorize

在設(shè)置下面直接顯示顏色薄疚，更直觀的知道你設(shè)置的是什么顏色，同時(shí)也支持Less赊琳、Sass的變量

Path Autocomplete

自動(dòng)提示文件路徑

javascript console utils

它的主要功能是快速的生成console.log()街夭，再調(diào)試js的過程中難免要打印一些東西，所以快速生成就很爽

下載安裝好就可以用了

使用方法：

先選中變量

然后按ctrl/cmd+shift+L

就會(huì)自動(dòng)生成console.log

調(diào)試的時(shí)候可能會(huì)弄了好多的console.log出來

調(diào)試好了之后需要把這些console.log刪除掉

這時(shí)按ctrl/cmd+shift+D

就可以刪除所有的console.log

local history

修改代碼之后想找回歷史代碼怎么辦躏筏？

在使用Pycharm板丽、IDEA時(shí)可以直接查看本地歷史代碼，然后輕松恢復(fù)之前某個(gè)版本趁尼。但是埃碱，VS Code默認(rèn)是不支持local history的，所以酥泞，僅憑Ctrl+z撤銷操作時(shí)不行的砚殿。何況，撤銷操作是把前面步驟所有的操作都撤銷了芝囤，其中有很多是我們不需要的似炎。

但是，為VS Code配合上local history凡人，所有問問題就迎刃而解了名党。

安裝這款插件之后在側(cè)邊欄會(huì)出現(xiàn)LOCAL HISTORY的字樣叹阔，每當(dāng)我們保存更改時(shí)挠轴，它都會(huì)備份一份歷史文件，當(dāng)我們需要恢復(fù)之前版本時(shí)耳幢，只需要點(diǎn)擊一下對(duì)應(yīng)的文件即可岸晦。此外，它還會(huì)在編輯框顯示對(duì)比詳情睛藻，能夠讓你對(duì)修改位置一目了然启上。

Better Comments

是不是覺得注釋信息千篇一律？

Better Comments這款插件可以讓VS Code注釋信息更加人性化店印。

它可以根據(jù)告警冈在、查詢、TODO按摘、高亮等標(biāo)記對(duì)注釋進(jìn)行不同的展示包券。此外纫谅，還可以對(duì)注釋掉的代碼進(jìn)行樣式設(shè)置。

您想要的任何其他注釋樣式都可以在設(shè)置中指定

stylelint

CSS / SCSS / Less 語法檢查

stylelint是一個(gè)?css?規(guī)范校驗(yàn)工具溅固，也支持?less?等?css?預(yù)處理器付秕。

1.安裝擴(kuò)展

2. 項(xiàng)目初始化

$?npm?init?-y

3. 安裝依賴

yarn?add?stylelint?stylelint-config-standard?--dev

4. 添加.stylelintrc.js文件

在項(xiàng)目根目錄添加.stylelintrc.js文件并加入如下內(nèi)容

module.exports?=?{

extends:'stylelint-config-standard',

rules:?{

//?your?rules

},

//?忽略其他文件，只校驗(yàn)樣式相關(guān)的文件

ignoreFiles:?[

'node_modules/**/*',

'public/**/*',

'dist/**/*',

'**/*.js',

'**/*.jsx',

'**/*.tsx',

'**/*.ts',

],

};

5. 添加index.css

新建index.css并加入以下內(nèi)容

? ? ?可以發(fā)現(xiàn)侍郭，如果樣式代碼不符合規(guī)范,styleint會(huì)在代碼中給出提示

Error Lens

Error Lens是一款把代碼檢查（錯(cuò)誤询吴、警告、語法問題）進(jìn)行突出顯示的一款插件亮元。

經(jīng)常與代碼打交道的同學(xué)都應(yīng)該清楚猛计，大多數(shù)開發(fā)工具對(duì)于代碼進(jìn)行都是通過下劃線的方式進(jìn)行標(biāo)識(shí)。但是苹粟，這樣對(duì)于代碼調(diào)試不夠直接和友好有滑。

Error Lens 通過使診斷更加突出，增強(qiáng)了語言的診斷功能嵌削，突出顯示了由該語言生成的診斷所在的整行毛好，并在代碼行的位置以行方式在線打印了診斷消息。

它具有如下特性苛秕，

更明顯地突出顯示錯(cuò)誤或警告信息

將診斷結(jié)果附加到包含診斷信息的任何行的末尾肌访，這意味著你不必上下文切換到問題視圖

狀態(tài)欄顯示打開文件的診斷次數(shù)（可以配置）

可以配置設(shè)置以控制 ErrorLens 顯示增強(qiáng)診斷的方式

適用于任何編程語言

Git Graph：

git插件，這個(gè)插件也體現(xiàn)出vscode一站式解決問題的決心和能力艇劫，如下：

Trailing Spaces

高亮那些冗余的空格吼驶，可以快速刪掉。

Git Blame

“誰寫的這段代碼店煞？”

每隔一段時(shí)間蟹演，你都可能需要了解某段代碼是誰寫的。正好顷蟀，Git Blame 就可以幫你酒请。Git Blame 會(huì)告訴你最后修改這行代碼的人是誰。最重要的是，你可以看到這處修改發(fā)生在哪次提交里。

這個(gè)信息很有用科吭，特別是當(dāng)你在某個(gè)產(chǎn)品功能分支上開發(fā)時(shí)尤其有用。當(dāng)使用產(chǎn)品功能分支開發(fā)時(shí)昼窗，你通過點(diǎn)擊以你分支名命名的標(biāo)簽，就可以跳到相應(yīng)信息涛舍。

由于 Git Blame 會(huì)告訴你這行代碼是在哪個(gè)提交和哪個(gè)分支上修改的澄惊，所以你就知道了哪個(gè)標(biāo)簽對(duì)應(yīng)著這次修改。這將幫助你更好地理解這種修改背后的邏輯。

Prettify JSON?

格式化JSON掸驱，有些沒有排版好的JSON免去自己手動(dòng)排列好窘哈。一鍵格式化效率還是很不錯(cuò)的

Bookmarks??

?給文件某個(gè)位置打標(biāo)簽,用來快速跳轉(zhuǎn)的..不知道這個(gè)功能到現(xiàn)在為何沒內(nèi)置!!

Live Saas Compiler

它能幫你實(shí)時(shí)把 SASS/SCSS 文件編譯/轉(zhuǎn)譯成 CSS 文件，并且提供在線瀏覽器重載亭敢。

Log File Highlighter日志文件(.log后綴的文件)高亮

Laravel goto view跳轉(zhuǎn)到相應(yīng)的文件路徑

Comment Translate

VSCode 注釋翻譯

Icon Fonts

這是一個(gè)能夠在項(xiàng)目中添加圖標(biāo)字體的插件滚婉。該插件支持超過 20 個(gè)熱門的圖標(biāo)集，包括了 Font Awesome帅刀、Ionicons让腹、Glyphicons 和 Material Design Icons。

Visual Studio Intellicode

下載超過320萬次的Visual Studio Intellicode是Visual Studio下載次數(shù)最多的插件之一扣溺。而且骇窍，在我看來，它是你能用到的最有用的插件之一锥余。這個(gè)插件旨在幫助開發(fā)人員提供智能的代碼完成建議而構(gòu)建的腹纳，并且已預(yù)先構(gòu)建了對(duì)多種編程語言的支持。

Visual Studio Intellicode使用機(jī)器學(xué)習(xí)技術(shù)來觀察和查找眾多開源GitHub項(xiàng)目中使用的模式驱犹，并在編碼時(shí)提供建議嘲恍。

change-case

通常我們對(duì)一個(gè)變量的命名可能是駝峰，可能是全大寫雄驹，又或是下劃線佃牛，這里可通過這個(gè)插件解決變量命名規(guī)范的問題選中變量配合組合鍵[Ctrl+Shift+p]，輸入對(duì)應(yīng)格式即可医舆。extension.changeCase.commands：列出所有“更改案例”命令俘侠，如果僅選擇一個(gè)單詞，則帶有預(yù)覽?

extension.changeCase.camel：更改大小寫'camel'：轉(zhuǎn)換為字符串蔬将，并用下一個(gè)字母大寫表示分隔符?

extension.changeCase.constant：更改大小寫“常量”：轉(zhuǎn)換為大寫字母爷速，下劃線分隔字符串

?extension.changeCase.dot：更改大小寫的“點(diǎn)”：轉(zhuǎn)換為小寫，句點(diǎn)分隔的字符串extension.changeCase.kebab：更改大小寫“ kebab”：轉(zhuǎn)換為小寫字母霞怀，用破折號(hào)分隔的字符串（參數(shù)名的別名）

?extension.changeCase.lower：更改大小寫為“小寫”：轉(zhuǎn)換為小寫的字符串?

extension.changeCase.lowerFirst：更改大小寫“ lowerFirst”：轉(zhuǎn)換為首字母小寫的字符串

?extension.changeCase.no：轉(zhuǎn)換沒有任何大小寫的字符串（小寫字母惫东，空格分隔）?

extension.changeCase.param：更改大小寫為'param'：轉(zhuǎn)換為小寫字母，用破折號(hào)分隔的字符串?

extension.changeCase.pascal：更改大小寫“ pascal”：轉(zhuǎn)換為以與camelCase相同的方式表示的字符串里烦，但首字母也大寫?

extension.changeCase.path：更改大小寫的“路徑”：轉(zhuǎn)換為小寫凿蒜，用斜杠分隔的字符串

?extension.changeCase.sentence：更改大小寫的“句子”：轉(zhuǎn)換為小寫的空格分隔的字符串

?extension.changeCase.snake：更改大小寫“ snake”：轉(zhuǎn)換為小寫字母禁谦，下劃線分隔字符串?

extension.changeCase.swap：更改大小寫“交換”：轉(zhuǎn)換為每個(gè)大小寫相反的字符串?

extension.changeCase.title：更改大小寫“標(biāo)題”：轉(zhuǎn)換為以空格分隔的字符串胁黑，每個(gè)單詞的第一個(gè)字符均大寫?

extension.changeCase.upper：更改大小寫為大寫：轉(zhuǎn)換為大寫字符串?

extension.changeCase.upperFirst：更改大小寫為“ upperFirst”：轉(zhuǎn)換為首字母大寫的字符串

EditorConfig for VS Code

代碼風(fēng)格統(tǒng)一

配置參考：https://blog.csdn.net/qq_24147051/article/details/85244267

Git History Diff?：尋找每一個(gè)git分支上面提交過的節(jié)點(diǎn)，并可以對(duì)比差異性州泊。

Angular Extension pack： 集成了很多提升Angular開發(fā)效率的插件

解決Vscode提示code安裝似乎損壞

參考：https://blog.csdn.net/liuarmyliu/article/details/107370535

vs code顯示擴(kuò)展宿主意外終止該怎么辦丧蘸？

? ? ?卸載：Live Sass Compiler，Live Server

CSS Navigation：快速跳轉(zhuǎn)到CSS的類定義

css-auto-prefix：寫CSS時(shí)不再為瀏覽器前綴發(fā)愁?

Git 集成插件

? ? ?GitHub Pull requests

在Visual Studio Code中查看和管理GitHub拉取請(qǐng)求和問題

guides

顯示代碼對(duì)齊輔助線，很好用

JavaScript Booster

這款神器可以在我們代碼寫的不規(guī)范或者有待調(diào)整的地方力喷，在光標(biāo)聚焦后刽漂，會(huì)有一個(gè)小燈泡。會(huì)提示對(duì)應(yīng)的不合理原因和改進(jìn)方案弟孟。極大的提高了我們的代碼優(yōu)雅度贝咙，強(qiáng)烈推薦

讓您的生活更輕松，使用代碼操作為您執(zhí)行重復(fù)性任務(wù)拂募！他們可以提供很多幫助庭猩，只需跟隨燈泡！

當(dāng)在JavaScript（或TypeScript / Flow）中編輯代碼時(shí)陈症，此VS Code擴(kuò)展提供了各種代碼操作（快速修復(fù)）蔼水。只需注意左側(cè)的燈泡，然后按一下它即可了解如何在光標(biāo)下轉(zhuǎn)換代碼录肯。

Cocos Creator JS

? ? ?JavaScript 代碼支持函數(shù)跳轉(zhuǎn)

Cocos Creator 支持 JavaScript 和 TypeScript 兩種語言趴腋，如果你是用 VS Code 來開發(fā) Cocos Creator 的 js 項(xiàng)目，那你的編程體驗(yàn)應(yīng)該不是很好论咏，因?yàn)?Cocos Creator 的組件腳本是一套自定義的結(jié)構(gòu)优炬，

下面是預(yù)覽效果:

js代碼支持函數(shù)跳轉(zhuǎn)

? ? js代碼提示

? ? 模塊跳轉(zhuǎn)

path-alias?一個(gè)可以解決路徑別名提示，跳轉(zhuǎn)的vscode插件禁用卸載

參考：https://juejin.cn/post/6844903954376032269

Tabnine

智能提示代碼厅贪，可以預(yù)測(cè)你將要寫的代碼進(jìn)行提示

Template String Converter

? ? ? 在字符串中輸入$觸發(fā)穿剖，將字符串轉(zhuǎn)換為模板字符串

Parameter Hints

? ? ? ? ? 提示函數(shù)的參數(shù)類型及消息

vue-component

? ? ? ?輸入組件名稱自動(dòng)導(dǎo)入找到的組件，自動(dòng)導(dǎo)入路徑和組件

? ? ? ?選中后自動(dòng)輸入組件名（包含必填屬性）卦溢、import語句糊余、components屬性

CSS Initial Value

? ? ? 顯示每個(gè)CSS屬性的初始值，當(dāng)光標(biāo)停留在css屬性時(shí)

A-super-translate

? ? ?翻譯識(shí)別代碼中注釋部分单寂，不干擾閱讀贬芥。支持不同語言，單行宣决、多行注釋蘸劈、

? ? ?支持用戶字符串與變量翻譯,支持駝峰拆分

????使用方法：選中行，Ctrl+Shift+p 輸入 翻譯

????鍵入 ctrl+`再按下 ctrl+1 為翻譯直接替換選中區(qū)域

vue-format（4個(gè)空格尊沸，格式化威沫，好用）

Todo Tree?紀(jì)錄代碼位置，快速定位代碼

Prettier ESLint

Prettier ESLint?按照?ESLint?的規(guī)范美化代碼洼专，搭配使用.

Csscomb

css 棒掠、less、sass 的代碼格式化屁商。

DotENV

支持.env文件語法烟很，高亮顯示

Volar

與vetur相同，volar是一個(gè)針對(duì)vue的vscode插件，支持.vue文件的語法支持雾袱、高亮顯示恤筛、格式校驗(yàn)、錯(cuò)誤檢測(cè)等芹橡，不過與vetur不同的是毒坛，volar提供了更為強(qiáng)大的功能

編輯器快捷分割

class追溯

lang語法提示

Nested Comments

嵌套注釋一直是個(gè)問題。

因?yàn)楸磺短椎淖⑨寱?huì)和第一個(gè)注釋開頭組合成有效的注釋林说，而后面的部分將會(huì)被忽略粘驰。

這個(gè)插件可以幫助我們將被嵌套的注釋進(jìn)行字符轉(zhuǎn)換，在我們解除外層注釋時(shí)述么，再還原被嵌套的注釋蝌数。

下載地址：marketplace.visualstudio.com/items?itemN…

Hungry Delete

? 這個(gè)插件幫助我們一鍵刪除多個(gè)空行。

? 按住 Option+Delete 就可以刪除多個(gè)空行度秘。

vscode-styled-components

功能：在JS文件中寫樣式時(shí)顶伞，有智能提示

Echars 智能提示插件

提示各種Echar中Option?的屬性，挺強(qiáng)大的

Auto import 自動(dòng)導(dǎo)入包

Auto import 是一個(gè)自動(dòng)導(dǎo)入包擴(kuò)展剑梳。如果目前手頭的項(xiàng)目是基于不同組件的唆貌，那么你需要做的就是給每個(gè)組件命名，剩下的事交給 Auto import 就好垢乙。

Sort Typescript imports

? ? import自動(dòng)排序

導(dǎo)入太多的庫了锨咙，眼花撩順，這款插件讓他們有序排列追逮， 強(qiáng)迫癥患者的福星酪刀。我記得eslint好像也有類似的規(guī)則

Code Time

Code Time 可以計(jì)算我們使用 Visual Studio Code 的時(shí)間，提供了多種數(shù)據(jù)指標(biāo)钮孵。

css-class-intellisense (這個(gè)適用于先在css寫了樣式骂倘，在html中寫入樣式時(shí)提示)

HTML to CSS autocompletion (這個(gè)適用于先在html寫了樣式，在css中寫入樣式時(shí)提示)

Can I Use?HTML5巴席、CSS3历涝、SVG的瀏覽器兼容性檢查

Dash?? ?集成Dash

Less IntelliSense?? ?less變量與混合提示

PostCss Sorting?? ?css排序

gitignore?? ?.gitignore文件語法

Error Gutters

File Peek??根據(jù)路徑字符串，快速定位到文件

Find-Jump?快速跳轉(zhuǎn)到指定單詞位置

VS Code Counter

統(tǒng)計(jì)代碼總行數(shù)漾唉、注釋行數(shù)荧库、空白行數(shù)，以及使用的語言赵刑。

any-rule

可以在vscode里快捷使用正則表達(dá)式分衫，不需要借助度娘了！

方式1:

按F1(mac下fn+F1)打開正則列表. -- 有的需要 配合 fn+f1使用

輸入關(guān)鍵詞搜索, 比如"手機(jī)".

方式2:

右鍵選擇"??正則大全".

方式3:

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

Black Box

Blackbox 是一款強(qiáng)大的 VSCode 擴(kuò)展料睛，可以幫助開發(fā)人員更快丐箩、更準(zhǔn)確地編寫代碼。它包含四個(gè)主要功能：代碼自動(dòng)補(bǔ)全恤煞、倉庫搜索屎勘、代碼搜索和 Jupyter Lab & Notebooks。通過代碼自動(dòng)補(bǔ)全居扒，開發(fā)人員可以獲得超過20種編程語言的代碼建議概漱，包括 Python、JavaScript喜喂、TypeScript瓤摧、Go 和 Ruby，只需按 Enter 鍵即可玉吁。為了獲得更好的準(zhǔn)確性照弥，建議在您要構(gòu)建的函數(shù)上添加良好的注釋。Blackbox 倉庫搜索允許開發(fā)人員搜索不同語言的超過1億個(gè)倉庫文件进副，包括 Python这揣、JavaScript、TypeScript影斑、Java 等给赞。這個(gè)功能直接集成在 VSCode 中，因此開發(fā)人員不需要離開他們的 IDE 在線搜索特定的倉庫矫户。Blackbox 代碼搜索幫助開發(fā)人員找到最佳的代碼片段片迅，在構(gòu)建出色的產(chǎn)品時(shí)使用。只需幾個(gè)簡單的步驟皆辽，開發(fā)人員就可以獲取超過20種編程語言的代碼片段柑蛇，包括 Python、Java驱闷、C 和 C++唯蝶、C#、JavaScript遗嗽、SQL粘我、PHP、Go痹换、TypeScript征字、Kotlin、MATLAB娇豫、R匙姜、Swift、Rust冯痢、Ruby氮昧、Dart 和 Scala框杜。最后，Blackbox 還提供了對(duì) Jupyter Lab & Notebooks 的支持袖肥，允許開發(fā)人員和數(shù)據(jù)科學(xué)家在構(gòu)建出色的產(chǎn)品時(shí)找到最佳的代碼片段咪辱。通過 Blackbox Chrome 擴(kuò)展，開發(fā)人員可以在行首使用注釋符號(hào)并編寫問題椎组，以立即獲得代碼建議油狂。總的來說寸癌，Blackbox 是任何想要像想法一樣快速編寫代碼的開發(fā)人員必備的擴(kuò)展专筷。?

根據(jù)需求，大家安裝對(duì)應(yīng)插件即可（安裝太多插件蒸苇，VSCode會(huì)很卡）

當(dāng)然電腦配置足夠強(qiáng)大磷蛹，當(dāng)我沒說??

修改終端顏色：

在網(wǎng)站上找到配色

https://glitchbone.github.io/vscode-base16-term/#/default-dark

替代你喜歡的配色，最后查看終端

安裝angular 需要的插件：

Angular 7 Snippets：Angular語法填充（標(biāo)簽）

Angular Files：生成Angular的文件模板（Component溪烤、Module弦聂、Pipe等等）

Angular Follow Selector：文件跳轉(zhuǎn)（Component跳轉(zhuǎn)到html、scss文件）

Angular Language Service：引用填充和跳轉(zhuǎn)到定義（html中進(jìn)行引用補(bǔ)全）

使用vscode自動(dòng)生成vue代碼模板

參考：https://www.cnblogs.com/binky/p/12672242.html

vscode右鍵打開文件

把這幾個(gè)勾上就好

vscode?總是報(bào)正在運(yùn)行“Prettier - Code formatter”格式化程序(配置)氛什。等莺葫，卸載一下vscode捺檬，重新安裝一下就好了

徹底卸載vscode：

參考：https://www.cnblogs.com/muou2125/p/10388440.html

VSCode對(duì)于Three.js的補(bǔ)全提示堡纬，vscodethree.js

1.首先烤镐，你要安裝Node.js

2.在vscode的 查看-> 集成終端中 輸入

npm install --save @types/three

3.完成后炮叶，在my.js 同級(jí)建立文件jsconfig.json空文件

4打開my.js 就有自動(dòng)補(bǔ)全了。

一些快捷鍵

參考：https://blog.csdn.net/x1037490413/article/details/86758644

修改代碼之后想找回歷史代碼怎么辦渡处？

在使用Pycharm镜悉、IDEA時(shí)可以直接查看本地歷史代碼，然后輕松恢復(fù)之前某個(gè)版本医瘫。但是侣肄，VS Code默認(rèn)是不支持local history的，所以醇份，僅憑Ctrl+z撤銷操作時(shí)不行的稼锅。何況吼具，撤銷操作是把前面步驟所有的操作都撤銷了，其中有很多是我們不需要的矩距。

但是拗盒，為VS Code配合上local history，所有問問題就迎刃而解了剩晴。

安裝這款插件之后在側(cè)邊欄會(huì)出現(xiàn)LOCAL HISTORY的字樣锣咒，每當(dāng)我們保存更改時(shí)侵状，它都會(huì)備份一份歷史文件趣兄，當(dāng)我們需要恢復(fù)之前版本時(shí)，只需要點(diǎn)擊一下對(duì)應(yīng)的文件即可鲁纠。此外，它還會(huì)在編輯框顯示對(duì)比詳情，能夠讓你對(duì)修改位置一目了然鹃觉。

VScode如何快速生成Html標(biāo)簽（Emmet的簡單使用）

參考：https://blog.csdn.net/Cloud1209/article/details/104183069

最近vscode 更新了之后偶然發(fā)現(xiàn)，折疊地代碼之后，結(jié)束的大括號(hào)沒有顯示出來抽减，而是只顯示省略號(hào)，感覺很不方便琼掠，如下圖：

參考：https://www.cnblogs.com/fxwoniu/p/13899402.html

徹底卸載 VSCode

win + r 打開運(yùn)行? ? 回車

地址欄輸入 %userprofile% 回車

刪除 .vscode 文件夾

win+R輸入%appdata%

刪除 Code 和 Visual Studio Code 文件夾

國內(nèi)下載vscode速度慢解決

找到相應(yīng)的.exe后，谷歌按ctrl+j,打開下載的文件，?復(fù)制 VScode 下載鏈接冠桃；然后在 新的窗口 粘貼鏈接污茵。將 鏈接中?http://az764295.vo.msecnd.net?替換為?http://vscode.cdn.azure.cn?就可以解決了迹蛤，

參考：https://blog.csdn.net/t1506376703/article/details/100129923?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&utm_relevant_index=1

setting sync 下載不了敌蜂，出現(xiàn)Sync: 錯(cuò)誤信息已打印在控制臺(tái) (幫助 > 切換開發(fā)人員工具)汗贫。

一般這種情況就是網(wǎng)絡(luò)問題摊唇，我試過很多次抹腿，同步是沒有問題的

VScode登錄不了Leetcode進(jìn)行刷題秒殺解決方案

參考：https://blog.csdn.net/Protinx/article/details/121025338

在VsCode中使用LeetCode插件

參考：https://blog.csdn.net/u011895157/article/details/125042359

VSCode下使用Leetcode不能提交代碼怎么辦！肩祥？

參考：https://blog.csdn.net/uzwuzw/article/details/109384848

簡單一步到位同步你的 VSCode 全部配置

參考：https://blog.csdn.net/weixin_43131046/article/details/123118022

vscode同步擴(kuò)展設(shè)置（Settings Sync）

參考:https://segmentfault.com/a/1190000021745980

settings Sync 上傳失敗

參考：http://www.reibang.com/p/f6a68d815815

vscode處理代碼合并沖突

參考：https://blog.csdn.net/weixin_47981445/article/details/124328280

vs code 出現(xiàn)html js css 注釋不正常

參考：https://blog.csdn.net/sunny327/article/details/89335911

那些你應(yīng)該考慮卸載的 VSCode 擴(kuò)展

參考：https://blog.csdn.net/weixin_32210881/article/details/112145398

vscode設(shè)置字體

參考：https://blog.csdn.net/web15185420056/article/details/123266347

1檀蹋、字體設(shè)置（ JetBrains Mono ）

管理 -> 設(shè)置

字體大小： 20

字體系列：JetBrains Mono

注：

????在 VSCode 中 “控制字體系列” 添加字體名稱 （優(yōu)先級(jí)：從左至右）

????同時(shí)還要在對(duì)應(yīng)的電腦操作系統(tǒng)中安裝字體才能生效

推薦：

????在 VSCode 中推薦使用 JetBrains Mono 編程專用字體

????JetBrains 公司最新出了一個(gè)字體 JetBrains Mono，據(jù)稱是專為改善看代碼體驗(yàn)而生

2、下載字體

????????JetBrains Mono 官方下載地址 ：https://www.jetbrains.com/lp/mono/

? ? ? ? 點(diǎn)擊?Download font?下載

3、在電腦中安裝字體

安裝

????下載后解壓蝇恶，進(jìn)到ttf 文件夾下，會(huì)有一堆文件，全選后安裝

? ? ? 所有的字體都叫 JetBrains Mono贸辈，全選安裝的目的是為了響應(yīng)各種特殊字體（比如斜體躏哩、意大利體、粗體正驻、如果不需要這些花里胡哨的只需安裝 Regular.ttf）

4伤靠、在 VSCode 中啟用查看字體

如需要 Consolas 字體：如下

windows 下 VScode 使用 Consolas 下載地址：https://www.fonts.net.cn/font-33390313417.html

VSCode 安裝教程（超詳細(xì)）

參考：https://blog.csdn.net/weixin_44950987/article/details/128129613

關(guān)于VScode每次保存/修改文件后都會(huì)自動(dòng)生成一個(gè)打包文件dist的問題

參考：https://blog.csdn.net/weixin_45249263/article/details/123232030

scss注釋不了，卸載

VsCode 中的Vetur報(bào)錯(cuò)

大概意思是找不到Vetur can't find tsconfig.json or jsconfig.json in

打鉤即可

卸載Rainbow Brackets即可