others-How to solve the prettier not working problem when using vscode with prettier ?

1. Purpose

In this post, I would demo how to solve the issue that prettier not formatting our js code when saving in vscode.

2. Environment

  • Node.js v12.14.0
  • npm 7.11.2

3. The solution and reason

3.1 The background knowledge

What is prettier?

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary

It support to format such languages:

What’s the differences between prettier and linter?

Prettier are for formatting and linters are for catching bugs!

How to install prettier? You can just follow this link to install it or just install it as follows:

$ npm install --save-dev --save-exact prettier

And install it in vscode, click extensions on the left sidebar of vscode, and input prettier to search for the plugin:


Click install button at the right of the pane, and you are done.

3.2 The problem

Now when I try to change the code in vscode, and save it, I hope prettier would help me to format the code automaticcally. But nothing happens!!!

The below picture shows the failed formatting result of my code. It should help me to format from line 7 to line 9.


3.3 The solution

First, We should set the default formatter in vscode, just open code-->preferences-->settings of vscode, and input default formatter in the right pane to search for the setting, just as follows:


Second, we should enable the format-on-save-mode, goto settings, and find Text editor-->Formatting setting, and check the format on save checkbox, just as the below picture shows:


Now let’s test the prettier magic: (I tried to mess up the code format, andt then click to save the code.)


It works!

4. Summary

In this post, I tried to demo how to solve the prettier issue in vscode, the key point is to set prettier as the default formatter in vscode, and enable format-on-save setting in vscode.