我整理了近50个VS Code插件,Bug输出更快了

工作之余,我整理了近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 标签的 idclass 属性。

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

快捷键:

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

Markdown 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 代码片段自动补全。

支持的代码段:

PrefixSnippet
ushuseState
uehuseEffect
uchuseContext
ucbhuseCallback
umhuseMemo
irhimport React (and common hooks)
urhuseRef
urdhuseReducer
irrhimport react redux hooks
ussuseSelector
usdfuseDispatch
usdthen 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 代码片段自动补全。

支持的代码段:

SnippetRenders
imrImport React
imrcImport React / Component
imrsImport React / useState
imrseImport React / useState useEffect
imptImport PropTypes
impcImport React / PureComponent
ccClass Component
cccClass Component With Constructor
cpcClass Pure Component
sfcStateless Function Component
cdmcomponentDidMount
uefuseEffect Hook
cwmcomponentWillMount
cwrpcomponentWillReceiveProps
gdsgetDerivedStateFromProps
scushouldComponentUpdate
cwucomponentWillUpdate
cducomponentDidUpdate
cwucomponentWillUpdate
cdccomponentDidCatch
gsbugetSnapshotBeforeUpdate
sssetState
ssfFunctional setState
usfDeclare a new state variable using State Hook
renrender
rpropRender Prop
hocHigher Order Component

Sublime Material Theme

Sublime Text Material 主题。

TODO Highlight

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

Typescript React code snippets

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

支持的代码段:

TriggerContent
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
tsrpfcpure function component skeleton
tsdrpfcstateless functional component with default export
tsrsfcstateless 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
gsbugetSnapshotBeforeUpdate 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
imtcreate 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 » 我整理了近50个VS Code插件,Bug输出更快了

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)