prettier 配置推荐

安装 npm 包:
bash
```
npm i --save-dev prettier
```

vscode安装插件prettier - Code formatter
快捷键：alt + shift + f
文件根目录新建.prettierrc.js，并加入以下内容

json

module.exports = {
  printWidth: 100, // 设置prettier单行输出（不折行）的（最大）长度

  proseWrap: 'preserve', // 使用默认的折行标准

  tabWidth: 2, // 设置工具每一个水平缩进的空格数

  endOfLine: 'auto', // 文件换行格式 LF/CRLF

  useTabs: false, // 使用tab（制表位）缩进而非空格

  semi: false, // 在语句末尾添加分号

  singleQuote: false, // 使用单引号代替双引号

  quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号

  trailingComma: 'es5', // 在对象或数组最后一个元素后面是否加逗号

  bracketSpacing: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格

  arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号，参数个数为1时可以省略圆括号

  // parser: 'babylon', // Prettier 会自动从输入文件路径推断解析器

  jsxBracketSameLine: true, // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）

  filepath: 'none', // 指定文件的输入路径，这将被用于解析器参照

  requirePragma: false, // (v1.7.0+) Prettier可以严格按照按照文件顶部的一些特殊的注释格式化代码，这些注释称为“require pragma”(必须杂注)

  insertPragma: false, //  (v1.8.0+) Prettier可以在文件的顶部插入一个 @format的特殊注释，以表明改文件已经被Prettier格式化过了。

  // 配置覆盖
  overrides: [
    {
      files: ['*.js'],
      options: {
        singleQuote: true, // 使用单引号代替双引号
      },
    },
  ],
}

忽略文件

根目录下新建.prettierignore

tex

node_modules/
package-lock.json
*.md
dist/
build/

手动格式化

在package.json里添加

json

"scripts":{
  "format": "prettier --write './**/*.{js,ts,vue,json,css,less,scss}'",
}

保存文件时自动格式化方案1. vscode全局设置(当前项目设置.vscode/settings.json)
json
```
"editor.formatOnSave": true, //代码在保存的时候自动格式化
```
方案2. 装插件监听onChange
……

和eslint冲突解决

安装eslint-config-prettier, 将eslint里面和prettier重叠的配置都关掉

bash

npm install --save-dev eslint-config-prettier

在eslint的配置文件r.eslintrc.* 里面进行配置

json

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ],
  "plugins": ["prettier"]
}

换行符 LF, CRLF

推荐统一用LF

方案1：增加 .gitattribute 文件
在 repo 目录下新建 .gitattribute 文件，内容为：
```
* text eol=lf
```

方案2：修改 Git 配置

bash

# win
git config --global core.autocrlf true // 提交时转换为LF，检出时转换为CRLF

# mac linu unix
git config --global core.autocrlf input // 提交时把 CRLF 转换成 LF，签出时不转换

git config --global core.safecrlf true // 不允许混用

如果只需要修改当前仓库，去掉 --global。

prettier 配置推荐 ​

prettier 配置推荐