Here’s how Prettier learned and used Prettier.

What is Prettier?

Prettier is a tool for formatting code, otherwise known as a package or plug-in. Its purpose is to “format code” and make it cleaner and easier to read. Prettier offers a variety of uses, including:

  • Command line tool
  • Use its API in Nodejs
  • Use it in a browser

The most common is to use it as a command-line tool. For example, there is a code file xx.js that reads as follows:

Const a = {name:' zhang3 ',age: 18,} const b=a.age+7;Copy the code

The contents can be formatted through the command line:

npx prettier index.js
## Output is as follows
# const a = {name: 'zhang3 ', age: 18};
# const b = a.age + 7;
Copy the code

Format the source file directly by prettier –write index.js

The characteristics of the Prettier

Prettier, as a tool for formatting code, has its own formatting rules.

Every team and every developer has their own preferences about how their code should be formatted, so there is a constant debate about code style. There is a lot to be said and there is a lot to be said. Who should we listen to? Prettier is to put an end to the argument that when people choose to use Prettier, they accept Prettier by default and do not use it.

Even so, Prettier provides some possible configurations because they are so desirable, such as:

  • Use single and double quotation marks
  • Do you want a semicolon at the end of a statement
  • Indent using TAB or Whitespace
  • Is the indent 2 or 4

In practice, we can change these options through the configuration file. Fortunately, Prettier does not provide many configurations and does not plan to add new ones. So it’s also a formatting tool with obvious self-rules.

Prettier vs. ESLint

The most famous of the Lint tools is ESLint, which contains rules in two parts:

  • Code formatRules such as:
    • Maximum length per line of code
    • Spaces between keywords
  • The code qualityRules such as:
    • Variables must be declared before they are used

Prettier can be used instead of code formatting rules. Code quality rules, Prettier cannot. So you have to use ESLint to do this. Therefore, Prettier focuses on formatting code, while ESLint focuses on improving code quality and reducing potential bugs.

The use of the Prettier

Prettier can be used in several ways. Prettier is commonly used on the command line in front-end projects.

Install the Prettier

Run the following command in your project:

npm install -D prettier 
Copy the code

Adding a Configuration File

Create two new files under the project root directory:

  • .prettierignore: The name of a file or directory formatted without Prettier, usually with and.gitignoreHave the same content
  • prettier.config.jsThe configuration file for: Prettier, the common configuration is as follows: 
    Module. exports = {// whether to use semicolon semi: true, // whether to use singleQuote: true, // tabWidth: 4, // whether to use TAB format useTabs: false, }Copy the code

package.jsonTo add formatting scripts

By adding scripts to the package.json scripts, we can format our code files from the command line. Format only the files under the/SRC file:

{
  "scripts": {
    "format-all": "prettier --write src/"
  }
}
Copy the code

Run NPM run format-all in the root directory of the project to see that all files in the SRC directory have been reformatted.

Added VSCode plug-ins and configuration

In practice, it would be too much trouble to run formatting commands every time we write code. So with the editor, automatic formatting when saving is very important.

Installing a plug-in

Install esbenp.prettier- VSCode in VSCode.

Add the configuration

To ensure that every developer running a project uses the same configuration, you need to specify a workspace level configuration for VSCode and commit it to git. Create the.vscode/settings.json file in the project root directory and add the following:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode"."editor.formatOnSave": true."[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"}},Copy the code

Here we use the esbenp.prettier-vscode plug-in as the formatting tool for the code and specify that the code is automatically formatted when the file is saved.

Prettier is already used to format code automatically when writing code in VSCode.

However, front-end projects typically use ESLint for code checking, so additional configuration is required to work with ESLint.

Use with ESLint

As mentioned earlier, ESLint’s rule set also includes rules in code format, so if you configure ESLint for automatic fixing in VSCode, it would conflict with Prettier. Therefore, the eslint-config-prettier configuration is used to disable formatting rules that conflict with prettier.

The installationeslint-config-prettier

Run under the project:

npm install -D eslint-config-prettier
Copy the code

Modify the ESLint configuration

Add the following configuration to the ESLint configuration:

{
   "extends": [
         "other config",
+ "prettier"]}Copy the code

Eslint-config-prettier The configuration of eslint-config-prettier disables all formatting rules, so be sure “prettier” ends in the extends. This way, ESLint will not report formatting problems in the editor.

3, Eslint-config-prettier not only disables formatting rules from the default ESLint rule, but also all formatting rules from plugins such as eslint-plugin-vue and eslint-plugin-react. So simply add “prettier” to extends. In versions prior to [email protected], “prettier/vue”, “prettier/ React “, etc. After 8.0.0, all the rules are centralized, so it is no longer necessary to specify this configuration.

Prettier now works perfectly in the project!

About eslint – plugin – prettier

Looking around the web for Prettier configurations, most people recommend using the eslint-plugin-Prettier plugin for ESLint.

As mentioned earlier, eslint-config-prettier disables formatting rules so that formatting errors in code do not show up as ESLint errors. While eslint-plugin-prettier adds the formatting rule for Prettier to ESLint rules, formatting problems show up in ESLint errors.

The drawback of using eslint-plugin-prettier is that it is slower than prettier alone.

Format code with Git hooks

If some team members do not have a code auto-formatting process configured, the unformatted code will be committed to the repository, so we can use Git hooks to format the code to be committed on commit.

The installationhusky 和 lint-staged

Install dependencies

npm install --save-dev husky lint-staged
npx husky install
Copy the code

Configuration husky

Add the prepare script to package.json:

{
  "scripts": {
+ "prepare": "husky install"}}Copy the code

Then add the pre-commit hook handler:

npx husky add .husky/pre-commit "npx lint-staged"
Copy the code

Lint-staged commands will then be executed when using Git COMMIT.

Configuration lint – staged

Lint-staged This library allows you to execute commands for files that are in a staged state. We add the following to package.json:

{
+ "lint-staged": {
+ "**/*": "prettier --write --ignore-unknown"
+}
}
Copy the code

Prettier –write –ignore-unknown when NPX Lint-staged commands are executed, Lint-staged code will be formatted using the prettier –write –ignore-unknown command.

conclusion

  1. Prettier is a tool for formatting code so that Prettier doesn’t have to choose a code style, just Prettier.
  2. As long as your code is clean, clean, and readable, you don’t need to obsess over which code style to use.
  3. useeslint-config-prettierWhen configuration is very simple, at the same time thaneslint-plugin-prettierBetter performance.

That’s the end of this article. Questions are welcome