VS Code开发Vue项目常用插件

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