VsCode:Vue单文件格式化属性换行显示

简介: VsCode:Vue单文件格式化属性换行显示

需要安装插件vetur

文档:


vetur: https://vuejs.github.io/vetur/guide/formatting.html

js-beautify-html: https://github.com/vuejs/vetur/blob/master/server/src/modes/template/services/htmlFormat.ts

prettier https://prettier.io/docs/en/options.html

settings.json

{
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  }
  // 保存时候自动格式化
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      //属性换行
      "wrap_attributes": "force",
      "indent_size": 2,
      "indent_char": " "
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": true,
      "wrapAttributes": false,
      "sortAttributes": true
    },
    // css/scss/less/js/ts
    "prettier": {
      //设置分号
      "semi": true,
      //双引号变成单引号
      "singleQuote": true,
      //尾部逗号 es5|none|all
      "trailingComma": "es5",
    }
  }  
}

js-beautify-html 选项

end_with_newline: false, // End output with newline
indent_char: ' ', // Indentation character
indent_handlebars: false, // e.g. {{#foo}}, {{/foo}}
indent_inner_html: false, // Indent <head> and <body> sections
indent_scripts: 'keep', // [keep|separate|normal]
indent_size: 2, // Indentation size
indent_with_tabs: false,
max_preserve_newlines: 1, // Maximum number of line breaks to be preserved in one chunk (0 disables)
preserve_newlines: true, // Whether existing line breaks before elements should be preserved
unformatted: [], // Tags that shouldn't be formatted. Causes mis-alignment
wrap_line_length: 0, // Lines should wrap at next opportunity after this number of characters (0 disables)
wrap_attributes: 'force-expand-multiline' as any
// Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]
相关文章
|
26天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
193 2
|
8天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
104 4
|
6天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
22 1
|
24天前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
20 2
|
25天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
35 2
|
JavaScript 前端开发
第三篇: VSCode关于VUE的插件配置
好吧,万物都逃不过真香定理,几周后又把VUE捡起来了,主要是最近的这个小项目前端也是想用到这个VUE。 首先的话,关于vscode的话可以理解为宇宙第一IDE visual studio的小老弟,主要是轻量级,支持广,插件多。
5645 0
|
6月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
75 0
|
6月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
250 0
|
6月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
6月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)