Prettier uses ESLint to define code rules, while Prettier automatically formats code according to ESLint’s code rules.

ESLint configurations refer to yesterday’s article: How to use ESLint in TypeScript projects

1. Introduction

In yesterday’s article, we learned how to add ESLint to a project and configure rules to check and fix code.

NPM run Lint :fix NPM run Lint :fix NPM run Lint :fix This is stupid, and I wish it were automated and not manual.

Prettier, especially the VS Code plug-in for Prettier-code Formatter.

2. Understand the Prettier

Prettier is a (configurable) code formatter. ESLint can also format code, but it mainly reminds us where code is being written that doesn’t conform to rules.

Prettier can trigger code formatting when a file is saved or manually. By default, Prettier configures a common code format.

Use ESLint + Prettier for formatting code purposes.

3.ESLint and Prettier

13. ESLint and Prettier’s condemnation:

ESLint is responsible for code style definition

Prettier is responsible for automatic formatting according to the style defined by ESLint

This is a perfect match.

4. You need to prepare

  • You need to have a VS Code editor
  • There is a project configured with ESLint (if not, download the example project from my previous article: github.com/cmdfas/type…

5. Use the Prettier

Prettier is most commonly used by installing an extension of prettier-code Formatter in VS Code.

Having the extension installed allowed me to format the code as soon as I saved it, instead of having to do it manually.

Let’s start the configuration

  1. Prettier-code Formatter VS Code extension prettier-code Formatter VS Code

  2. To configure Prettier, use the Command + Shift + P (CTRL in Windows) shortcut key to open the command window and enter Preferences Open Settings

Select Open Settings(JSON) and add it at the end of the Open JSON file

// Format code while pasting
"editor.formatOnPaste": true.// Format the code when saving
"editor.formatOnSave": true.Copy the code

You don’t have to set it if you have the same configuration.

Next, configure the typescript file formatting tool as Prettier. For JavaScript or other types of files, change [typescript] to the corresponding name.

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

Then we go to the code and change the SRC /index.ts code to look like this

console.log('Hello Oufu Koos')
console.log("Hello, Oufuchus.")
console.log("Hello, Oufuchus.")
console.log("Hello, Oufuchus.")
console.log("Hello, Oufuchus.")
Copy the code

When we save the code in COMMAND (CTRL for Windows) + S, we find that the end of the console automatically adds a semicolon. Prettier is successfully configured.

console.log("Hello, Oufuchus.");
console.log("Hello, Oufuchus.");
console.log("Hello, Oufuchus.");
console.log("Hello, Oufuchus.");
console.log("Hello, Oufuchus.");
Copy the code

6. Manually format a single file

Sometimes we may not need to save the formatting, we can manually through the shortcut command to manual formatting.

By using the Command + Shift + P (CTRL on Windows) shortcut to open a command window, typing format will format the file.

An even faster command is shift + option + f to format the current file directly.

This is the end of our configuration.

Comments or private messages are welcome if you have any questions.

nagging

If this article is useful to you, your likes, comments and concerns are the biggest encouragement for me O(∩_∩)O👍👍👍

I am aufu Kosi, pay attention to me, progress a little bit every day, as soon as possible to achieve financial freedom.