Use Prettier to format code management tools

Prettier is a powerful code formatting tool that supports JavaScript, TypeScript, CSS, SCSS, Less, JSX, Angular, Vue, GraphQL, JSON, Markdown and other languages. Basically, it can handle all file formats that can be used in the front end. It is the most popular code formatting tool at the moment.

1. Install prettier

npm install prettier -D

2. Configure the .prettierrc file:

• useTabs: use tab indentation or space indentation, select false;
• tabWidth: When the tab is a space, how many spaces are there, choose 2;
• printWidth: The length of the characters in the line, 80 is recommended, and some people like 100 or 120;
• singleQuote: Use single quotes or double quotes, select false, use double quotes;
• trailingComma: Whether to add trailing commas in multi-line input, set to none;
• semi: Whether to add a semicolon at the end of the statement, the default value is true, select false to indicate no addition;

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "none",
  "semi": false
}

3. Create a .prettierignore ignore file

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

4. VSCode needs to add prettier plug-in

5. Configure the "scripts" script in the package.json file

"prettier": "prettier --write ."

 6. Terminal run command:

npm run prettier

You can see that the terminal outputs the following content, and the formatting code has been completed.