工作之余，我整理了近50个 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 类名补全。
Import Cost
依赖包大小显示。
JavaScript (ES6) code snippets
用于 VS Code 编辑器中 ES6 语法的 JavaScript 代码补全（同时也支持 TypeScript）。
JavaScript and TypeScript Nightly
启用 typescript@next 以支持 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 文预览。
快捷键：
代码语言：javascript复制打开侧边预览：ctrl-k v
打开预览：ctrl-shift-v
同步预览/同步源：ctrl-shift-s
运行代码块：shift-enter
运行所有代码块：Ctrl-Shift-Enter
预览放大：Ctrl-shift-=
预览缩小：Ctrl-shift-_
预览重置缩放：Ctrl-0
切换侧边栏目录：ESCMarkdown Preview Github Styling
以 GitHub 风格预览 Markdown 样式。
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
自动补全文件名。
Polacode-2020：生成代码截图
可以把代码片段保存成美观的图片。
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 代码片段扩展。
WakaTime
统计在 VS Code 里写代码的时间。
wechat-snippet
微信小程序代码辅助，代码片段自动补全。
yarn
在 VS Code 中使用 yarn。
未经允许不得转载：w3h5-Web前端开发资源网 » 我整理了近50个VS Code插件，Bug输出更快了
