VS Code Prettier 格式化Vue代码及遇到问题

超、凢脫俗 2022-12-07 15:27 949阅读 0赞

prettier是一个专业代码格式化工具，支持JS、TS、sass、less、HTML、java、yaml、md、swift等等，主流的语言大多都支持。提供了VS、VSC 、Vim 、Atom、sublime 、WebStorm 等 IDE/编辑器插件，可以很方面安装及使用。下面介绍下 vscode 下的 配合eslint检查 vue代码的相关配置介绍和一些问题。

**prettier **的配置项非常少，可以参加官方文档，不过后面遇到一些问题，后面再说要怎么更改。

## 使用时候遇到的一些问题 ##

Q1：**包裹文字时候结束标签的结尾尖括号掉到了下一行**。如图：

![format_png][]

原因可能是Vue模板的格式逻辑不严谨问题，不过只要通过Prettier设置即可解决:

Q2: **Prettier: 在编辑器设置的选项无效？**

如果更改了 Prettier 的设置选项，但实际不起作用，可以尝试在根目录新建一个 .prettierrc.json 文件，通过json来配置，这样做的好处可以把配置上传到代码服务器，团队都使用相同格式的代码。如：

{
        "semi": false,//末尾无分号
        "singleQuote": true, // 默认单引号 ，false 默认使用双引号
        "htmlWhitespaceSensitivity": "ignore" // 问题1中的设置
      }

# Prettier格式化配置 #

在settings.json中配置：

{
      // 使能每一种语言默认格式化规则
      "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
     "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      /*  prettier的配置 */
      "prettier.printWidth": 100, // 超过最大值换行
      "prettier.tabWidth": 4, // 缩进字节数
      "prettier.useTabs": false, // 缩进不使用tab，使用空格
      "prettier.semi": true, // 句尾添加分号
      "prettier.singleQuote": true, // 使用单引号代替双引号
      "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
      "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
      "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
      "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
      "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
      "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
      "prettier.htmlWhitespaceSensitivity": "ignore",//包裹文字时候结束标签的结尾尖括号掉到了下一行
      "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
      "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
      "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
      "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
      "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
      "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
      "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
      "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
    }

其他格式化settings.json配置：

{
      "files.autoSave": "afterDelay",
      "liveServer.settings.CustomBrowser": "chrome",
      // #每次保存的时候自动格式化 
      "editor.formatOnSave": false,
      "html.format.indentInnerHtml": true,
      "html.format.indentHandlebars": true,
      "eslint.format.enable": true,
      //html格式化依赖  默认为none
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      //函数前加空格
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      //没有下边这个 上边不生效
      "vetur.format.defaultFormatter.js": "vscode-typescript",
     // 禁止标签属性换行
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_line_length": 120,
          "wrap_attributes": "auto",
          "end_with_newline": false
        }
      },
    }

在vscode中setting.json做一些设置：使用下面的配置就可以直接格式化vue文件。

eslint设置 \{"language":"vue","autoFix": true\} 第一可以检测到vue,第二用eslint解决space-before-function-parent。

"eslint.validate": ["javascript", "javascriptreact", {"language":"vue","autoFix": true}],
    "eslint.autoFixOnSave": true,

vuter需要的设置

"vetur.format.defaultFormatter.html": "prettyhtml",
    "vetur.format.defaultFormatter.js": "prettier",

**vuter引用格式化工具的时候的配置，例如prettier是要在这里配置,而直接在setting.json中对prettier的设置是无效的。** 这里的配置让prettier直接就格式化完了基本所有的东西，包括双引号，尾部;的问题，eslint的autofix只是解决了function参数前要插入一个空格的问题。

"vetur.format.defaultFormatterOptions": {
      "prettier": {
        "singleQuote": true,
        "semi": false,
      }
    },

配置好就可以快乐使用格式化了。

参考：

[Prettier格式化配置][Prettier]

[format_png]: /images/20221123/1f1f4543f51a43458da355ccb30c05d5.png
[Prettier]: https://www.jianshu.com/p/a42f26dcc8ff