我整理了这43个VS Code插件，Bug输出更快了

工作之余，我整理了这 40 多个 VS Code 插件，其中有一部分已经内置了，但不知道他们是用来干啥的。

通过这篇文章，可以大致知道这些插件的作用，用不到的可以把他们移除， VS Code 变得更快了。

Auto Close Tag

自动添加 HTML/XML 结束标记，与 Visual Studio IDE 或 Sublime Text 类似。

Auto Import

自动查找、解析并提供所有可用导入的代码操作，适用于 Typescript 和 TSX。

Auto Rename Tag

自动重命名配对的 HTML/XML 标签，与 Visual Studio IDE  类似。

修改开始标签时，自动修改结束标签。

Bracket Pair Colorizer

自动匹配括号（()、[]、{}）着色，便于区分代码块，增强可读性。

Code Runner

在编辑器中运行代码。

Code Spell Checker

自动捕获常见的（单词）拼写错误，同时降低误报，适用于驼峰式代码。

Color Highlight

自动高亮 CSS 颜色。

ESLint

将 ESLint 集成到 VS Code 中。如果您是 ESLint 的新手，请查看文档。

filesize

在状态栏中显示当前文件大小。

GitLens — Git supercharged

增强 VS Code 中内置的 Git 功能，自动显示 Git 注释和代码镜头，可视化代码作者，无缝导航和探索 Git 存储库等。

HTML CSS Support

自动完成 HTML 标签的 id 和 class 属性。

IntelliSense for CSS class names in HTML

基于工作区进行 CSS 类名补全。

JavaScript (ES6) code snippets

用于 VS Code 编辑器中 ES6 语法的 JavaScript 代码补全（同时也支持 TypeScript）。

JavaScript and TypeScript Nightly

启用 [email protected] 以支持 VS Code 内置 JavaScript 和 TypeScript 支持，代码自动补全。

JetBrains IDE Keymap

用于 VS Code 的 JetBrains IDE 键盘快捷键映射。

json2ts

将剪贴板中的 JSON 转换为 TypeScript 接口。

使用 Ctrl+Alt+V 快捷键，将复制的 JSON 转换为 TypeScript 接口（支持 URL 中的 JSON）。

koroFileHeader

自动生成文件头部注释和函数注释。

LeetCode

LeetCode 在 VS Code 中刷题。

Local History

文件本地历史记录。

Markdown Preview Enhanced

.md 文预览。

快捷键：

打开侧边预览：ctrl-k v
打开预览：ctrl-shift-v
同步预览/同步源：ctrl-shift-s
运行代码块：shift-enter
运行所有代码块：Ctrl-Shift-Enter
预览放大：Ctrl-shift-=
预览缩小：Ctrl-shift-_
预览重置缩放：Ctrl-0
切换侧边栏目录：ESC

Material Icon Theme

Visual Studio Code 的 Material Design 图标，目录/文件图标等。

Material Theme

Material 主题。

Material Theme Icons

Material 主题图标。

minapp

微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）。

Mithril Emmet

Mithril 的 Emmet(zen-coding) 语法支持。

npm

VS Code 的 npm 支持。

npm Intellisense

编码时自动提示导入语句中的 npm 模块。

One Dark Pro

Atom 为 Visual Studio Code 设计的标志性 One Dark 主题。

Path Intellisense

自动补全文件名。

Prettier – Code formatter

Prettier 是一个固执的代码格式化程序。通过解析代码，使用自己的规则重新格式化，强制统一的样式，规则包括最大行长度。

Quokka.js

Quokka 是一个调试工具，可以为您正在编写的代码提供实时反馈。它能够预览变量的函数和计算值结果。该扩展易于配置，对于使用 JSX 或 TypeScript 的项目可直接使用。

React Hooks Snippets

React Hooks 代码片段自动补全。

支持的代码段：

Prefix	Snippet
ush	useState
ueh	useEffect
uch	useContext
ucbh	useCallback
umh	useMemo
irh	import React (and common hooks)
urh	useRef
urdh	useReducer
irrh	import react redux hooks
uss	useSelector
usdf	useDispatch
usd	then use your dispatch

Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro

无需使用构建任务即可轻松编译 ts、tsx、scss、less、stylus、jade、pug 和 es6+。

Simple React Snippets

React 代码片段自动补全。

支持的代码段：

Snippet	Renders
imr	Import React
imrc	Import React / Component
imrs	Import React / useState
imrse	Import React / useState useEffect
impt	Import PropTypes
impc	Import React / PureComponent
cc	Class Component
ccc	Class Component With Constructor
cpc	Class Pure Component
sfc	Stateless Function Component
cdm	componentDidMount
uef	useEffect Hook
cwm	componentWillMount
cwrp	componentWillReceiveProps
gds	getDerivedStateFromProps
scu	shouldComponentUpdate
cwu	componentWillUpdate
cdu	componentDidUpdate
cwu	componentWillUpdate
cdc	componentDidCatch
gsbu	getSnapshotBeforeUpdate
ss	setState
ssf	Functional setState
usf	Declare a new state variable using State Hook
ren	render
rprop	Render Prop
hoc	Higher Order Component

Sublime Material Theme

Sublime Text Material 主题。

TODO Highlight

突出显示 TODO，FIXME 的代码注释。

Typescript React code snippets

React & TypeScript 代码片段自动补全。

支持的代码段：

Trigger	Content
tsrcc→	class component skeleton
tsrcfull→	class component skeleton with Props, State, and constructor
tsrcjc→	class component skeleton without import and default export lines
tsrpcc→	class purecomponent skeleton
tsrpcjc→	class purecomponent without import and default export lines
tsrpfc	pure function component skeleton
tsdrpfc	stateless functional component with default export
tsrsfc	stateless functional component
conc→	class default constructor with props and context
cwm→	componentWillMount method
ren→	render method
cdm→	componentDidMount method
cwrp→	componentWillReceiveProps method
scu→	shouldComponentUpdate method
cwu→	componentWillUpdate method
cdu→	componentDidUpdate method
cwum→	componentWillUnmount method
gdsfp→	getDerivedStateFromProps method
gsbu	getSnapshotBeforeUpdate method
sst→	this.setState with object as parameter
bnd→	binds the this of method inside the constructor
met→	simple method
tscntr→	react redux container skeleton
imt	create a import

uni-app-snippets

uni-app 代码片段。

Vetur

用于 VS Code 的 Vue 工具。

vscode-pdf

在 VSCode 中显示 pdf 文件。

Vue 3 Snippets

Vue.js 3 和 Vue.js 2 代码片段扩展。

wechat-snippet

微信小程序代码辅助，代码片段自动补全。

yarn

在 VS Code 中使用 yarn。

未经允许不得转载：w3h5 » 我整理了这43个VS Code插件，Bug输出更快了