vscode-vue项目格式化-Toy模板网

这篇具有很好参考价值的文章主要介绍了vscode-vue项目格式化。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、插件要求

Prettier

Vetur文章来源地址https://www.toymoban.com/news/detail-666033.html

二、配置文件

{
  "workbench.startupEditor": "newUntitledFile",
  "files.autoSave": "off", // 关闭文件自动保存，避免开发时候页面变化
  "editor.tabSize": 2, // tab距离
  "vetur.format.options.tabSize": 2, //
  "editor.formatOnSave": true, // 在保存时自动格式化
  "editor.minimap.enabled": true, // 关闭右侧快速预览
  "files.eol": "\n", // 设定文件的换行符,\n（linux模式）或\r\n(win模式)
  "editor.detectIndentation": false, // 关闭vscode的缩进检查
  "editor.fontSize": 14, //设置文字大小
  "editor.lineHeight": 0, //设置文字行高
  "editor.lineNumbers": "on", //开启行数提示
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "window.zoomLevel": 0, // 调整窗口的缩放级别
  //根据文件后缀名定义vue文件类型
  "files.associations": {
    "*.vue": "vue"
  },
  // 为各类文件制定Fatmatter插件
  "[vue]": {
    // "editor.defaultFormatter": "esbenp.prettier-vscode" // 采用prettier处理格式化
    "editor.defaultFormatter": "octref.vetur" // 采用vetur来处理Fatmatter
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // Vetur 的各类设定,仅当上面[vue]的editor.defaultFormatter的值为octref.vetur的时候，才起效
  "vetur.format.options.tabSize": 4,


  "vetur.format.defaultFormatter.html": "js-beautify-html", // 针对vue中的template部分的风格模版，也可以是：prettier
  "vetur.format.defaultFormatter.css": "prettier", // 针对vue中的style部分的风格模版
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {  
      // 给js-beautify-html设置属性隔断
      "wrap_line_length": 200, //换行长度
      // 属性换行
      // 对属性进行换行。
      // - auto: 仅在超出行长度时才对属性进行换行。
      // - force: 对除第一个属性外的其他每个属性进行换行。
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
      // - force-expand-multiline: 对每个属性进行换行。
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
      "wrap_attributes": "aligned-multiple",
      // Maximum number of line breaks to be preserved in one chunk (0 disables)
      // "max_preserve_newlines": 0,
      "end_with_newline": false,
      "singleQuote": true,
    },
    "prettyhtml": {
      "printWidth": 120,
      "singleQuote": true,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
      // Prettier option here
      "wrap_attributes": "auto",
      "printWidth": 120,
      "trailingComma": "none", // 多行时，尽可能打印尾随的逗号
      "tabWidth": 4, // 会忽略vetur的tabSize配置
      "useTabs": false, // 是否利用tab替代空格
      "semi": true, // 句尾是否加;
      "singleQuote": true, // 使用单引号而不是双引号
      "arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号
      "trailingComma": "all",
      "htmlWhitespaceSensitivity": "ignore"
    }
  },
    // 函数名后增加空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
}

到了这里，关于vscode-vue项目格式化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！