In this post, I would demo how to solve the issue that prettier not formatting our js code when saving in vscode.
- 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 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.)
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.