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

1120 人阅读 | 时间：2021年08月08日 16:46

工作之余，我整理了这 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

启用 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 文预览。

快捷键：

打开侧边预览：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。

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

Auto Close Tag

Auto Import

Auto Rename Tag

Bracket Pair Colorizer

Code Runner

Code Spell Checker

Color Highlight

ESLint

filesize

GitLens — Git supercharged

HTML CSS Support

IntelliSense for CSS class names in HTML

JavaScript (ES6) code snippets

JavaScript and TypeScript Nightly

JetBrains IDE Keymap

json2ts

koroFileHeader

LeetCode

Local History

Markdown Preview Enhanced

Material Icon Theme

Material Theme

Material Theme Icons

minapp

Mithril Emmet

npm

npm Intellisense

One Dark Pro

Path Intellisense

Prettier - Code formatter

Quokka.js

React Hooks Snippets

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

Simple React Snippets

Sublime Material Theme

TODO Highlight

Typescript React code snippets

uni-app-snippets

Vetur

vscode-pdf

Vue 3 Snippets

wechat-snippet

yarn

评论专区

相关文章

搜索

作者介绍

30天热门

热评文章

最近发表

标签列表