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 [e-mail]: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:
blog.tomasztarnowski.com/auto...
Useful links:
Official prettier documentation: prettier.io/docs/en/index.html
Config file(.prettierrc) options reference: json.schemastore.org/prettierrc
Prettier Visual Studio Code extension: marketplace.visualstudio.com/...
Software used in the video:
Visual Studio Code IDE:
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

[@nataliamachalica7862]

thank you so so much! I was struggling with indentation in pasting fragments of code. Though it looked fine in VS Code, it was all messed up in repo and I have to fix everything manually. Much appreciated!

[@tomasztarnowski4434]

You're welcome, Natalia. I'm happy the video was helpful!

[@mohamed6272]

Thank you so much for this helpful video!

[@tomasztarnowski4434]

Thanks! I'm glad I could help!

[@Jatin-Rohilla.]

nice

[@TechiesUnofficial]

is prettierrc file project based? what if I want something like this for all my projects?

[@tomasztarnowski4434]

Good question, TheChrisnextel. The answer is yes ".prettierrc" config is limited to a single project only and while you can configure VS Code extension globally to use prettier for every single project it is not possible to specify global .prietterrc config file (that defines autoformatting rules).
Here's the explanation why they use this approach (from the official docs):
"Prettier intentionally doesn’t support any kind of global configuration. This is to make sure that when a project is copied to another computer, Prettier’s behavior stays the same. Otherwise, Prettier wouldn’t be able to guarantee that everybody in a team gets the same consistent results."
prettier.io/docs/en/configuration.html

[@yasirshahzad3732]

how to configure prettier for stroustrup format for curley braces?

[@tomasztarnowski4434]

I'm not sure if that's possible you can check the JSON schema but it doesn't seem to be an option to do that there:
json.schemastore.org/prettierrc

[@sumitkundu22]

For C/C++ which auto formater should be use??

[@tomasztarnowski4434]

I recommend Clang-Format extension: marketplace.visualstudio.com/items?itemName=xaver.clang-format
just install it in VS Code and change formatter to "Clang-Format" - here is step-by-step explanation: ruclips.net/video/tc3Qnf79Ny8/видео.html

[@lonewolfcoding5208]

how to format all programming language? i want to format php

[@tomasztarnowski4434]

hey Arturo,
you can try to use this prettier plugin: github.com/prettier/plugin-php
or
look for "PHP formatter" VS Code extension
you can try this one for example: marketplace.visualstudio.com/items?itemName=kokororin.vscode-phpfmt&ssr=false#overview
install it and choose it from "Editor: Default Formatter" dropdown in VS Code Settings

[@samratjaiswal3801]

I am not sure what have I done wrong, but my text still doesn't format I have tried reinstalling everything, but nothing seems to work. Any suggestion?

[@tomasztarnowski4434]

hey Samrat, can you check if you get any errors in the "Output" tab in Visual Studio Code?
Also make sure you have the latest version of VS Code.

[@samratjaiswal3801]

@@tomasztarnowski4434 Thank you for that. There are no errors in the output tab. Also, i reinstalled everything but with no result.

[@tomasztarnowski4434]

have you tried to install prettier as a global npm package:
npm install -g prettier ?
also in your project directory check if there's a folder called ".vscode" with file "settings.json" inside (if not create one please). Make sure there's following configuration inside this "settings.json" file:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}

[@samratjaiswal3801]

@@tomasztarnowski4434 I can't thank you enough, this worked. I was so annoyed earlier. Thank you so much!

[@tomasztarnowski4434]

you're welcome, Samrat!

[@martyrd0m]

No formatter can format JSON inside script tags.

[@tomasztarnowski4434]

can you give me an example? (I just quickly checked and it seems to be formatting json fine even if the code is inside the tags)

[@martyrd0m]

​@@tomasztarnowski4434 This won't get prettified inside an html file.
[{"name":"video-html5/circle-preloader","path":"bundles/video-html5"},{"name":"video-html5/context-menu","path":"bundles/video-html5"},{"name":"video-html5/link-bubble","path":"bundles/video-html5"},{"name":"video-html5/log","path":"bundles/video-html5"},{"name":"video-html5/share","path":"bundles/video-html5"},{"name":"video-html5/stat","path":"bundles/video-html5"},{"name":"video-html5/storage","path":"bundles/video-html5"},{"name":"video-html5/video-api-response","path":"bundles/video-html5"}]

[@tomasztarnowski4434]

hey the reason it doesn't prettify is the "type" attribute of a script tag if you change to it should work.