vscode vue格式化不换行

最新推荐文章于 2024-07-26 11:05:31 发布

修罗_

最新推荐文章于 2024-07-26 11:05:31 发布

阅读量1.1k

点赞数 1

分类专栏： IDE 文章标签： vue.js vscode javascript

本文链接：https://blog.csdn.net/weixin_45843676/article/details/127005459

版权

IDE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

博客作者分享了解决VSCode中Vue代码格式化问题的方法，通过配置settings.json文件，特别是使用vuter插件，并调整相关格式化选项，如禁用html标签自动换行，实现更理想的代码排版效果。

摘要由CSDN通过智能技术生成

一直以来VS code----vue的代码格式化都差强人意，html会自动展开，真的很难受，类似这样子

<template>
  <div id="energy">
    <div
      class="line-chart-div"
      :style="{
        width: innerWidth / 4.5 + 'px',
        height: innerHeight / 5 + 'px',
        marginLeft: innerWidth / 44 + 'px',
        marginBottom: innerHeight / 40 + 'px',
        fontSize: innerHeight / 50 + 'px',
      }"
      v-for="i in 16"
      :key="i"
    >
      <div
        class="line-chart"
        style="width: 100%; height: 100%"
        :style="{ paddingTop: innerHeight / 30 + 'px' }"
      ></div>
      <div class="title" :style="{ fontSize: parseInt(innerHeight / 60) }">
        标题
      </div>
    </div>
  </div>
</template>

于是今天决定把它改了，首先确保你安装了vuter这个插件，另外不要下载其他的格式化插件了。

打开设置搜索code actions on save:reles点击=>在settings.json中编辑,将下面这些代码全部复制过去覆盖

{
  "files.autoSave": "onFocusChange",
  "editor.suggestSelection": "recentlyUsed",
  "editor.autoClosingDelete": "always",
  "editor.autoClosingBrackets": "always",
  "editor.autoClosingOvertype": "always",
  "editor.guides.bracketPairs": true,
  "editor.guides.bracketPairsHorizontal": true,
  "editor.suggest.insertMode": "replace",
  "editor.tabCompletion": "on",
  "bracketPairColorizer.depreciation-notice": false,
  "git.ignoreMissingGitWarning": true,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "editor.formatOnPaste": true,
  "editor.quickSuggestions": {
    "strings": true
},
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // 禁止html标签自动换行
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
   "js-beautify-html": {
   "wrap_attributes": "auto"
   },
  "prettyhtml": {
   "printWidth": 1000,
  "singleQuote": false,
   "wrapAttributes": false,
   "sortAttributes": false
  }
   },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "editor.defaultFormatter": "vscode.html-language-features",
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "go.alternateTools": {
  
  },
  "go.toolsManagement.autoUpdate": true,
  "workbench.colorTheme": "Solarized Dark",
  "git.autofetch": true,
  "[python]": {
    "editor.defaultFormatter": "ms-python.python"
  },
  "explorer.confirmDragAndDrop": false,
  "[less]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "git.confirmSync": false,
  "breadcrumbs.enabled": false,
  "editor.renderWhitespace": "none",
  "editor.renderControlCharacters": false,
  "editor.minimap.enabled": false,
  "workbench.startupEditor": "none",
  "workbench.iconTheme": "vscode-icons",
  "security.workspace.trust.untrustedFiles": "open",
  "editor.codeActionsOnSave": {
  
  }
}

最终结果是这样

<template>
  <div id="energy">
    <div class="line-chart-div" :style="{width:innerWidth/4.5+'px',height:innerHeight/5+'px',marginLeft:innerWidth/44+'px',marginBottom:innerHeight/40+'px',fontSize:innerHeight/50+'px'}" v-for="i in 16" :key="i">
      <div class="line-chart" style="width:100%;height:100%;" :style="{paddingTop:innerHeight/30+'px'}"></div>
      <div class="title" :style="{fontSize:parseInt(innerHeight/60)}">标题</div>
    </div>
  </div>
</template>