标签

1. Auto Rename Tag 修改匹配 html 标签

自动修改匹配的 HTML 标签。

2. Auto Close Tag

Highlight Matching Tag 高亮匹配标签

当光标停留在标签时，高亮匹配的标签

2. Path Intellisense 引入文件时路径智能提示

智能路径提示，可以在你输入文件路径时智能提示。

3. turbo Console Log 一键 console.log()

快捷添加 console.log，一键 注释 / 启用 / 删除 所有 console.log。

简单说下这个插件要用到的快捷键:

ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log

4. css-auto-prefix CSS私有前缀

自动添加 CSS 私有前缀。

5.Browser Preview 在VScode中的查看页面

6.View In Browser 在浏览器中查看页面

live serve

Import Cost 计算引入包大小

引入包大小计算,对于项目打包后体积掌握很有帮助

CSScomb

CSS 书写顺序规则，这里我推荐腾讯 AollyTeam 团队的规范：

简单说下这个插件怎么用：
在项目的根目录下创建一个名为csscomb.json的文件，然后添加一些配置项。也可以将配置项写入项目的 package.json 文件中的 csscombConfig 字段。
至于添加的配置项，CSScomb 提供了示例配置文件：

其中的 sort-order 就是 CSS 属性书写顺序，可以按照自己遵循的规范设置，所以我直接替换成了腾讯的。
这个配置文件里面各个字段的作用

CSS Peek

定位 CSS 类名。

• Peek：内联加载 css 文件并在那里进行快速编辑。（Ctrl + Shift + F12）
• Go to：直接跳转到 CSS 文件或在新的编辑器（F12）中打开
• Hover：在符号上悬停显示定义（Ctrl + hover）

eslint 代码检测

一个插件化的javascript代码检测工具。它的目标是保证代码的一致性和避免错误。

Regex Previewer

实时预览正则表达式的效果。

vetur

语法高亮、智能感知、Emmet等

VueHelper

snippet代码片段

change-case

转换命名风格。

REST Client

关于HTTP测试工具，postman一直是我们开发中不可缺少的工具，这里介绍的REST Client 堪比是 Postman的替代品。REST Client 是一个 VS Code 扩展插件，可以通过写脚本的形式发送 HTTP 请求并直接在 VS Code 上查看响应结果。这样不仅能看到http的测试结果，测试的脚本文件还能得以保留。

首先在VScode中创建一个 .http 后缀的文件，比如 httpbin.http

注意两条HTTP请求脚本之间一定要 ###分隔

Ant Design Vue helper