perttire配置

项目引入

yarn add prettier -D

如果你使用eslint，那么你还可以做如下配置

yarn add eslint-config-prettier -D

  // 继承规则
  extends: ["plugin:vue/essential", "airbnb-base", "prettier"],

当完成这一步，你就可以通过命令，去转义代码为格式化后的文件

但是你会发现下载vscode的插件perttier-eslint，格式化不起作用了，而且因为你的继承规则写在最后，覆盖了之前的规则，导致一些格式错误，eslint也不提示了。

yarn add eslint-plugin-prettier -D

//配置插件
plugins: ["vue", "prettier"],
rules: {
   // 不符合 prettier 规则的代码，要进行错误提示（红线）
   "prettier/prettier": "error"
}

当添加了这个eslint插件，并在rules中配置了规则之后，终于实现效果了

目前可以根据命令把相应文件格式化，并且也有了错误提醒，还可以通过VScode插件，手动格式化当前文件代码

通过上面的介绍，我们知道了可以通过：

设置 "extends": [ "prettier" ]，用 eslint-config-prettier 解决冲突重复。

再用 eslint-plugin-prettier 将 prettier 的输出放到 eslint 中，对应设置是 { "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } }

但是这样很麻烦。简便的替代做法是yarn add perttier -D 后设置"extends": ["plugin:prettier/recommended"]，和上面效果相同。注意也还是要下载eslint-config-prettier 和eslint-plugin-prettier

待实现，git提交时，自动格式化代码功能

使用 husky + lint-staged 实现

1. 下载插件yarn add husky lint-staged -D

2. 生成命令文件夹.husky npx husky install

3. 创建husky的命令文件 npx husky add .husky/pre-commit "yarn lint-staged"

//package.json中添加 lint-staged的配置
{
  ...,
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md,vue}": [
      "prettier --write",
      "git add -A"
    ]
  }
}

perttier配置

{  ​
    printWidth: 80,
    // 打印宽度，默认是 80 列
    ​tabWidth: 2,
    // 缩进所占列数，默认是 2 列
    ​useTabs: false,
    // 缩进风格是否是Tab，默认是 false ，使用空格缩进
    ​semi: true,
    // 在语句末尾添加分号，默认是 true
    singleQuote: false,
    // 使用单引号，默认是 false
    ​quoteProps: "as-needed",
    // 对象中的属性使用引号，
    // "as-needed" 只对需要的属性加引号，
    // "consistent" 同一对象中属性引号保持统一，有福同享，有难同当
    // "preserve" 强制使用引号。
    // 默认为 as-needed
    ​jsxSingleQuotes: false, // JSX中使用单引号，默认是 false
    ​trailingComma: "none",
    // 多行时是否结尾添加逗号
    // "es5" ES5中允许逗号的容器中添加逗号，比如 objects/arrays
    // "all" 尽可能添加逗号
    // "none" 不允许添加逗
    // 默认值是 "es5"
    ​bracketSpacing: true,
    // 是否保留对象内侧两端的空格，比如 { foo: bar } 和 {foo:bar} 的区别
    ​jsxBracketSameLine: false,
    // 多行 JSX 的元素是否能和属性同行，默认是 false
    ​arrowParens: "always",
    // 箭头函数参数使用圆括号包裹 比如 (x) => x 和 x => x 的区别
    // "always" 总是包裹
    // "avoid" 尽可能避免包裹
    ​rangeStart: 0,
    // 只格式化文件中的一部分，范围开始于第几行
    ​rangeEnd: Infinity,
    // 只格式化文件中的一部分，范围结束于第几行
    ​parser: "none"
    // 指定解析器，Prettier会根据文件路径推断解析器
    // 比如 .js 文件使用 babel 解析，.scss 文件使用 post-scss 解析
    ​filepath: "none"
    // 指定用于推断使用那个解析器的文件名
    ​requirePragma: false
    // 限制只格式化在文件顶部做了需格式化标识的文件
    // 适用于在大型未格式化项目中，先指定少量文件格式化
    ​ insertPragma: false
    ​ proseWrap: "preserve"
    ​htmlWhitespaceSensitivity: "css"
    // HTML 文件的空格敏感度
    // "css" 和 css 的 display 属性保持一致
    // "strict" 空格敏感
    // "ignore" 空格不敏感
    ​vueIndentScriptAndStyle: false
    // 是否对 Vue 文件中 <script> 和 <style> 标签内的代码应用缩进
    ​ endOfLine: "lf"
    // 换行符
    ​embeddedLanguageFormatting: "auto"
    // 是否格式化嵌入引用代码，比如 markdown 文件中嵌入的代码块
    // "auto" Prettier 自动识别并格式化
    // "off" 关闭自动格式化
}