【強(qiáng)推】VSCode拓展最新匯總!

下面本篇文章給大家介紹一下常用的vscode拓展,希望對大家有所幫助!

一、拓展

名稱

簡述

Auto Close Tag

自動閉合HTML標(biāo)簽

Auto Import

import提示

Auto Rename Tag

修改HTML標(biāo)簽時,自動修改匹配的標(biāo)簽

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

展示代碼結(jié)構(gòu)樹

Code Runner

運(yùn)行選中代碼段(支持多數(shù)語言)

Code Spell checker

單詞拼寫檢查

CodeBing

快速打開Bing并搜索,可配置搜索引擎

Color Highlight

顏色值在代碼中高亮顯示

Color Info

小窗口顯示顏色值,rgb,hsl,cmyk,hex等等

Color Picker

拾色器

CSS-in-JS

CSS-in-JS高亮提示和轉(zhuǎn)換

Dash

集成Dash

Debugger for Chrome

調(diào)試Chrome

Document This

注釋文檔生成

DotENV

.env文件高亮

Edit csv

編輯CSV文件

EditorConfig for VS Code

EditorConfig插件

Emoji

在代碼中輸入emoji

endy

將輸入光標(biāo)跳轉(zhuǎn)到當(dāng)前行最后面

Error Gutters

在行號處提示錯誤代碼

ESLint

ESLint插件,高亮提示

File Peek

根據(jù)路徑字符串,快速定位到文件

filesize

狀態(tài)欄顯示當(dāng)前文件大小

Find-Jump

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

Font-awesome codes for html

FontAwesome提示代碼段

ftp-sync

同步文件到ftp

Git Blame

在狀態(tài)欄顯示當(dāng)前行的Git信息

Git File History

快速瀏覽單文件歷史提交變動

Git Graph

Git圖形化視圖,方便瀏覽和操作

Git History(git log)

查看git log

Git Tree Compare

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

gitignore

.gitignore文件語法

GitLens

顯示文件最近的commit和作者,顯示當(dāng)前行commit信息

GraphQL for vscode

graphql高亮和提示

Guides

高亮縮進(jìn)基準(zhǔn)線

Gulp Snippets

Gulp代碼段

Highlight Matching Tag

高亮匹配選中的標(biāo)簽

HTML CSS Class Completion

CSS class提示

HTML CSS Support

css提示(支持vue)

HTMLHint

HTML格式提示

htmltagwrap

快捷包裹html標(biāo)簽

htmltagwrap

包括HTML

Import Beautify

import分組、排序、格式化

Import Cost

行內(nèi)顯示導(dǎo)入(import/require)的包的大小

Indenticator

縮進(jìn)高亮

IntelliSense for css class names

css class輸入提示

JavaScript (ES6) code snippets

ES6語法代碼段

JavaScript Standard Style

Standard風(fēng)格

Jest Runner

支持執(zhí)行Jest單個測試文件或單個用例

JS Refactor

代碼重構(gòu)工具,提取函數(shù)、變量重命名等等

JSON to TS

JSON結(jié)構(gòu)轉(zhuǎn)化為typescript的interface

JSON Tools

格式化和壓縮JSON

jumpy

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

language-stylus

Stylus語法高亮和提示

Less IntelliSense

less變量與混合提示

Lodash

Lodash代碼段

Log Wrapper

生產(chǎn)打印選中變量的代碼

markdownlint

Markdown格式提示

MochaSnippets

Mocha代碼段

Node modules resolve

快速導(dǎo)航到Node模塊

npm

運(yùn)行npm命令

npm Intellisense

導(dǎo)入模塊時,提示已安裝模塊名稱

Output Colorizer

彩色輸出信息

Partial Diff

對比兩段代碼或文件

Parameter Hints

在函數(shù)調(diào)用處指示參數(shù)名稱

Path Autocomplete

路徑完成提示

Path Intellisense

另一個路徑完成提示

Polacode

將代碼生成圖片

PostCss Sorting

css排序

Prettier – Code formatter

prettier官方插件

Prettify JSON

格式化JSON

Project Manager

快速切換項(xiàng)目

Quokka.js

不需要手動運(yùn)行,行內(nèi)顯示變量結(jié)果

Rainbow CSV

CSV文件使用彩虹色渲染不同列

React Native Storybooks

storybook預(yù)覽插件,支持react

React Playground

為編輯器提供一個react組件運(yùn)行環(huán)境,方便調(diào)試

React Standard Style code snippets

react standar風(fēng)格代碼塊

REST Client

發(fā)送REST風(fēng)格的HTTP請求

Sass

sass插件

Settings Sync

VSCode設(shè)置同步到Gist

Sort lines

排序選中行

Sort Typescript Imports

typescript的import排序

String Manipulation

字符串轉(zhuǎn)換處理(駝峰、大寫開頭、下劃線等等)

stylelint

css/sass/less代碼風(fēng)格

SVG Viewer

SVG查看器

Syncing

vscode設(shè)置同步到gist

Test Spec Generator

測試用例生成(支持chai、should、jasmine)

TODO Parser

Todo管理

Todo Todo Tree

收集代碼中的TODO注釋,支持快速搜索

Toggle Quotes

切換JS中的引號,” -> ‘ -> `

TS/JS postfix completion

ts/js后綴提示

TSLint

TypeScript語法檢查

Types auto installer

自動安裝@types聲明依賴

TypeScript Hero

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

TypeScript Import

TS自動import

TypeScript Import Sorter

import整理排序

Typescript React code snippets

React Typescript代碼段

TypeSearch

TS聲明文件搜索

Version Lens

package.json文件顯示模塊當(dāng)前版本和最新版本

vetur

Vue插件

Volar

Vue插件,支持Vue3

View Node Package

快速打開選中模塊的主頁和代碼倉庫

Visual Studio IntelliCode

基于AI的代碼提示

VS Live Share

實(shí)時多人協(xié)助

VSCode Great Icons

文件圖標(biāo)拓展

vscode-database

操作數(shù)據(jù)庫,支持mysql和postgres

vscode-icons

文件圖標(biāo),方便定位文件

vscode-random

隨機(jī)字符串生成器

vscode-spotify

集成spotify,播放音樂

vscode-styled-components

styled-components高亮支持

vscode-styled-jsx

styled-jsx高亮支持

Vue Peek

支持跳轉(zhuǎn)到Vue組件定義文件

Vue TypeScript Snippets

Vue Typescript代碼段

VueHelper

Vue2代碼段(包括Vue2 api、vue-router2、vuex2)

Wallaby.js

實(shí)時測試插件

Wrap Console Log Lite

對選中代碼快速console.log

二、主題

名稱

預(yù)覽

Atom One Light Theme

@@##@@

bluloco-dark

@@##@@

bluloco-light

Enki Theme

@@##@@

eppz! (C# theme for Unity)

Eva Theme

Flat UI

@@##@@

GitHub Theme

@@##@@

Monokai Pro

New Moon VSCode

One Dark Pro

Plastic

spacegray-vscode

@@##@@

Splus

@@##@@

三、個人首選項(xiàng)配置(僅供參考)

{??"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?FilesGitcmdgit.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, }

【強(qiáng)推】VSCode拓展最新匯總!【強(qiáng)推】VSCode拓展最新匯總!【強(qiáng)推】VSCode拓展最新匯總!【強(qiáng)推】VSCode拓展最新匯總!【強(qiáng)推】VSCode拓展最新匯總!【強(qiáng)推】VSCode拓展最新匯總!【強(qiáng)推】VSCode拓展最新匯總!

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊14 分享