标签

Auto Rename Tag

自动匹配更改过的标签

Auto Close Tag

自动闭合标签

语言

Chinese

中文

LESS

Easy LESS

自动编译LESS为CSS

图片

Image preview

侧栏预览图片

打开浏览器

Live Server

自动搭建临时服务器，可以实现网页的自动更新

Open in browser

右键快速打开浏览器

Preview on Web Server

网页自动刷新

路径提示

Path Autocomplete

使用@提示路径

在setting.json中配置

    //导入文件时是否携带文件的拓展名
    "path-autocomplete.extensionOnImport": true,
    //配置@的路径提示
    "path-autocomplete.pathMappings": {
        "@": "${folder}/src"
    },

注意，使用插件时要以为项目为根目录打开，避免插件失效

Path Intellisense

使用"/"时提示路径

自动计算

px to rem & rpx & vm

将px换算为rem或rpx或vm

文件管理

vscode-icons

vscode中，不同类型文件会有不同的icon显示

Vue

Vetur

vue2基本工具（代码高亮等）

volar

vue3基本工具

Vue 3 Snippets

自动补全vue2和3代码

ESLint代码风格相关

ESLint

Prettier - Code format

1. 创建.prettierrc文件的内容：

{
    "semi": false,
    "singleQuote": true,
    "bracketSpacing": true
}
//保存到"C:\Users\MKB"下

2. 配置settings.json

    "prettier.configPath": "C:\\Users\\MKB\\.prettierrc",
    // 安装Prettier配置
    "eslint.alwaysShowStatus": true,
    "prettier.trailingComma": "none",
    "prettier.semi": false,

    // 每行文字个数超出此限制将会被迫换行
    "prettier.printWidth": 300,
    // 使用单引号替换双引号
    "prettier.singleQuote": true,
    "prettier.arrowParens": "avoid",
    // 设置 .vue 文件中，HTML代码的格式化插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "trailingComma": "none",
            "singleQuote": true,
            "semi": false,
            "arrowParens": "avoid",
            "printWidth": 300
        },
        "js-beautify-html": {
            "wrap_attributes": false
        },
    },

3. 在.vue文件中使用

在.js文件中使用

正则

any-rule