代码格式化

prettier

prettier 是一款强势武断的代码格式化工具，它几乎移除了编辑器本身所有的对代码的操作格式，然后重新显示。就是为了让所有用这套规则的人有完全相同的代码。在团队协作开发的时候更是体现出它的优势。与 eslint，tslint 等各种格式化工具不同的是，prettier 只关心代码格式化，而不关心语法问题。

配置

• vscode 安装 prettier 插件
• 全局配置：setting.json
• 项目配置：prettier.config.js、.prettierrc

  // "prettier.configPath": "./prettier.config.js",
  "prettier.printWidth": 110,
  "prettier.tabWidth": 2,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.useTabs": false,
  "prettier.trailingComma": "es5",
  "prettier.bracketSpacing": true,
  "prettier.arrowParens": "avoid",
  "prettier.proseWrap": "preserve",
  "prettier.endOfLine": "auto",
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.bracketSameLine": false,
  "prettier.vueIndentScriptAndStyle": true,
  "prettier.useEditorConfig": false,

prettier 限制

standard 规则要求函数名和括号之间有一个空格，这就是 space-before-function-paren 规则（ESLint 本身也会默认开启这个规则）。 但是 prettier 完全没有这个规则。

解决：

1. eslint 和 prettier 会有冲突，安装prettier-eslint包

prettier 的一些规则和 eslint 的一些规则可能存在冲突，所以需要将 eslint 的一些可能与 prettier 发生冲突的代码格式化规则关闭。每次 git commit 的时候，要先执行 prettier 以及 eslint 对代码进行格式化和质量检查，确保代码没有问题之后再提交。

Vue 项目使用 eslint + prettier 规范代码风格

prettier-eslint 是怎么让结果变得正确了呢？昨天我去它的 github 看了看，原来它是先把代码用 prettier 格式化，然后再用 ESLint fix。这和 vscode 保存文件时的流程是相反的。这样等于是调转了顺序，最后我们只要 ESLint fix 的结果就行了。

其他点

.prettierrc 的优先级会高于在 vscode 全局配置 settings.json 中格式化配置的优先级

vetur + prettier

Vetur 插件内部默认使用 prettier 进行格式化的，但是由于 Vetur 的默认格式化配置与我们期望的有所出入，所以我们需要单独对 Vetur 的 prettier 进行配置

配置

1. 配置格式化方式为 ts

  // prettier在格式化的时候 函数名后不会留有空格。需要使用vetur调用vscode自带的ts格式化插件解决这个问题。
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true

  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, // 格式化不加分号
      "singleQuote": true, // 格式化以单引号为主
      "printWidth": 120, // 超过最大值换行
      "tabWidth": 2, // 缩进字节数
      "useTabs": false, // 缩进不使用tab，使用空格
      "proseWrap": "preserve", // 代码超出是否要换行 preserve保留
      "arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
      "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
      "disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
      "endOfLine": "auto", // 结尾是 \n \r \n\r auto
      "eslintIntegration": true, //不让prettier使用eslint的代码格式进行校验
      "htmlWhitespaceSensitivity": "ignore",
      "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
      "jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
      "parser": "babylon", // 格式化的解析器，默认是babylon
      "requireConfig": false, // Require a 'prettierconfig' to format prettier
      "stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
      "trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
      "tslintIntegration": true, // 不让prettier使用tslint的代码格式进行校验
      "ignorePath": ".prettierignore" // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    },
    "js-beautify-html": {
      // - auto: 仅在超出行长度时才对属性进行换行。
      // - force: 对除第一个属性外的其他每个属性进行换行。
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
      // - force-expand-multiline: 对每个属性进行换行。
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
      "wrap_attributes": "auto",
      "wrap_line_length": 100
    }
  },

1. 需要增加其他配置，才能让 vetur 下的 format 生效

  // 默认的格式化程序 【重要】：配置了才会生效
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
    },
 "vetur.format.defaultFormatter.js": "prettier", // 配置成 prettier，vetur下的prettier才生效