How to Format Code Automatically with Prettier and VS Code

Published: 14 October 2021
on channel: Tomasz Tarnowski

22,133

185

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/auto...

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/...

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

On this page of the site you can watch the video online How to Format Code Automatically with Prettier and VS Code with a duration of hours minute second in good quality, which was uploaded by the user Tomasz Tarnowski 14 October 2021, share the link with friends and acquaintances, this video has already been watched 22,133 times on youtube and it was liked by 185 viewers. Enjoy your viewing!