VSCode Vue ESLint 格式化配置

原创已于 2023-10-28 13:18:02 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #vue.js #eslint #格式化 #format

于 2021-12-28 23:53:36 首次发布

开发工具专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在VSCode中配置Vetur和ESLint插件，以实现Vue项目的代码格式化。虽然ESLint可以很好地遵循.eslintrc.js的规则，但无法格式化.vue文件中的<style>标签样式。而Vetur格式化则不完全符合ESLint规则，需要通过配置Vetur格式化规则并结合ESLint检查来手动调整代码格式。

Vetur、ESLint插件安装这里就不多说了，直接看vscode settings.json配置：

重要：
使用ESLint格式化，能很好的符合.eslintrc.js文件里配置的rules，但有个很大的瑕疵，就是vue文件<style>标签里的样式无法进行格式化，只能独立编写到单独的样式文件中，再在<style>标签里@import 。
看到有个相关插件 eslint-plugin-vue-scpoed-css 但是貌似不太好用，可配置项也比较少，期待后面的完善。

  // ESLint formatter
  "eslint.format.enable": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint", // 全局 formatter
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint" // vue formatter
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint" // js formatter
  },

使用Vetur格式化就无法自动符合.eslintrc.js里定义的规则了，只能配置Vetur的格式化规则，配合ESLint检查提示，手动调整到格式化的结果符合ESLint规则。

  // vue文件使用vetur格式化
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html", // vue文件中html模板使用js-beautify-html格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript", // vue文件中js代码使用vscode-typescript格式化
  "vetur.format.options.tabSize": 4,
  "vetur.format.scriptInitialIndent": true, // <script>标签里的代码初始缩进
  "vetur.format.styleInitialIndent": true, // <style>标签里的样式初始缩进
  "vetur.format.defaultFormatterOptions": {
    // 参考: https://vuejs.github.io/vetur/guide/formatting.html#settings
    "js-beautify-html": {
      /**
       * 参考: https://github.com/beautify-web/js-beautify
       */
      "indent_size": 4, // 每下一个级别的缩进尺度，该值为 indent_char 的倍数
      "indent_char": " ", // 一个缩进尺度的填充内容
      "indent_with_tabs": false, // 以 tab 为缩进内容，该值为 true 时会覆盖 indent_char
      "wrap_attributes_indent_size": 8, // Indent wrapped attributes to after N characters - 属性换行缩进的级别数
      "eol": "\n", //
      "end_with_newline": true, //
      "indent_level": 0, //
      "preserve_newlines": true, // 保留空行
      "max_preserve_newlines": 10, // 最大保留空行数
      "space_in_paren": false, //
      "space_in_empty_paren": false, //
      "jslint_happy": false,
      "space_after_anon_function": false,
      "space_after_named_function": false,
      "brace_style": "collapse",
      "unindent_chained_methods": false,
      "break_chained_methods": false,
      "keep_array_indentation": false,
      "unescape_strings": false,
      "e4x": false,
      "comma_first": false,
      "operator_position": "before-newline",
      "indent_empty_lines": false,
      "templating": ["auto"],
      // "wrap_line_length": 0, // Maximum amount of characters per line (0 = disable)
      
      /**
       * 参考: https://github.com/vuejs/vetur/blob/master/server/src/modes/template/services/htmlFormat.ts
       */
      // "end_with_newline": false, // End output with newline
      // "indent_char": ' ', // Indentation character
      "indent_handlebars": false, // e.g. {{#foo}}, {{/foo}}
      "indent_inner_html": false, // Indent <head> and <body> sections
      "indent_scripts": "keep", // [keep|separate|normal]
      // "indent_size": 2, // Indentation size
      // "indent_with_tabs": false,
      // "max_preserve_newlines": 1, // Maximum number of line breaks to be preserved in one chunk (0 disables)
      // "preserve_newlines": true, // Whether existing line breaks before elements should be preserved
      "unformatted": [], // Tags that shouldn't be formatted. Causes mis-alignment
      "wrap_line_length": 0, // Lines should wrap at next opportunity after this number of characters (0 disables)
      /**
       * Wrap attributes - 属性换行:
       *    force:                  Wrap each attribute except first                            除了第一个属性外强制换行
       *    force-aligned:          Wrap each attribute except first and keep aligned           除了第一个属性外强制换行并且对齐
       *    force-expand-multiline: Wrap each attribute                                         强制展开成多行
       *    aligned-multiple:       Wrap when line length exceed, align attributes vertically   按 wrap_line_length 指定长度换行
       *    preserve:               Preserve wrapping of attributes                             未超长保留当前的换行不变，超长行按 wrap_line_length 换行
       *    preserve-aligned:       Preserve wrapping of attributes but align                   同 preserve，但是要齐
       *
       * 遗留问题:
       *    这里的aligned是与哪个对齐?
       */
      "wrap_attributes": "preserve", // Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]
    },
  },