prettier - vscode 保存代码自动格式化插件安装与配置项备注

最新推荐文章于 2024-08-10 13:50:57 发布

张驰Terry

最新推荐文章于 2024-08-10 13:50:57 发布

阅读量4.5k

点赞数 4

文章标签： vue javascript 代码规范 less generator

本文链接：https://blog.csdn.net/terrychinaz/article/details/115402661

版权

prettier - vscode 保存代码自动格式化插件

prettier - vscode 保存代码自动格式化插件

安装自行百度，只需要在 vscode 插件里搜索 prettier，安装即可

配置保存文件时自动格式化

vscode 配置文件 settings.json 中加入："editor.formatOnSave": true,

配置保存时HTML标签不自动换行（2020.12.03 13:58 再更新）

在安装并配置保存自动格式化后

会发现其保存 vue 代码是，会把标签自动换行，就导致无法正常折叠标签来控制展示的 HTML 层级了，个人觉得非常不能接受

具体步骤参考博客 => VScode vue后缀文件设置 html 属性不换行

我的改动

安装配置 vscode 插件 vetur

更改 vscode 配置（文件-首选项-设置，vscode 右上角按钮-打开设置（json），在 vscode 的 settings.json 中写入如下配置）

"[vue]": {"editor.defaultFormatter": "octref.vetur"},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {"wrap_attributes": "auto"}},

  // 用 vetur 来接管 vue 的格式（vetur 对 vue 语法的支持更好）
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    }
  },