笔记-Prettier格式化代码

Prettier官方文档

Prettier是一个自定义的代码格式化工具，它支持以下文件格式：

• JavaScript，including ES2017
• JSX
• Angular
• Vue
• Flow
• Typescript
• CSS，Less and SCSS
• HTML
• JSON
• GraphQL
• Markdown，including GFM and MDX
• YAML

安装

yarn

yarn add prettier --dev --exact
## or globally
yarn global add prettier

npm

npm install --save-exact prettier
# or globally
npm install --global prettier

配置

Prettier提供了一套默认的配置，类似于eslint的自定义配置，它通过三种方法：

1. 项目根目录下创建.prettierrc文件
2. 项目根目录下创建prettier.config.js文件
3. 在package.json文件中配置prettier属性

举例：

{
	"tabWidth": 2, // tab缩进大小，默认为2
	"useTabs": true, // 使用tab缩进，默认false
	"semi": false, //   使用分号，默认true
	"singleQuote": true, // 使用单引号，默认false（在jsx中配置无效，默认都是双引号）
	"TrailingCooma": "none", // 行尾逗号，默认none，可选 none｜es5｜all，es5包括es5中的数组、对象，all包括函数对象等所有可选
	"bracketSpacing": true, // 对象中的空格 默认false
	"jsxBracketSameLine": false, // JSX标签闭合位置 默认false
	"arrowParens": "avoid", // 箭头函数参数括号，默认avoid 可选avoid｜always，avoid能省略括号的时候就省略 例如x => x，always总是有括号
}

忽略：

如果存在不想格式化的文件，可以忽略格式化。使用方式有两种：

1. 项目根目录下创建.prettiergnore文件
2. 代码注释

<div>
  {/* prettier-ignore */}
  <span   			ugly    format=''   />
</div>