搜尋
首頁開發工具VSCode【強推】VSCode拓展最新匯總！
【強推】VSCode拓展最新匯總！
藏色散人
藏色散人
Sep 26, 2021 pm 02:59 PM
vscode

下面這篇文章跟大家介紹常用的VSCode拓展，希望對大家有幫助！

一、拓展

##Code Spell checker#單字拼字檢查快速開啟Bing並蒐索，可配置搜尋引擎Color HighlightColor InfoColor PickerCSS-in-JSDashDebugger for ChromeDocument This#GraphQL for VSCode##Guides#Gulp SnippetsHighlight Matching Tag#HTML CSS Class CompletionHTML CSS Support#HTMLHint#htmltagwrap##Todo Todo TreeToggle QuotesTS/JS postfix completion#TSLintTypes auto installerTypeScript Hero#TypeScript Import##即時測試外掛程式

姓名

簡稱

#Auto Close Tag

自動閉合HTML標籤

Auto Import

import提示

Auto Rename Tag

修改HTML標籤時，自動修改已匹配的標籤

Babel JavaScript

babel插件，語法高亮

Babelrc

.babelrc檔案高亮提示

Beautify css /sass/scss/less

css/sass/less格式化

Better Align

對齊賦值符號與註解

Better Comments

寫出更人性化的註解

Bookmarks

加入行書籤

Bracket Lens

######在閉合的括號處提示括號頭部的程式碼################## #####Bracket Pair Colorizer 2###################以不同顏色高亮顯示符合的括號############## ##########Can I Use######

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

Code Outline

展示程式碼結構樹

Code Runner

執行選取程式碼片段（支援多數語言）

#單字拼字檢查

CodeBing

快速開啟Bing並蒐索，可設定搜尋引擎

#顏色值在程式碼中高亮顯示

#小視窗顯示顏色值，rgb,hsl,cmyk,hex等等

#拾色器

#CSS-in-JS高亮提示和轉換

整合Dash

#調試Chrome

#註解文件產生

######DotENV###################.env檔高亮#############################.env檔高亮############ ############Edit csv###################編輯CSV檔######

EditorConfig for VS Code

EditorConfig外掛程式

Emoji

##endy

#將輸入遊標跳到目前行最後面

#Error Gutters

#在行號處提示錯誤代碼

ESLint

#ESLint插件，高亮提示

File Peek

#根據路徑字串，快速定位到檔案

filesize

#狀態列顯示目前檔案大小

##################Find-Jump###################快速跳到指定單字位置### #####################Font-awesome codes for html#################FontAwesome提示程式碼片段# #######################ftp-sync##################同步檔案到ftp## ######################Git Blame###################在狀態列顯示目前行的Git訊息########################Git File History##################快速瀏覽單一文件歷史提交變動########################Git Graph##################Git圖形化視圖，方便瀏覽和操作#########################Git History(git log)######

查看git log

#Git Tree Compare

Git樹形比對，查看不同分支的差異

gitignore

.gitignore檔案語法

GitLens

##顯示檔案最近的commit與作者，顯示目前行commit資訊

graphql高亮與小秘訣

高亮縮排基準線

Gulp程式碼段

高亮符合選取的標籤

CSS class提示

css提示（支援vue）

HTML格式提示

##htmltagwrap

#########快速包裹html標籤#########################htmltagwrap##############################htmltagwrap########### #######包含HTML#########################Import Beautify############################################################################## ###import分組、排序、格式化#######

Import Cost

#在行內顯示導入（import/require）的套件的大小

Indenticator

#縮排高亮

IntelliSense for css class names

css class輸入提示

JavaScript (ES6) code snippets

ES6語法程式碼片段

JavaScript Standard Style

Standard風格

Jest Runner

#支援執行Jest單一測試檔案或單一用例

JS Refactor

程式碼重構工具，擷取函數、變數重新命名等等

#JSON to TS

JSON結構轉換為typescript的interface

#JSON Tools

格式化與壓縮JSON

#jumpy

快速跳到指定單字位置

#language-stylus

Stylus語法高亮與提示

#Less IntelliSense

##less變數與混合提示

#Lodash

Lodash程式碼片段

Log Wrapper#

生產列印選取變數的程式碼

#markdownlint

Markdown格式提示

#MochaSnippets

Mocha程式碼片段

#Node modules resolve

快速導覽至Node模組

#npm

執行npm指令

npm Intellisense

匯入模組時，提示已安裝模組名稱

#Output Colorizer

彩色輸出訊息

#Partial Diff

比較兩段程式碼或檔案

#Parameter Hints

#在函數呼叫處指示參數名稱

#Path Autocomplete

##########################Path Autocomplete################# #路徑完成提示########################Path Intellisense##################另一個路徑完成提示########################Polacode######################Polacode##################將程式碼產生圖片########################PostCss Sorting##################css排序######### ####################Prettier - Code formatter##################prettier官方外掛###### #

Prettify JSON

#格式化JSON

Project Manager

#快速切換專案

Quokka.js

#不需要手動執行，行內顯示變數結果

Rainbow CSV

#CSV檔案使用彩虹色渲染不同欄位

React Native Storybooks

#storybook預覽插件，支援react

#React Playground

#為編輯器提供一個react元件運行環境，方便調試

React Standard Style code snippets

react standar風格程式碼區塊

REST Client

發送REST風格的HTTP請求

Sass

sass外掛

Settings Sync

VSCode設定同步到Gist

Sort lines

排序選取行

Sort Typescript Imports

typescript的import排序

#String Manipulation

#字串轉換處理（駝峰、大寫開頭、底線等等）

stylelint

#css/sass/less程式碼風格

SVG Viewer

#SVG檢視器

Syncing

#vscode設定同步到gist

Test Spec Generator

#測試案例產生（支援chai、should、jasmine）

#TODO Parser

#Todo管理

#收集程式碼中的TODO註釋，支援快速搜尋

#切換JS中的引號，" -> ' -> `

#ts/js後綴提示

TypeScript語法檢查

##自動安裝@types聲明依賴

TypeScript輔助插件，管理import、outline等等

##TS自動import

##################TypeScript Import Sorter################# import整理排序########################Typescript React code snippets######

React Typescript程式碼片段

#TypeSearch

TS宣告檔搜尋

#Version Lens

package.json檔案顯示模組目前版本和最新版本

vetur

Vue外掛

Volar

##Volar

Vue插件，支援Vue3

#View Node Package

##快速開啟選取模組的主頁和程式碼倉庫

#Visual Studio IntelliCode

#基於AI的程式碼提示

####VS Live Share######### ##########即時多人協助########################VSCode Great Icons###################VSCode Great Icons######### #########檔案圖示拓展#########################vscode-database########### #######操作資料庫，支援mysql和postgres#########################vscode-icons######### #########檔案圖標，方便定位檔案#########################vscode-random######## ##########隨機字串產生器#########################vscode-spotify######## ##########整合spotify，播放音樂########################vscode-styled-components####### ############styled-components高亮支援######

vscode-styled-jsx

styled-jsx高亮支援

Vue Peek

#支援跳到Vue元件定義檔

Vue TypeScript Snippets

Vue Typescript程式碼片段

VueHelper

#Vue2程式碼片段（包括Vue2 api、vue -router2、vuex2）

#Wallaby.js

###############Wrap Console Log Lite#################對選取程式碼快速console.log##################

二、主題

Enki Theme


#名稱

#預覽

Atom One Light Theme
【強推】VSCode拓展最新匯總！

#bluloco-dark
【強推】VSCode拓展最新匯總！


##bluloco-light
【強推】VSCode拓展最新匯總！


【強推】VSCode拓展最新匯總！
##eppz! (C# theme for Unity)
【強推】VSCode拓展最新匯總！
#######Eva Theme################# ################Flat UI################################# #######GitHub Theme######################

Monokai Pro

New Moon VSCode

One Dark Pro

Plastic

spacegray-vscode
【強推】VSCode拓展最新匯總！

Splus
【強推】VSCode拓展最新匯總！

三、个人首选项配置（仅供参考）

{  "breadcrumbs.enabled": true,  "editor.tabSize": 2,  "editor.renderWhitespace": "boundary",  "editor.cursorBlinking": "smooth",  "editor.minimap.renderCharacters": false,  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",  "editor.fontLigatures": true,  "explorer.confirmDragAndDrop": false,  "extensions.autoUpdate": false,  "files.insertFinalNewline": true,  "git.autofetch": true,  "git.path": "F:\\Program Files\\Git\\cmd\\git.exe",  "search.exclude": {    "**/node_modules": true,    "**/dist": true
  },  "typescript.locale": "en",  "window.titleBarStyle": "custom",  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",  "window.zoomLevel": 1,  "workbench.activityBar.visible": true,  "workbench.colorTheme": "Plastic - deprioritised punctuation",  "workbench.iconTheme": "vscode-great-icons",  "workbench.startupEditor": "newUntitledFile",  "eslint.autoFixOnSave": true,  "eslint.validate": ["javascript", "javascriptreact", "vue"],  "vsicons.projectDetection.autoReload": true,  "vsicons.dontShowNewVersionMessage": true,  "tslint.autoFixOnSave": true,  "debugwrapper.wrappers": {    "default": "console.log('$eSEL', $SEL)"
  },  "prettier.tslintIntegration": true,  "cSpell.userWords": [    "Unmount"
  ],  "jest.autoEnable": false,
}

以上是【強推】VSCode拓展最新匯總！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文轉載於：toutiao。如有侵權，請聯絡admin@php.cn刪除
相關文章
手把手带你会习VSCode debug，不信你还不会！手把手带你会习VSCode debug，不信你还不会！Mar 31, 2022 pm 08:45 PM

2022年了，该学会用VSCode debug了！下面本篇文章手把手带大家会习VSCode debug，希望对大家有所帮助！

浅析VSCode怎么关闭自动更新浅析VSCode怎么关闭自动更新Jun 02, 2022 pm 12:56 PM

VSCode怎么关闭自动更新？下面本篇文章给大家介绍一下VSCode关闭自动更新的方法，希望对大家有所帮助！

手把手带你在VSCode中配置 Geant4 和 Root手把手带你在VSCode中配置 Geant4 和 RootApr 25, 2022 pm 08:57 PM

本篇是VSCode配置文章，手把手教大家怎么在VSCode​中配置使用 Geant4 和 Root，希望对大家有所帮助！

23个提高开发效率的前端VSCode插件（快来收藏）23个提高开发效率的前端VSCode插件（快来收藏）Jul 25, 2022 pm 08:06 PM

本篇文章给大家分享23个前端VSCode插件，助你提高开发效率，让你事半功倍，快来收藏吧！

扒一扒vscode Prettier选项中的16个实用属性，让代码变美！扒一扒vscode Prettier选项中的16个实用属性，让代码变美！May 03, 2022 am 10:00 AM

本篇文章扒拉一下vscode Prettier的选项，总结分享16个让你的代码变漂亮的属性，希望对大家有所帮助！

总结分享12个好玩有趣的 VSCODE 插件总结分享12个好玩有趣的 VSCODE 插件May 27, 2022 am 11:06 AM

“工欲善其事，必先利其器！”，vscode作为前端开发的重要工具，其插件能大幅提升战斗力，精心收集12个插件，总有几款你还未曾拥有。

VSCode中如何开发uni-app？（教程分享）VSCode中如何开发uni-app？（教程分享）May 13, 2022 pm 08:11 PM

VSCode中如何开发uni-app？下面本篇文章给大家分享一下VSCode中开发uni-app的教程，这可能是最好、最详细的教程了。快来看看！

手把手教你在VScode中配置C/C++环境（Win下）手把手教你在VScode中配置C/C++环境（Win下）Oct 10, 2022 pm 06:52 PM

VScode中怎么开发置C/C++？怎么配置C/C++环境？下面本篇文章给大家分享一下Windows系统下VScode配置C/C++环境图文教程，希望对大家有所帮助！

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前ByDDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前ByDDD
顯示更多

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

EditPlus 中文破解版

EditPlus 中文破解版

體積小，語法高亮，不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7333
9
Java教學
1627
14
CakePHP 教程
1351
46
Laravel 教程
1262
25
PHP教程
1209
29
顯示更多