文档&简介

Prettier：Perttier 官方文档

安装

npm install prettier --save-dev
or
yarn add prettier --dev

简单使用

• vscode 应用市场安装 Prettier 插件
• 在项目根目录创建添加一个 perttier.config.js / .prettierrc.js 或 .prettierrc.json 让您的编辑器知道您正在使用 Prettier。
• 格式化你的代码以获得 Prettier 的体验

perttier.config.js 或 .prettierrc.js 推荐使用以下配置

module.exports = {
  printWidth: 120, // 每行代码最大长度
  tabWidth: 2, // 一个tab代表几个空格数，默认为80
  useTabs: false, // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
  semi: true, // 声明后带分号
  singleQuote: true, // 使用单引号
  jsxSingleQuote: true, // jsx 使用单引号
  jsxBracketSameLine: true, // 启用jsx语法，> 放在末尾
  trailingComma: 'none' // 在多行逗号分隔的句法结构中尽可能打印尾随逗号
}

.prettierrc.json 推荐使用以下配置

{
  "printWidth": 120, // 每行代码最大长度
  "tabWidth": 2, // 一个tab代表几个空格数，默认为80
  "useTabs": false, // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "semi": true, // 声明后带分号
  "singleQuote": true, // 使用单引号
  "jsxSingleQuote": true, // jsx 使用单引号
  "jsxBracketSameLine": true, // 启用jsx语法，> 放在末尾
  "trailingComma": "none" // 在多行逗号分隔的句法结构中尽可能打印尾随逗号
}

无需安装vscode对应插件（当然安了最好），即可使用。

复杂使用

简单使用已经基本适用，想要提升代码阅读难度可以参考官方文档的相关配置。

开始格式化你的代码吧