vscode使用vetur解决代码换行、格式化、常量问题

最近一直被代码换行问题困扰，没有过长内容就换行，看起来感觉很不舒服，如

这么看还行，但是这样就感觉很难受（明明还有那么大的空间）==！

使用vetur

这样看起来一目了然，舒服了很多 O.O

接下来带大家看使用vetur插件处理代码格式化和换行，常亮问题。
安装：

我这块已经安装了vetur没有的同学可以在vscode扩展里自行搜索安装
配置vetur路径
找到settings.json
路径：code --> 首选项 --> 设置
快捷键：windows:“ctrl+shift+,”；mac:“cmd+,”
*增加vetur配置

  // Vetur 全局设置
  "vetur.format.options.tabSize": 4,
  "vetur.format.options.useTabs": false,
  // 各类型代码默认格式化方式
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatterOptions": {
    // for html
    "prettyhtml": {
      "tabWidth": 4,
      "wrapAttributes": false,
      "sortAttributes": false,
      "bracketSpacing": true,
      "printWidth": 200 //可以根据自己的屏幕宽度配置对应的换行宽度
    },
    // for js css
    "prettier": {
      "eslintIntegration": true,
      // 使用单引号
      "singleQuote": true,
      // 不加分号
      "semi": false,
      "tabWidth": 4,
      "printWidth": 140,
      "bracketSpacing": true,
      "useTabs": false
    }
  },

到这里就结束了，如果这篇文章对您有所帮助，可以点赞加收藏👍