Setup Prettier For Typescript
Nov 29th, 2019 - written by Kimserey with .
One thing making developers life easier is automatic code formatters. Prettier is one of the most famous code formatter, for most part it does what you would expect it to do and most of the time it formats code in a better way you would yourself do. But on top of making your life easier by formatting your own code, it can be used to enforce a convention in term of code formatting accross your team. One of the language supported is Typescript as we will see today.
Why Prettier
I’ll start this post by why using Prettier and simply quoting the documentation philosophy which are the reason why it is such a great tools:
1
Prettier has a few options because of history. But we don’t want more of them.
Essentially Prettier targets very common formatting problems,
- tabs,
- quotes,
- semicolons,
- alignment,
- line length,
- spacing,
- eof.
This removes the need for countless comments in PRs and countless warnings from tslint for changing those. It’s extremely simple and extremely convenient.
Add Prettier
We can install Prettier locally by saving it in dev dependencies:
1
npm install --save-dev --save-exact prettier
Or we can install it globally if we want to use it in an adhoc way:
1
npm install --global prettier
We can then try on files via the CLI:
1
prettier --single-quote --tab-width 2 main.ts
The options are available on the official documentation.
If we installed Prettier locally in our application, we can also create a .prettierrc at the root, and specify the options in it:
1
2
3
4
{
"singleQuote": true,
"tab-width": 2
}
Configure VSCode
Now that we have Prettier installed, we can install the VSCode Prettier Code formatter extension.
Then set it as formatter for certain type of files for the current workspace in .vscode/settings.json:
1
2
3
4
5
6
{
"typescript.format.enable": false,
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
This will disable the default formatter for Typescript and use the extension Prettier formatter instead.
Settings can also be added at user level by clicking CMD + SHIFT + P then “Format document with” and select default formatter. This will change the user settings which can be found under $HOME/Library/Application Support/Code/User.
Lastly set the formatter to run on save:
1
2
3
4
5
6
7
{
"typescript.format.enable": false,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true
}
Configure tslint
Because we are configuring Prettier .prettierrc, some rules overlap with the rules from Tslint like the spacing for example. What we want to do is to let Prettier handle formatting, while letting Tslint handle code quality.
As we use the VSCode extension, the only package we need to add is the configuration extension:
1
npm install --save-dev tslint-config-prettier
Then in Tslint update extends:
1
"extends": ["tslint-config-prettier"]
That will disable the conflicting rules with Prettier (if any other rules conflict, set them to false). And that concludes today’s post!
Conclusion
Today we looked at Prettier, a great code formatter. We started by looking at why we would use it over other formatters, then we moved on to how to enable it with VSCode and lastly we looked at how to make it work with tslint.