前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >我整理了这43个VS Code插件,Bug输出更快了

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

作者头像
德顺
发布2021-08-06 10:19:39
3.5K0
发布2021-08-06 10:19:39
举报
文章被收录于专栏:前端资源前端资源

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

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

快捷键:

代码语言:javascript
复制
打开侧边预览: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。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 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
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档