一辆马车

`Vetur`

Veturopen in new window 是语言格式化工具。默认使用以下插件来格式化对应语言

// prettyhtml 现在已不支持
// "vetur.format.defaultFormatter.html": "prettyhtml"
"vetur.format.defaultFormatter.html": "prettier"
"vetur.format.defaultFormatter.pug": "prettier"
"vetur.format.defaultFormatter.css": "prettier"
"vetur.format.defaultFormatter.postcss": "prettier"
"vetur.format.defaultFormatter.scss": "prettier"
"vetur.format.defaultFormatter.less": "prettier"
"vetur.format.defaultFormatter.stylus": "stylus-supremacy"
"vetur.format.defaultFormatter.js": "prettier"
"vetur.format.defaultFormatter.ts": "prettier"
"vetur.format.defaultFormatter.sass": "sass-formatter"

`prettier`

参考文档open in new window

配置详细

{
    // 一行最多 100 字符
    "printWidth": 100,
    // 不使用缩进符，而使用空格
    "useTabs": false,
    // 使用 4 个空格缩进
    "tabWidth": 4,
    "tabSize": 4,
    // 行尾需要有分号
    "semi":true,
    // 使用单引号
    "singleQuote":true,
    // 对象的 key 仅在必要时用引号
    "quoteProps":"as-needed",
    // jsx 不使用单引号，而使用双引号
    "jsxSingleQuote":false,
    // 末尾不需要逗号 "es5"  none
    "trailingComma":"es5",
    // 大括号内的首尾需要空格
    "bracketSpacing":true,
    // jsx 标签的反尖括号需要换行
    "jsxBracketSameLine":false,
    // 箭头函数，只有一个参数的时候，也需要括号
    "arrowParens":"always",
    // 每个文件格式化的范围是文件的全部内容
    "rangeStart":0,
    "rangeEnd":Infinity,
    // 不需要写文件开头的 @prettier
    "requirePragma":false,
    // 不需要自动在文件开头插入 @prettier
    "insertPragma":false,
    // 使用默认的折行标准
    "proseWrap":"preserve",
    // 根据显示样式决定 html 要不要折行
    "htmlWhitespaceSensitivity":"css",
    // 换行符使用 lf 结尾是 \n \r \n\r auto
    "endOfLine":"lf"
}

`js-beautify-html`

默认配置详细

{
    // 在文件结束时换行
    "end_with_newline": false,
    // 缩进字符
    "indent_char": " ",
    // 格式和缩进，默认为false
    "indent_handlebars": false,
    // 缩进<head>和<body>中的元素(head和body也会缩进)
    "indent_inner_html": false,
    // 缩进<script>标签里的代码[keep|separate|normal] 默认："normal"
    // - keep 对齐<script>标签
    // - separate 对齐左边界 
    // - normal 正常缩进
    "indent_scripts": "keep",
    // 缩进尺寸
    "indent_size": 2, // Indentation size
    // 使用tab缩进,将会覆盖"indent_size"和"indent_char"设置
    "indent_with_tabs": false,
    // html、js,保留连续换行符个数,默认10(比如设为2，则会将2行以上的空行删除为只保留1行)
    "max_preserve_newlines": 1,
    // 保留空行,默认"true"(保留换行符)
    "preserve_newlines": true,
    // 数组中的标签不会重新格式化
    "unformatted": [],
    // 换行长度 0表示无限制
    "wrap_line_length": 0,
    // 对属性进行换行 取值[auto|force|force-aligned|force-expand-multiline]
    // - auto: 仅在超出行长度时才对属性进行换行。
    // - force: 对除第一个属性外的其他每个属性进行换行。
    // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
    // - force-expand-multiline: 对每个属性进行换行。
    // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐
    "wrap_attributes": "auto"
}

注意

js-beautify-html 也是一款格式化html的插件. 当要使用js-beautify-html来格式html时,由于vetur默认使用prettier格式化html,因此要修改为"vetur.format.defaultFormatter.html": "js-beautify-html", 以下的配置才能生效

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
    }
}

vscode settings.json 配置

完整配置

{
    "editor.suggestSelection": "first",
    "explorer.confirmDelete": false,
    // tab缩进大小
    "editor.tabSize": 4,
    // 设置字体
    "editor.fontSize": 14,
    // 用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值
    "editor.tabCompletion": "on",
    // 保存时按照哪个规则进行格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
        // 这个属性能够在保存时
        // 自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列
        // "source.organizeImports": true
    },
    // 在保存时自动格式化
    "editor.formatOnSave": true,
    "editor.mouseWheelZoom": true,
    // 默认使用prettier来格式化js代码
    // "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        // 格式化html配置
        "js-beautify-html": {
            // 换行设置[auto|force|force-aligned|force-expand-multiline]["auto"]
            // 设置html代码换行
            "wrap_attributes": "auto",
            // 换行缩进大小
            "wrap_attributes_indent_size": 4,
            // 在文件结尾添加新行
            "end_with_newline": false
        },
        // 由于vetur模式使用prettier格式化代码,以下配置有效
        // 注: 由于semi默认值为true,和eslint配置的规则semi冲突,导致无法格式化,因此修改此参数
        "prettier": {
            // 格式化不加分号
            "semi": false,
            // 格式化为单引号
            "singleQuote": true
        }
    },
    // 规则之间新建新行(非逗号)
    "scss.format.newlineBetweenRules": false,
    // 每一个选择器之间都换行
    "scss.format.newlineBetweenSelectors": false,
    // 选择器之间或选择器内部不允许多个换行
    "scss.format.preserveNewLines": false,
    // 收起或展开括号,默认是收起collapse
    "scss.format.braceStyle": "collapse"
}

# Vetur

# prettier

# js-beautify-html

# vscode settings.json 配置

`Vetur`

`prettier`

`js-beautify-html`

vscode settings.json 配置