vscode使用Eslint + prettier + beautify 格式化vue 代码不换行

本文详细介绍了如何配置VSCode的Vetur插件,包括代码片段提示、字体大小、文件关联、格式化设置、自动补全、错误检查等,以提升Vue项目的开发效率和代码质量。同时,提到了相关格式化工具如js-beautify和prettier的配置选项。

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

设置--首选项-vetur--settings.json

 

{

  // 是否允许自定义的snippet片段提示

  "editor.snippetSuggestions": "top",

  "editor.fontSize": 22,

  "editor.fontWeight": "400",

  // 配置文件关联,以便启用对应的提示

  "files.associations": {

    "*.vue": "vue",

    "*.wxss": "css"

  },

 

  "window.zoomLevel": 0,

  "javascript.updateImportsOnFileMove.enabled": "always",

  "vetur.validation.template": false, // 使用eslint插件时需要把此项设置为false

  "vetur.validation.script": true, //检查js代码

  "vetur.validation.style": true, //能检查css的属性是否存在,分隔符是否正确,

  "vetur.format.defaultFormatter.html": "js-beautify-html", //默认采用js-beautify-html格式化

  "editor.tabSize": 2,

  "editor.formatOnSave": true, // 每次保存自动补全校验

  "vetur.format.defaultFormatterOptions": {

    //对vue文件html的格式化,对js的格式化在全局的prettierrc.json文件控制

    "js-beautify-html": {

      "wrap_attributes": "aligned-multiple",

      "indent_size": 2, //缩进大小

      "indent_char": " ", //缩进字符

      "indent_with_tabs": false,

      "eol": "\n", // 用作行终止的字符,默认为\n

      "end_with_newline": true, //是否用换行符结束

      "preserve_newlines": true, // 是否保留现有的换行符

      "max-preserve-newlines": 1200, // 一次可保留的最大换行数

      "indent-inner-html": true, //缩进 head body代码片段

      "wrap_line_length": 1200, //超过多少字符换行

      "editorconfig": false //使用editorconfig设置选项

    },

    "prettyhtml": {

      "printWidth": 1000,

      "singleQuote": false,

      "wrapAttributes": false,

      "sortAttributes": false

    }

  },

  "vetur.format.defaultFormatter.js": "vscode-typescript",

  "[jsonc]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "prettier": {

    "eslintIntegration": true

  },

  "[json]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[less]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[html]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[vue]": {

    "editor.defaultFormatter": "octref.vetur"

  },

  "prettier.semi": true,

  "prettier.singleQuote": true,

  "html.format.maxPreserveNewLines": 1200,

  "html.format.enable": false

}

 

参考链接 https://www.cnblogs.com/felicitytanyin/p/14241526.html

 

### 配置 VSCodeVue 文件的代码格式化以避免自动换 为了防止在 VSCode 中对 Vue 文件进代码格式化时发生不必要的自动换,可以通过调整 `settings.json` 的配置来实现。以下是具体的解决方案: #### 修改 `settings.json` 通过编辑 `settings.json` 文件中的相关选项,可以控制 HTML 和其他语言片段的换为。以下是一个推荐的配置示例[^1]: ```json { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_line_length": 240, "wrap_attributes": "aligned-multiple" }, "prettyhtml": { "printWidth": 100, "singleQuote": false, "wrapAttributes": false, "sortAttributes": false } } } ``` 上述配置中: - `"wrap_line_length"` 设置为较大的数值(如 240),表示每的最大字符数限制增加,从而减少因长度超限而触发的自动换[^3]。 - `"wrap_attributes"` 参数设为 `"aligned-multiple"` 或 `"false"` 可以有效阻止属性被拆分到多显示。 #### 如何应用此配置? 按照以下方法操作即可完成设置: 1. **打开命令面板**:按快捷键 `Ctrl + Shift + P` (Windows/Linux) 或 `Cmd + Shift + P` (Mac),输入并选择 “Preferences: Open Settings (JSON)” 来访问 `settings.json` 文件。 2. **粘贴配置**:将上面提到的 JSON 片段复制到该文件中,并保存更改。 3. **验证效果**:尝试对 Vue 文件执格式化操作 (`Shift + Alt + F`) 并观察是否仍然存在自动换现象。 此外,在某些情况下可能还需要进一步检查是否有插件冲突或额外的 ESLint/Linter 规则影响了最终的为[^2]。 --- ### 注意事项 如果以上修改未能完全解决问题,则需确认当前使用的扩展程序及其默认参数是否会强制启用特定风格的格式化逻辑。例如,“Prettier” 插件可能会覆盖部分自定义设定;此时建议统一采用单一格式化工具或者同步其全局规则至本地环境[^4]。 最后提醒一点,不同团队对于代码美观度的要求各异,请务必与同事沟通后再决定最适合项目的方案[^5]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值