Prettier 代码格式化工具

Prettier 是一个代码格式化工具，它可以支持 js/jsx/ts/flow/json/css/less/scss 等文件格式。

为什么要使用 Prettier？

用来替代 lint 中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查出问题之后还需要手动修改，而通常这样的错误都是空格或者符号之类的，这样相对来说不太优雅，利用格式化工具自动生成省时省力。

VSCode 配置 Prettier

1. 在 VSCode 安装 Prettier - Code formatter 插件。

2. 在项目的根目录配置 .prettierrc

{
  "printWidth": 100, //每行到多少长度开始折行
  "tabWidth": 2,
  "singleQuote": true, //单引号
  "trailingComma": "none", //数组、对象最后一个元素的尾逗号
  "bracketSpacing": true, //花括号前后空格
  "jsxBracketSameLine": true, //使多行JSX元素最后一行末尾的 > 单独一行
  "parser": "babel", //指定使用哪一种解析器
  "semi": true, //是否在行尾加分号
  "useTabs": true, //使用tab（制表符）缩进而非空格
  "arrowParens": "avoid", //只有一个参数的箭头函数的参数是否带圆括号（默认avoid不带）
  "jsxSingleQuote": true, //在JSX中使用单引号
  "htmlWhitespaceSensitivity": "ignore", //为 HTML 文件定义全局空格敏感度
  "quoteProps": "as-needed" //自定义引号配置
}

放到项目中时注释要去掉。

好了，这样 Prettier 已经安装、配置完成了，以后用 Shift+Alt+F 格式化代码的时候就会按照 Prettier 的配置项进行格式化。

VSCode 中，Prettier 插件使用配置文件的优先级：.prettierrc > .editorconfig > Prettier插件默认设置。

如何在保存文件时自动用 Prettier 格式化？

VSCode 左上角 -》首选项 -》设置 -》搜索 Prettier -》选择“Prettier - Code formatter” -》在 settings.json 中编辑 -》添加 "editor.formatOnSave": true