前端工程化：代码格式化插件prettier_.prettierrc.js用哪种方式导出

背景

我们写代码的时候，希望保存代码自动格式化，这里我们需要一个 vscode 插件叫：prettier

步骤

1、vscode 下载插件 prettier
2、项目根目录下创建文件 .prettierrc.js，具体看 这里

module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  // 对象字面量间的大括号使用空格
  bracketSpacing: true,
  // 结尾分号
  semi: false,
  // 单引号
  singleQuote: true,
  // JSX的>放在结尾，而不是另起一行
  jsxBracketSameLine: false,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

对于不同的选项可以看 这里
3、根目录添加 vscode 配置文件 .vscode/settings.json

{
  // 全局配置
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  // "editor.formatOnSave": true,
  
  // 针对不同语言的配置
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

参考资料

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 同 https://github.com/prettier/prettier-vscode

https://github.com/prettier/prettier 同 https://prettier.io/