How to Format Code Automatically with Prettier and VS Code
In this video tutorial, I explain step by step how to configure automatic code formatting with Prettier and Visual Studio Code.
Commands used in this video:
– clone my example project: git clone git@github.com:ttarnowski/example-js-project.git
– add prettier to your project: npm install –save-dev prettier (or if you use yarn: yarn add -D prettier)
Automatic Code Formatting with Visual Studio Code and Prettier Article:
https://blog.tomasztarnowski.com/automatic-code-formatting-with-visual-studio-code-and-prettier
Useful links:
Official prettier documentation: https://prettier.io/docs/en/index.html
Config file(.prettierrc) options reference: http://json.schemastore.org/prettierrc
Prettier Visual Studio Code extension: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Software used in the video:
Visual Studio Code IDE:
https://code.visualstudio.com/
Thank you for watching and see you soon!
00:00 Intro
00:46 Adding Prettier to a project
03:15 Installing Prettier VS Code extension
03:48 Configuration of the Prettier Extension
06:33 Autoformatting demonstration
08:23 .prettierrc config file
10:43 Summary and the end