VSCode实用插件

2021/4/16 VSCode

TIPS

推荐一些 VSCode 实用的插件,主要是前端,VueJavaScript

image-default
debian001
util help to convert app project into other types
支持 wxss wxml等小程序开发文件语法提示
image-default
stevencl
Adds jsdoc @param and @return tags for selected function signatures in JS and TS
在 JS 或者 TS 中选中一个函数,按F1,输入 Add Doc Comments,然后回车,自动生成函数注释(好像在函数的前一行输入 /** 然后回车也可以)
image-default
Jun Han
Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
手敲标签的时候,可以自动闭合标签
image-default
Jun Han
Auto rename paired HTML/XML tag
带闭合的标签,修改了开标签的名字,自动修改闭合标签名字
image-default
Microsoft
适用于 VS Code 的中文(简体)语言包
Ctrl + Shift + P , 再输入 Configure Display Language 选择语言
image-default
Jun Han
Run C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, and custom command
右键可以执行对应的文件
image-default
Microsoft
Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
Chrome 调试
image-default
oouo-diogo-perdigao
Automatically generates detailed JSDoc comments in TypeScript and JavaScript files.
生成更详细的函数注释,Ctrl+Alt+D Ctrl+Alt+D 或者输入 /**
image-default
Dirk Baeumer
Integrates ESLint JavaScript into VS Code.
编辑器里面 ESLint 检测,根据其他配置可保存时自动格式化
image-default
Don Jayamanne
View git log, file history, compare branches or commits
在编辑器里面查看git提交记录
image-default
Eric Amodio
Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
在代码行上可以看到作者以及提交日期
image-default
dakshmiglani
Hex-to-RGBA Allows designers to convert selected Hex Code to RGBA on VSCode easily.
To RGBA:Windows/Linux: ctrl-alt-r MacOS: cmd-alt-r;To HEX:Windows/Linux: ctrl-alt-h MacOS: cmd-alt-h;Toggle:Windows/Linux: ctrl-shift-t MacOS: ctrl-shift-t
image-default
ecmel
CSS Intellisense for HTML
CSS 的扩展
image-default
Mohamed Abusaid
Full HTML tags including HTML5 Snippets
HTML标签,以及其他的快捷片段
image-default
charalampos karypidis
Code snippets for JavaScript in ES6 syntax
ES6语法及代码片段
image-default
Mahmoud Ali
A snippet pack to make you more productive working with JavaScript
JS语法及代码片段
image-default
Don Jayamanne
Over 130 jQuery Code Snippets
jQuery代码片段
image-default
sysoev
Stylus language support
Stylus 语法支持
image-default
力扣 LeetCode
Solve LeetCode problems in VS Code
LeetCode插件 摸鱼神器
image-default
Ritwick Dey
Launch a development local Server with live reload feature for static & dynamic pages
安装之后右下角有个 Go Live 的按钮,启动本地服务
image-default
Yu Zhang
All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
Markdown 扩展
image-default
Yiyi Wang
Markdown Preview Enhanced ported to vscode
Markdown 预览插件
image-default
David Anson
Markdown linting and style checking for Visual Studio Code
markdown 语法检测
image-default
Philipp Kief
Material Design Icons for Visual Studio Code
VSCode 菜单图标主题
image-default
Mora Qiu
微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)
微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)
image-default
TechER
This allows you to open the current file in your default browser or application.
页面在浏览器中打开
image-default
Christian Kohler
Visual Studio Code plugin that autocompletes filenames
路径提示,自动补全路径
image-default
Marco N
Converts px to rem, and vice versa
px 转 rem,Alt + S
image-default
discountry
React Ecosystem code snippets all in one
React/Redux/react-router 代码片段
image-default
Huachao Mao
REST Client for Visual Studio Code
和Postman一样用来调用 REST API的插件
image-default
clarkyu
More Powerful extension that beautifies SQL/一键美化你的SQL
一键美化你的SQL
image-default
cssho
SVG Viewer for Visual Studio Code.
在 VSCode 中预览 svg
image-default
Pine Wu
Vue tooling for VS Code
Vue 调试工具
image-default
qinjia
view a html file in system's default browser
默认浏览器打开HTML文件
image-default
Kentaro Ushiyama
Count lines of code in many programming languages.
右键选择文件或者文件夹,可以统计代码数量
image-default
mikey
insert header comment,and automatically update the time.
生成文档头部注释,Ctrl+Alt+I
image-default
VSCode Icons Team
Icons for Visual Studio Code
设置VSCode图标主题,左下角 设置 > 文件图标主题
image-default
hollowtree
A Vue.js 3 And Vue.js 2 Code Snippets Extension
Vue3和Vue2的代码片段支持
image-default
vaniship
A Vue Snippets Extension
常用的 vue 代码片段
image-default
ChandZhang
微信小程序代码辅助,代码片段自动完成
微信小程序代码辅助,代码片段自动完成
image-default
chengguan
小程序转换,微信小程序转支付宝小程序
小程序转换,微信小程序转支付宝小程序
image-default
Sean
WeChat Mini App Helper
VSCODE 微信小程序开发助手。详情见官方
image-default
Souche
mindmap for vscode
项目里新建一个 .km 文件,然后用它打开,直接编辑脑图
image-default
Henning Dieterichs
This unofficial extension integrates Draw.io into VS Code.
矢量图工具,类似visio
最近更新: 2023年03月21日 14:47:21