欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vscode格式化配置

程序员文章站 2022-06-25 08:30:13
一、安装常用插件: Ctrl+shift+x打开应用商店搜索这几个插件安装即可 Beautify、Eslint、Vetur 二、setting.josn配置 文件-首选项-设置-在setting.josn中编辑,打开这个setting.josn文件后将下面配置复制即可 { // tab 大小为2个空 ......

一、安装常用插件:

ctrl+shift+x打开应用商店搜索这几个插件安装即可

beautify、eslint、vetur

二、setting.josn配置

文件-首选项-设置-在setting.josn中编辑,打开这个setting.josn文件后将下面配置复制即可

{
    // tab 大小为2个空格
    "editor.tabsize": 2,
    // 100 列后换行
    "editor.wordwrapcolumn": 100,
    // 保存时格式化
    "editor.formatonsave": true,
    // 开启 vscode 文件路径导航
    "breadcrumbs.enabled": true,
    // prettier 设置语句末尾不加分号
    "prettier.semi": false,
    // prettier 设置强制单引号
    "prettier.singlequote": true,
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultformatter.html": "prettyhtml",
    // 显示 markdown 中英文切换时产生的特殊字符
    "editor.rendercontrolcharacters": true,
    // 设置 eslint 保存时自动修复
    "eslint.autofixonsave": true,
    // eslint 检测文件类型
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autofix": true
        },
        {
            "language": "vue",
            "autofix": true
        }
    ],
    // vetur 的自定义设置
    "vetur.format.defaultformatteroptions": {
        "prettier": {
            "singlequote": true,
            "semi": false
        }
    },
    // 修改500ms后自动保存
    "editor.formatonsavetimeout": 500,
    "files.autosave": "afterdelay",
    "files.autosavedelay": 500,
    "editor.codeactionsonsavetimeout": 500,
    "[javascript]": {
        "editor.defaultformatter": "vscode.typescript-language-features"
    }
}

三、配置.editorconfig文件

项目根目录下找到.editorconfig这个文件,然后复制下面配置即可

# https://editorconfig.org
root = true                         # 根目录的配置文件,编辑器会由当前目录向上查找,如果找到 `roor = true` 的文件,则不再查找

[*]                                 # 匹配所有的文件
indent_style = space                # 空格缩进
indent_size = 4                     # 缩进空格为4个
end_of_line = lf                    # 文件换行符是 linux 的 `\n`
charset = utf-8                     # 文件编码是 utf-8
trim_trailing_whitespace = true     # 不保留行末的空格
insert_final_newline = true         # 文件末尾添加一个空行
curly_bracket_next_line = false     # 大括号不另起一行
spaces_around_operators = true      # 运算符两遍都有空格
indent_brace_style = 1tbs           # 条件语句格式是 1tbs

[*.js]                              # 对所有的 js 文件生效
quote_type = single                 # 字符串使用单引号

[*.{html,less,css,json}]            # 对所有 html, less, css, json 文件生效
quote_type = double                 # 字符串使用双引号

[package.json]                      # 对 package.json 生效
indent_size = 2                     # 使用2个空格缩进

注释都写了, 我就不再啰嗦,实属干货,上手试试吧!