HTML
Auto Close Tag
自动闭合HTML/XML标签,必装
Auto Rename Tag
修改标签时自动重命名配对的HTML / XML标签,必装
样式
HTML CSS Support
CSS 自动补齐
css navigation
按Ctrl+鼠标点击即可跳转到class对应的css样式区域
cssrem(px to rem & rpx)
在VSCode中的px和rem单位之间转换,并支持WXSS
这个插件默认的html文字大小 cssroot 为16px。
修改默认的16px为其他数值。设置(Ctrl + ,)——>在搜索框输入cssroot
Less IntelliSense
windicss IntelliSense
WindiCSS 提示插件
Headwind
是针对Visual Studio Code的Tailwind CSS类排序器
vscode-styled-components
在JS文件中写样式时,有智能提示
js&ts
JavaScript(ES6) code snippets
包含十几个代码片段,快速生成 ES6 代码片段
Npm Intellisense
require 时的包提示,用于在 import 语句中自动填充 npm 模块
JSON to TS
将JOSN对象转换成typescript接口(interface)
从选定内容转换 : Shift + Ctrl + Alt + S
Template String Converter
在字符串中输入$触发,将字符串转换为模板字符串
Lodash
lodash 函数提示。
Regex Previewer 边写正则边看结果
Auto Import
自动查找,解析并提供所有可用导入的代码操作和代码完成。与Typescript和TSX一起使用
Codelf
变量取名
VUE开发推荐插件
Vetur
Vue2语法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)
Volar
Vue3语法高亮、智能感知、Emmet等
VueHelper
提供Vue、Vue-router、Vuex的代码片段补全功能
Vue 3 Snippets
生成Vue3代码片段,在页面中输入vuein,然后按Tab
vue-component
输入组件名称自动导入找到的组件,自动导入路径和组件
Vite
能自动启动开发服务器,允许开发者无需离开编辑器即可预览和调试应用
注释
koroFileHeader
自动添加头部注释和 函数注释的插件。如自定义内容需要在 settings.json中进行自定义配置。
TODO Tree
不仅可以实现标签高亮,还可以在活动栏添加一个选项卡,它能够以不同视图展示我们标记的位置,单击对应标签就能够快速定位到指定位置。
Turbo Console Log
只要将想打印的变量选中,按住ctrl + option + L(windows: ctrl + alt + L),就能在变量下方自动插入一个console.log
javascript console utils
生成 console.log 。选中变量,按 ctrl + shift + L 生成;按 ctrl + shift + D 即可删除。
JavaScript Debugger
图片
Image preview 图片预览
作用:鼠标悬浮在链接上可及时预览图片
SVG
是一款强大的SVG语言支持扩展,能处理SVG所需的几乎所有功能:SVG编码、压缩、美化、预览多合一。
更多详细
git
GitLens 方便查看git日志
Git History
以图表的形式查看Git日志
语言类
Chinese
中文界面,安装的VSCode软件默认使用的是英文语言环境,如需要改成中文,可在扩展中安装中文语言包,安装后重启软件即可
I18n-ally
国际化 i18n 插件
A-super-translate
划词翻译
var-translate
将汉字翻译为英文,并提供驼峰,短横线等多种格式
其他
ESLint
检查Javascript编程时的语法错误,必装。
Stylelint
显示css代码错误、修改建议,还能保存时自动美化代码、修复可修复的代码。
Code Spell Checker
单词拼写检查
DotENV
支持.env文件语法高亮
Bookmarks
Bookmarks 是一个书签工具,通过加入书签可以快速的找到你要找的代码,避免无休止地滚动代码,和“Ctrl+F”来翻找代码
Settings Sync
编辑器设置同步,包括插件,配置等。
Markdown All in One
最常用的Markdown优化
Postcode
类似Postman 的接口测试插件
Iconify IntelliSense
Iconify 图标插件
Local History
Project Manager
项目管理器,需要经常切换项目时非常有用
Code Runner
Partial Diff
Path Intellisense
引入文件的时候,路径自动补全
open in browser
支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari
Vue VSCode Snippets