VSCode插件大全

Auto Rename Tag

自动重命名配对的HTML / XML标签

Auto Close Tag

自动添加HTML / XML结束标签

Browser Preview

编辑器中嵌入浏览器可视化窗口

Bracket Pair Colorizer

高亮匹配代码块括号

Better Comments

注释

Code Runner

非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等,安装完成后,右上角会出现:▶

解决输出乱码和支持输入问题:选择 文件->首选项->设置,打开VS Code设置 > Extensions,找到 Run Code configuration,勾上 Run In Terminal选项。设置之后代码就会在 Terminal 中运行了,无乱码及支持输入。

change-case

修改文本的更多命名格式,包括驼峰命名、下划线分隔命名,snake_case 命名以及 CONST_CAS 命名等

Color Info

颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息

Color Highlight

在编辑器中高亮显示颜色值

Color Picker

代码的颜色选择器

Csscomb

css 、less、sass 的代码格式化。

CSS Peek

快速定位元素设置CSS文件及位置
在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码

Debugger for Chrome

js调试的插件,前端项目在Chrome中运行起来之后,可以直接在VSCode中打断点、查看输出、查看控制台

Document This

为js文件生成文档的代码注释。

ESLint

检查Javascript编程时的语法错误

filesize

在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

Git History

以图表的形式查看 git 日志

GitLens

查看每一行代码的提交日志

Guides

代码的标签对齐线。

Highlight Matching Tag

选中标签高亮标签对

HTML CSS Class Completion

为基于工作空间上的CSS文件的HTML类属性提供CSS类名称提示。

HTML Boilerplate

提供生成标准HTML样板代码。

HTML CSS support

css 自动补齐

HTMLHint

HTML 代码格式检测

HTML Snippets

支持HTML5标签提示

htmltagwrap

在选中HTML标签后按快捷键”Alt + W” 在外面套一层标签

Image Preview

鼠标移到路径里显示图像预览

Indenticator

突出目前的代码缩进深度

Indent-Rainbow

给缩进添颜色,更加直观的看到代码层次

intelliSense for CSS class names in HTML

把项目中 css 文件里的名称智能提示在 html 中

Import Cost

您查看导入模块的大小

JavaScript (ES6) snippets

支持JavaScript ES6 语法

JavaScript (ES6) code snippets

ES6语法提示

jQuery Code Snippets

jq代码段提示。

JS-CSS-HTML Formatter

代码格式化。

Live Server

实时简易服务器

Lodash

lodash 函数提示,输入下划线列出可用函数。

Lodash Snippets

lodash 函数提示,输入函数名列表默认第一个是lodash的函数。

Lorem ipsum

快速填充文本

markdownlint

markdown语法检测

Material Icon Theme

文件目录图标美化

npm Intellisense

在import语句中自动完成npm模块引入的代码插件。

Node.js Modules Intellisense

可以在导入语句中自动完成JavaScript / TypeScript模块

open in browser

在浏览器中打开,安装后在左侧目录中右键点击会出现 open in browser 选项。

Path Intellisense

文件路径提示。

Prettier - Code formatter

代码保存自动格式化

Quokka.js

Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈
使用方法: ctrl+shift+p 输入 quokka 选择 new javascript 就可以了

Polacode

生成代码截图工具
打开文件在屏幕截图中选择想要的代码并复制它,转到 View> Command Palette,然后在框中输入> polacode 并选择 Polacode 选项。 它将创建一个单独的水平窗口。 点击窗口按 Ctrl + V 粘贴代码。 在代码下面,粘贴另一个窗口,会看到像图标这样的摄像头。 点击这个图标并保存图片。

REST Client

接口测试工具

Regex Previewer

这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上,并高亮所有的匹配项。
快捷键Ctrl+Alt+M呼出右边的并排文本框,左边窗口输入的正则会实时匹配右边文本内容

Settings Sync

多设备同步Vue插件

Stylelint

CSS/SCSS/Less语法检测

Sort Lines

选中多行文字排序

SVG Viewer

此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序,你无需离开编辑器,便可以打开 SVG 文件并查看它们。同时,它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。
在svg文件上右键菜单选择"SVG Viewer: View SVG"

TODO Highlight

高亮todo注释

Toggle Quotes

切换双引号、单引号、反引号

Vetur

Vue 语法高亮显示, 语法错误检查, 代码自动补全

VS Code CSS Comments

css代码注释。

VSCode Google Translate

多语言开发时,切换语言包。

vscode-browser-plus

在编辑器内预览HTML,
通过开启端口(10086)监听当前打开项目的根目录,在编辑器内预览网站,省去了频繁切换浏览器、编辑器看页面效果,修改代码后自动刷新页面。

vscode-fileheader

顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
快捷键: Ctrl+Alt+i

vscode-icons

设置目录列表文件类型图标

vscode-spotify

音乐播放控制器

Window Colors

打开多个窗口时显示不同的颜色

别名路径跳转

名字就是这个,直接搜索就行了,提供关于import定义的跳转

参考资料:
https://www.cnblogs.com/zhn0823/p/6542335.html
https://blog.csdn.net/shenxianhui1995/article/details/81604818
https://github.com/varHarrie/varharrie.github.io/issues/10

原文地址:https://www.cnblogs.com/webljl/p/13932029.html