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