vscode中使用vetur、eslint、prettier格式化vue项目代码

最新推荐文章于 2025-10-27 16:14:50 发布

原创最新推荐文章于 2025-10-27 16:14:50 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vscode

前端同时被 2 个专栏收录

183 篇文章

订阅专栏

工具

38 篇文章

订阅专栏

该博客围绕VSCode展开，提及vetur和js-beautify-html，介绍了它们的官网及GitHub信息，重点展示了在VSCode的setting.json中的配置情况，还提到了应用相关内容，但未完成介绍。

文档

官网 setting.json

vetur

js-beautify-html

GitHub
官网
 下图是vetur里面的 js-beautify-html
在这里插入图片描述

Default settings

在vscode中，setting.json中的配置情况

应用

  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      //属性强制折行对齐,可以是这些值Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] 				   ["auto"]，默认为auto
      // 1.force-aligned 启用后.vue文件中templeate部分代码中的属性会被强制换行，但是闭合的标签却与最后一个属性在同一行，没有换
      //"wrap_attributes": "force-aligned" 
        "wrap_line_length": 120,//一行的长度超过120，在换行
		"wrap_attributes": "auto",
		"end_with_newline": false
    }
  },