我整理了这43个VS Code插件，Bug输出更快了
我整理了这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]/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */ 以支持 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
切换侧边栏目录：ESCMaterial 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。
腾讯云开发者
