VScode 格式化文档换行或不换行

最新推荐文章于 2025-03-19 09:53:48 发布

gaozheng_liang

最新推荐文章于 2025-03-19 09:53:48 发布

阅读量8k

点赞数 2

分类专栏： vue前端文章标签： vscode

本文链接：https://blog.csdn.net/gaozheng_liang/article/details/120607990

版权

vue前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在VSCode中配置Prettier和Vetur，以达到自定义代码格式化的效果。通过修改settings.json文件，设置换行规则、缩进大小、自动修复等选项，可以实现JavaScript和HTML等语言的格式化风格调整。最后展示了设置完成后可供选择的格式化样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不喜欢一开始格式化的换行，决定换成不换行的

一开始我的电脑就有如图两个插件
在这里插入图片描述

这时换行的，改完后，Prettier - Code formatter仍可以换行
在这里插入图片描述
这是不换行的，使用Vatur

首先找到settings.json文件

第一，可以在左下角的图标中找设置，然后就出现图二
请添加图片描述

请添加图片描述
第二种，在左上角找文件->首选项->设置

找到 settings.json 后，里面内容如下

{
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "editor.renderControlCharacters": true,
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    }
}

将文件中所有代码换成以下代码

{
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "editor.tabSize": 2,
  "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
  "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto" //"force-aligned" //属性强制折行对齐
    }
  },
  "[jsonc]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //  #不让函数(名)和后面的括号之间加个空格
  "vetur.validation.template": false,
  "[json]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "html.format.wrapAttributes": "preserve",
  "search.followSymlinks": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  } // 阻止iview报错
}

最后，出现下图选项，就可以选择格式化样式了
在这里插入图片描述