Shulou(Shulou.com)06/03 Report--

This article is about how to set up prettier. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

What is Prettier?

Prettier is a code formatting tool that supports file formats such as JS/JSX/TS/Flow/JSON/CSS/LESS.

Why use Prettier?

Used to replace some scenarios in lint, such as semicolons / tab indentation / spaces / quotes, which need to be manually modified after the lint tool detects a problem, and usually such errors are spaces or symbols, which is relatively inelegant, saving time and effort by using formatting tools to generate automatically.

How to customize the configuration

Prettier provides a set of default configurations, so there are three ways to modify the configuration items to conform to our own code specifications:

(1). Prettierrc file

(2) prettier.config.js file

(3) configure prettier attribute in package.json

Prettier checks the configuration file and automatically reads the configuration in the file. We just need to choose one way to configure it. I choose the second one now.

It feels a lot like lint tools, doesn't it?

Configurable properties

Share my profile

Module.exports = {/ / tab indent size, default is 2tabWidth: 2 tab indentation Default falseuseTabs: true,// uses semicolons, default truesemi: false,// uses single quotes, default false (invalid configuration in jsx, default is double quotes) singleQuote: true,// line end comma, default none, optional none | es5 | all// es5 includes arrays in es5, objects / / all, including function objects, etc. All optional TrailingCooma: "none" / / spaces in the object default true// true: {foo: bar} / / false: {foo: bar} bracketSpacing: true,// JSX tag closing position default false// false: / / true: jsxBracketSameLine:false,// arrow function parentheses default avoid optional avoid | when always// avoid can omit parentheses, it is omitted, for example, x = > xamp / always always has parentheses arrowParens: 'always',} thank you for reading! This is the end of the article on "how to set up prettier". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.