搜尋

首頁  >  文章  >  開發工具  >  【強推】VSCode拓展最新匯總！

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

藏色散人
藏色散人轉載
2021-09-26 14:59:283260瀏覽

下面這篇文章跟大家介紹常用的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.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼下一篇：怎麼使用 VSCode 來偵錯瀏覽器上的 JS 程式碼

相關文章

看更多