How to set prettier

#What is Prettier

Prettier is a code formatting tool that can support JS/JSX/TS/Flow/JSON/CSS/LESS and other file formats.

Why use Prettier

to replace some scenarios in lint, such as semicolons/tab indentation/spaces/quotes, These need to be modified manually after the lint tool detects problems. Usually such errors are spaces or symbols, which is relatively inelegant. Using the formatting tool to automatically generate them saves time and effort.

How to customize the configuration

Prettier provides a set of default configurations, so how to modify the configuration items to conform to our own code specifications? There are three ways to do it:

(1) .prettierrc file

(2) prettier.config.js file

(3) Configure prettier attributes in package.json

Prettier will check the configuration file and automatically read the configuration in the file. We only need to choose one method to configure. I am choosing the second one now.

It feels very similar to the lint tool, right?

Configurable properties

Share my configuration file

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

More

FAQ, please visit the PHP Chinese website.

The above is the detailed content of How to set prettier. For more information, please follow other related articles on the PHP Chinese website!