基礎通用插件
Chinese
vscode編輯器漢化包,安裝后,在 locale.json 中添加 "locale": "zh-cn",即可載入中文(簡體)語言包,
Auto Rename Tag
自動重命名成對的HTML標記,修改開始標簽,結束標簽會同步修改
HTML Snippets
HTML 代碼片段,該插件可為你提供 html 標簽的代碼提示,不用鍵入尖括號了
Bracket Pair Colorizer
該插件可以為你把成對的括號做顏色區分,并且提供一根連接線,方便我們審閱代碼結構,
通過修改組態檔,使得結構線高亮,食用更佳
"workbench.colorCustomizations": {
"editorIndentGuide.activeBackground": "#00ffea"
},
CSS Peek
css 樣式查看器,可快速查看我們的 css 樣式,非常方便快捷
Npm Intellisense
可自動完成匯入陳述句中的 npm 模塊
open in browser
快速打開html檔案到瀏覽器預覽
vscode-icons
提供了非常漂亮的目錄樹圖示主題
Auto Close Tag
自動閉合HTML/XML標簽
Path Intellisense
自動提示檔案路徑,支持各種快速引入檔案
Image preview
滑鼠懸浮在鏈接上可及時預覽圖片
Beautify
在代碼檔案右鍵滑鼠一鍵格式化 html,js,css
JavaScript (ES6) code snippets
ES6 語法智能提示,以及快速輸入
Vetur
VScode官方欽定 Vue 插件,Vue開發者必備,內含語法高亮,智能提示,emmet,錯誤提示,格式化,自動補全,debugger等實用功能
代碼風格規范類插件
ESlint
規范 js 代碼書寫規則,如果覺得太過嚴謹,可自定義規則
TSLint
ts 的書寫規范,這個插件是一個系列,同時還提供了TSLint (deprecated),TSLint Vue,TSLint Vue-TSX
Code Spell Checker
是拼寫檢查程式,檢查不常見的單詞,如果單詞拼寫錯誤,會給出警告提示
koroFileHeader
在vscode中用于生成檔案頭部注釋和函式注釋的插件,經過多版迭代后,插件:支持所有主流語言, 功能強大,靈活方便,檔案齊全,食用簡單!
不光如此,還能生成一些特別有意思的注釋,比如這一條噴火龍...
![]()
Better Align
代碼書寫的整潔,工整往往是衡量一個程式員素養的標準,這款插件可以讓你的代碼更排版優雅
選中代碼配合組合鍵[Ctrl+Shift+p],輸入Align即可
、
change-case
通常我們對一個變數的命名可能是駝峰,可能是全大寫,又或是下劃線,這里可通過這個插件解決變數命名規范的問題
選中變數配合組合鍵[Ctrl+Shift+p],輸入對應格式即可

基礎通用插件
Chinese
vscode編輯器漢化包,安裝后,在 locale.json 中添加 "locale": "zh-cn",即可載入中文(簡體)語言包,
Auto Rename Tag
自動重命名成對的HTML標記,修改開始標簽,結束標簽會同步修改
HTML Snippets
HTML 代碼片段,該插件可為你提供 html 標簽的代碼提示,不用鍵入尖括號了
Bracket Pair Colorizer
該插件可以為你把成對的括號做顏色區分,并且提供一根連接線,方便我們審閱代碼結構,
通過修改組態檔,使得結構線高亮,食用更佳
"workbench.colorCustomizations": {
"editorIndentGuide.activeBackground": "#00ffea"
},
CSS Peek
css 樣式查看器,可快速查看我們的 css 樣式,非常方便快捷
Npm Intellisense
可自動完成匯入陳述句中的 npm 模塊
open in browser
快速打開html檔案到瀏覽器預覽
vscode-icons
提供了非常漂亮的目錄樹圖示主題
Auto Close Tag
自動閉合HTML/XML標簽
Path Intellisense
自動提示檔案路徑,支持各種快速引入檔案
Image preview
滑鼠懸浮在鏈接上可及時預覽圖片
Beautify
在代碼檔案右鍵滑鼠一鍵格式化 html,js,css
JavaScript (ES6) code snippets
ES6 語法智能提示,以及快速輸入
Vetur
VScode官方欽定 Vue 插件,Vue開發者必備,內含語法高亮,智能提示,emmet,錯誤提示,格式化,自動補全,debugger等實用功能
代碼風格規范類插件
ESlint
規范 js 代碼書寫規則,如果覺得太過嚴謹,可自定義規則
TSLint
ts 的書寫規范,這個插件是一個系列,同時還提供了TSLint (deprecated),TSLint Vue,TSLint Vue-TSX
Code Spell Checker
是拼寫檢查程式,檢查不常見的單詞,如果單詞拼寫錯誤,會給出警告提示
koroFileHeader
在vscode中用于生成檔案頭部注釋和函式注釋的插件,經過多版迭代后,插件:支持所有主流語言, 功能強大,靈活方便,檔案齊全,食用簡單!
不光如此,還能生成一些特別有意思的注釋,比如這一條噴火龍...
![]()
Better Align
代碼書寫的整潔,工整往往是衡量一個程式員素養的標準,這款插件可以讓你的代碼更排版優雅
選中代碼配合組合鍵[Ctrl+Shift+p],輸入Align即可
、
change-case
通常我們對一個變數的命名可能是駝峰,可能是全大寫,又或是下劃線,這里可通過這個插件解決變數命名規范的問題
選中變數配合組合鍵[Ctrl+Shift+p],輸入對應格式即可

extension.changeCase.commands:列出所有“更改案例”命令,如果僅選擇一個單詞,則帶有預覽
extension.changeCase.camel:更改大小寫'camel':轉換為字串,并用下一個字母大寫表示分隔符
extension.changeCase.constant:更改大小寫“常量”:轉換為大寫字母,下劃線分隔字串
extension.changeCase.dot:更改大小寫的“點”:轉換為小寫,句點分隔的字串
extension.changeCase.kebab:更改大小寫“ kebab”:轉換為小寫字母,用破折號分隔的字串(引數名的別名)
extension.changeCase.lower:更改大小寫為“小寫”:轉換為小寫的字串
extension.changeCase.lowerFirst:更改大小寫“ lowerFirst”:轉換為首字母小寫的字串
extension.changeCase.no:轉換沒有任何大小寫的字串(小寫字母,空格分隔)
extension.changeCase.param:更改大小寫為'param':轉換為小寫字母,用破折號分隔的字串
extension.changeCase.pascal:更改大小寫“ pascal”:轉換為以與camelCase相同的方式表示的字串,但首字母也大寫
extension.changeCase.path:更改大小寫的“路徑”:轉換為小寫,用斜杠分隔的字串
extension.changeCase.sentence:更改大小寫的“句子”:轉換為小寫的空格分隔的字串
extension.changeCase.snake:更改大小寫“ snake”:轉換為小寫字母,下劃線分隔字串
extension.changeCase.swap:更改大小寫“交換”:轉換為每個大小寫相反的字串
extension.changeCase.title:更改大小寫“標題”:轉換為以空格分隔的字串,每個單詞的第一個字符均大寫
extension.changeCase.upper:更改大小寫為大寫:轉換為大寫字串
extension.changeCase.upperFirst:更改大小寫為“ upperFirst”:轉換為首字母大寫的字串
Better Comments
這款插件可以豐富注釋顏色,讓注釋也具有生命力,如需自定義樣式,需要寫入配置代碼
配置代碼
"better-comments.tags": [
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"backgroundColor": "transparent"
}
]
使用
// * 綠色的高亮注釋
TODO Tree
我們經常會在代碼中使用TODO來標記我們的代碼,提高可讀性,TODO Tree這款插件提供了可視化視窗來查看和管理我們的TODO Tree
![]()
GitLens
GitLens可以幫助您更好地理解代碼,快速查看更改行或代碼塊的物件,功能強大,功能豐富且高度可定制,可以滿足您的需求![]()
GitHistory
GitHistory可查看和搜索 git 日志以及圖形和詳細資訊,同時還支持分支比較,分支管理等操作,非常方便
其他插件(神器)
Partial Diff
檔案比較是一個很常見的場景,如果光憑我們肉眼分別的話,累人不說還容易出錯,Partial Diff的出現就正好解決了這個問題

Markdown All in One
這款神器可以讓我們在vscode里面快樂的書寫Markdown,功能強大,提供了豐富的快捷鍵,可邊寫邊看,輕松轉化為html或pdf檔案,十分好用,強烈推薦
![]()
vscode-drawio
這款神器可以讓我們在vscode里面快樂的畫流程圖,新建 .drawio 后綴檔案并拖入 vscode 中, 即可得到如下界面👇
![]()
Polacode-2020
這款神器可以將我們的代碼轉化成一張逼格滿滿的圖片,在寫文章或者代碼分享的時候,拋出一張這樣的圖片,可比隨手截圖體面多了

REST Client
這款神器可以讓我們在vscode里面進行介面除錯,提供豐富的 api 配置方式,讓我們不用離開編輯器也可以隨時呼叫介面除錯
新建一個.http檔案,寫下基本的測驗代碼,點擊 Send Request即可在右邊視窗查看介面回傳結果,非常 nice,強烈推薦
更多的使用配置,可查看官方檔案[](https://marketplace.visualstudio.com/items?item>傳送門 <img class=)
[
Browser Preview
這款神器可以讓我們在vscode里面打開瀏覽器,一邊編碼一邊查看,偶爾也可以用來摸魚,非常人性,強烈推薦

JavaScript Booster
這款神器可以在我們代碼寫的不規范或者有待調整的地方,在游標聚焦后,會有一個小燈泡,會提示對應的不合理原因和改進方案,極大的提高了我們的代碼優雅度,強烈推薦
讓您的生活更輕松,使用代碼操作為您執行重復性任務!他們可以提供很多幫助,只需跟隨燈泡💡!
當在JavaScript(或TypeScript / Flow)中編輯代碼時,此VS Code擴展提供了各種代碼操作(快速修復),只需注意左側的燈泡,然后按一下它即可了解如何在游標下轉換代碼,

Settings Sync
這款神器可以讓我們的vscode配置同步到云端,當我們跟換電腦或者再次安裝vscode的時候,只需要登錄賬號即可同步配置了,而不用再次從頭開始,簡直不要太香了,強烈推薦

Live Share
這款神器可以使您能夠與他人實時進行協作式編輯和除錯,無論您使用的是哪種編程語言或正在構建的應用程式型別,什么意思呢?就是可以多人同時編輯一份代碼,差不多有點代碼共享的意思,不得不說,這款神器就太了不起了,強烈強烈強烈推薦,
搬用官網上的描述
Visual Studio Live Share使您能夠與他人實時進行協作式編輯和除錯,無論您使用的是哪種編程語言或正在構建的應用程式型別,它使您可以立即(安全地)共享當前專案,然后根據需要共享除錯會話,終端實體,localhost Web應用程式,語音呼叫等!加入您的會話的開發人員會從您的環境(例如語言服務,除錯)中獲得所有編輯器背景關系,從而確保他們可以立即開始進行高效的協作,而無需克隆任何存盤庫或安裝任何SDK,
另外,與傳統的成對編程不同,Visual Studio Live Share使開發人員可以一起作業,同時保留其個人編輯器的首選項(例如主題,鍵系結)以及自己的游標,這樣,您就可以在彼此之間無縫過渡,并能夠自己探索想法 / 任務,在實踐中,這種能力一起作業,并獨立地提供了一個合作的經驗,是可能有更多的自然常見的用例,

Better Comments
這款插件可以豐富注釋顏色,讓注釋也具有生命力,如需自定義樣式,需要寫入配置代碼
配置代碼
"better-comments.tags": [
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"backgroundColor": "transparent"
}
]
使用
// * 綠色的高亮注釋
TODO Tree
我們經常會在代碼中使用TODO來標記我們的代碼,提高可讀性,TODO Tree這款插件提供了可視化視窗來查看和管理我們的TODO Tree
![]()
GitLens
GitLens可以幫助您更好地理解代碼,快速查看更改行或代碼塊的物件,功能強大,功能豐富且高度可定制,可以滿足您的需求![]()
GitHistory
GitHistory可查看和搜索 git 日志以及圖形和詳細資訊,同時還支持分支比較,分支管理等操作,非常方便
其他插件(神器)
Partial Diff
檔案比較是一個很常見的場景,如果光憑我們肉眼分別的話,累人不說還容易出錯,Partial Diff的出現就正好解決了這個問題

Markdown All in One
這款神器可以讓我們在vscode里面快樂的書寫Markdown,功能強大,提供了豐富的快捷鍵,可邊寫邊看,輕松轉化為html或pdf檔案,十分好用,強烈推薦
![]()
vscode-drawio
這款神器可以讓我們在vscode里面快樂的畫流程圖,新建 .drawio 后綴檔案并拖入 vscode 中, 即可得到如下界面👇
![]()
Polacode-2020
這款神器可以將我們的代碼轉化成一張逼格滿滿的圖片,在寫文章或者代碼分享的時候,拋出一張這樣的圖片,可比隨手截圖體面多了

REST Client
這款神器可以讓我們在vscode里面進行介面除錯,提供豐富的 api 配置方式,讓我們不用離開編輯器也可以隨時呼叫介面除錯
新建一個.http檔案,寫下基本的測驗代碼,點擊 Send Request即可在右邊視窗查看介面回傳結果,非常 nice,強烈推薦
更多的使用配置,可查看官方檔案[](https://marketplace.visualstudio.com/items?item>傳送門 <img class=)
[
Browser Preview
這款神器可以讓我們在vscode里面打開瀏覽器,一邊編碼一邊查看,偶爾也可以用來摸魚,非常人性,強烈推薦

JavaScript Booster
這款神器可以在我們代碼寫的不規范或者有待調整的地方,在游標聚焦后,會有一個小燈泡,會提示對應的不合理原因和改進方案,極大的提高了我們的代碼優雅度,強烈推薦
讓您的生活更輕松,使用代碼操作為您執行重復性任務!他們可以提供很多幫助,只需跟隨燈泡💡!
當在JavaScript(或TypeScript / Flow)中編輯代碼時,此VS Code擴展提供了各種代碼操作(快速修復),只需注意左側的燈泡,然后按一下它即可了解如何在游標下轉換代碼,

Settings Sync
這款神器可以讓我們的vscode配置同步到云端,當我們跟換電腦或者再次安裝vscode的時候,只需要登錄賬號即可同步配置了,而不用再次從頭開始,簡直不要太香了,強烈推薦

Live Share
這款神器可以使您能夠與他人實時進行協作式編輯和除錯,無論您使用的是哪種編程語言或正在構建的應用程式型別,什么意思呢?就是可以多人同時編輯一份代碼,差不多有點代碼共享的意思,不得不說,這款神器就太了不起了,強烈強烈強烈推薦,
搬用官網上的描述
Visual Studio Live Share使您能夠與他人實時進行協作式編輯和除錯,無論您使用的是哪種編程語言或正在構建的應用程式型別,它使您可以立即(安全地)共享當前專案,然后根據需要共享除錯會話,終端實體,localhost Web應用程式,語音呼叫等!加入您的會話的開發人員會從您的環境(例如語言服務,除錯)中獲得所有編輯器背景關系,從而確保他們可以立即開始進行高效的協作,而無需克隆任何存盤庫或安裝任何SDK,
另外,與傳統的成對編程不同,Visual Studio Live Share使開發人員可以一起作業,同時保留其個人編輯器的首選項(例如主題,鍵系結)以及自己的游標,這樣,您就可以在彼此之間無縫過渡,并能夠自己探索想法 / 任務,在實踐中,這種能力一起作業,并獨立地提供了一個合作的經驗,是可能有更多的自然常見的用例,

參考資料:https://mp.weixin.qq.com/s/b0JuGhpLYvU1Wj98K2UerA
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/262571.html
標籤:其他
