工作之余，我整理了这 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输出更快了
原创文章，作者：1402239773，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/228522.html