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

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

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

使用时候遇到的一些问题

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

原因可能是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格式化配置