How do I format all files in a Visual Studio Code project?

Question

Is there a way to format all files in a project without formatting each one individually?

score 228 · Answer 1 · edited Jul 12 '21 at 13:24

228

Use the extension called ”Format Files”. Here are the steps:

Download the extension called ”Format Files” on VSCode.
Select and open the folder with files to format on VSCode.
Press Ctrl+Shift+P to open command palette.
Enter "Start Format Files: Workspace" and select this option.

Source: https://marketplace.visualstudio.com/items?itemName=jbockle.jbockle-format-files

edited Jul 12 '21 at 13:24

Zedd

2,069
2
15
35

answered Oct 09 '18 at 12:54

Stellan Lindell

2,605
1
13
11

Got about halfway through then said "`An error occurred while running Format Files: Invalid count value`" – Aaron Franke May 02 '19 at 08:50
16

This caused all my files to be broken cuz it doesn't use prettier. It breaks JSX code PLEASE FOR THE LOVE OF ALL THAT IS GOOD DONT EVER DO THIS! YOu will regret it. – SweetFeet Nov 15 '20 at 03:17
18

@jake_314: Sorry that you had such a bad experience with this. But I hope you're using Git or took a backup of your code before doing major scripted code changing operations? Anyways I haven't tried this with JSX, but here is a link that might be helpful: https://www.rockyourcode.com/format-and-fix-all-files-with-prettier-and-es-lint-recursively/ – Stellan Lindell Nov 16 '20 at 09:33
3

Worth keeping an eye on the excluded items setting for this extension. It just tried to format my entire node_modules folder. But apart from that seems to work well – Liam Apr 05 '22 at 10:29
2

or right click on the folder and click on "Start Format File. this folder" – Shalabyer Jul 28 '22 at 12:55

score 144 · Answer 2 · edited Jan 26 '23 at 19:36

144

This works for me

Install prettier:

npm init 
npm i -D prettier

Add following script in package.json:

"pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\""

In this case only, i need to format my .js .jsx and .json files.

Run script:

npm run pretty

edited Jan 26 '23 at 19:36

ICW

4,875
5
27
33

answered Aug 23 '19 at 15:59

Hieu Thai

1,645
1
6
4

24

Probably want to add "--save-dev" to the npm install command, don't need this as a production dependency – reggaeguitar Feb 25 '20 at 23:59
13

Implying the question is about javascript. I see no tags related to it. – Emobe Mar 22 '20 at 14:16
2

You can also use `eslint --fix` if you use both eslint and prettier. – LucasBordeau May 06 '20 at 14:43
1

I agree that this answer should be downvoted. At the time I was looking for the answer to this question, I was mainly working with js/jsx/json code – Hieu Thai Nov 17 '20 at 15:13
@HiếuTháiNgọc Will this touch node_modules? Only reason I am afraid to run it. – spencer741 Apr 22 '21 at 09:22
@spencer741 Yes it will install pretty in local `node_moudles`. If you're afraid to touch the dependency system in the local folder, just copy all the source code into another place, format there, and copy the content back later. – Hieu Thai Apr 27 '21 at 08:46
@HieuThai I was more asking “will it prettify code in node_modules” – spencer741 Apr 27 '21 at 14:38
2

VSCode is not just for nodejs. Question is about general formatting, for all code files. – Ramesh-X Sep 13 '22 at 01:48
For people coding in with .NET, there also exists a editor-agnostic solution: simply run `dotnet format ` to format all files. In the end I figured it's better to look for an extension-less solution since this is something that could run in a Git hook or automated workflow. – Stefan May 30 '23 at 20:01
No solution "found on the internet" should be copy/pasted blindly. For this solution, modify the RegEx to suit Your purposes, whether TS, TSX, JS, JSX, or any other file types. This one solution creates a script/shortcut to re-use. For a one-shot, use the full command-line option by @piyush-balapure. Both of these are correct answers. – TonyG Jul 27 '23 at 23:46

score 68 · Answer 3 · answered Jul 02 '20 at 14:48

68

The simplest solution that I have found is as below.

Install prettier in vscode.
Create the .prettierrc file and configure it the way you want.
Run following command in vscode console.

npx prettier --write "**/*.ts" (Add the file type regex as per the need)

answered Jul 02 '20 at 14:48

Piyush Balapure

1,023
9
14

1

This only works for js code and nothing about the question is asking about js, it's talking about formatting in general. – Jason Axelson Mar 05 '22 at 09:16
1

You can change the regex to format the files supported by prettier. And because the question has JavaScript tag, most answers include js, ts, jsx etc. – Piyush Balapure May 13 '22 at 07:12
1

the Javascript tag was added after, people just assumed it's for javascript then an editor added the tag – Jimmar May 18 '22 at 13:17

David Lacroix · Answer 4 · 2018-08-12T01:46:11.643

41

I was out of luck finding an extension that was doing this the way I was expecting it so I made one. I suggest you take a look at the extension I just made :

https://marketplace.visualstudio.com/items?itemName=lacroixdavid1.vscode-format-context-menu#overview

It might still have some issues, feel free to report them or to contribute.

edited Aug 12 '18 at 01:46

answered Aug 11 '18 at 21:30

David Lacroix

594
1
5
12

3

Yup, I like this! Works well w/ c++. – Aaron B. Apr 29 '21 at 16:56
1

Please all, install and upvote this extension! Really essential for large projects that need reformatting using settings in VS code running, for example, in a containerized environment where the console command line might have different settings for the formatter. – Dan Nissenbaum Feb 16 '22 at 04:19
This is the answer! – Nonoroazoro Sep 27 '22 at 08:58
5 years no commit on the project. Still works fine! – Marcel Jun 13 '23 at 11:51
Just need and found it is working... 131,113 installs and counting... Accept this as an Answer... – Muhammad Hassan Jul 30 '23 at 12:36

score 40 · Answer 5 · answered Apr 16 '21 at 13:44

40

With npm, just run npx prettier --write . in the terminal if your language is supported

answered Apr 16 '21 at 13:44

xianshenglu

4,943
3
17
34

1

this is the best answer involving prettier, as this is what they say to do on the [prettier docs](https://prettier.io/docs/en/install.html) – benmneb Jul 25 '21 at 07:09

score 4 · Answer 6 · answered Apr 07 '20 at 12:11

4

I do a simply trick:

download this extension https://marketplace.visualstudio.com/items?itemName=ApceHHypocrite.OpenAllFiles
open all files
set "editor.formatOnSave": true
save all files

Hope it helps

answered Apr 07 '20 at 12:11

markzzz

47,390
120
299
507

10

What if your project has 3k+ files ? This is ok for a pet project but not as general advice. – LucasBordeau May 06 '20 at 14:42

score 2 · Answer 7 · answered Nov 22 '22 at 06:54

if you want format any specific folder then just move the that folder and run command npx prettier --write .

eg : if you are in 'xyz/frontend' folder all the file inside will be formatted same if you want to format only src folder under your frontend project the move to src via cd src then run commant npx prettier --write . this will only format files inside src

score 1 · Answer 8 · 2018-06-04T15:01:30.603

As @herrbischoff said, there is currently no way to format all files in a project.
However it would be a useful feature.

What it can do is format all unsaved files by having auto-save and auto-format on.

Otherwise you would need a shell script or an extension or some other extern program (like a tslint checker which can auto-correct errors) which is capable of doing this.

Had problems with this myself and it sucks to open all files by hand

score 0 · Answer 9 · answered Jun 22 '23 at 01:25

0

Enable format on save option, now make a tiny change that will affect all the files (replace all -> class to classic), and save all, and done.

answered Jun 22 '23 at 01:25

Basit

137
7

score 0 · Answer 10 · answered Aug 26 '23 at 05:47

0

Run this command and change the extension In my case I changed that to js, vue

npx prettier --write "**/*.js"

npx prettier --write "**/*.vue"

answered Aug 26 '23 at 05:47

Ikram Khizer

121
2
10

score -1 · Answer 11 · answered Mar 13 '23 at 16:53

There is a great way for doing that
1- First install the formatter named Csharpier
You can see how to install it here: https://csharpier.com/docs/Installation

2- Open your project(no matter which IDE you use)
3- Open Terminal
Note: Make sure you're in the main directory of your project
Then type this code in your terminal:

dotnet-csharpier . --write

FINISH :)
Don't forget to commit your the changes you've made before doing formatting, Because after formatting, you'll have lots of changes in your git and it will be a little hard to distinct your own changes and the changes which are made by Csharpier.

herrbischoff · Answer 12 · 2018-06-26T12:16:10.847

-3

There is currently no way to do that nor does it sound like a particularly useful feature to have. Or put another way: it would be a useful feature if you could completely trust it, which you can't.

You would have to put a lot of faith into the auto-formatting logic of the used languages to not screw up and possibly introduce errors. You would need to review the changes manually anyway, so this approach should not result in measurable productivity gains.

If you're working with a seriously f'ed up code base and don't care about possible problems, I would suggest running a simple shell command with the respective languages' CLI formatter. Example for C++ code, using clang-format:

find . -iname *.cpp -exec clang-format {} +

This command will find all cpp files recursively and will run them through the formatter with default settings.

The process is essentially the same for any language, for example JavaScript (with js-beautify):

find . -iname *.js -exec js-beautify {} +

Just make sure you review whatever comes out. Also, it may very well be possible to script this command into VScode — or just run it in the built-in terminal.

edited Jun 26 '18 at 12:16

answered Nov 23 '17 at 18:34

herrbischoff

3,294
1
29
50

25

How wouldn't it be a useful feature; if you change a formatting rule, it's better to apply it to all files in one go, rather than have formatting changes be mixed in with other code changes. – slikts Feb 22 '18 at 10:39
1

It's rather obvious: because it may be dangerous. Every automatic formatting applied over all files, especially projects you don't know intimately, can break more than it fixes. Just think of languages like Python where indentation matters. Unchecked automatic reformatting *will* break things. You are of course free to find that out for your own the hard way. – herrbischoff Jun 04 '18 at 21:15
3

I have been doing this for years with Intellij and Resharper and have never had an issue. No "hard way" really, if I trust the format enough to do it automatically for one file, I trust it enough for all the others. I do recommend an approach of explicitly choosing the rules I.E. defaulting rules to off and slowly turning them on. – Fortytwo Nov 07 '18 at 18:25
6

By this argument, formatting a whole file would be too dangerous. You should only be able to format a block. If a whole file is OK, what if I select TWO files in the same directory? If that's OK, what if I select a directory? There are lots of use cases (e.g. @slikts ) where this makes perfect sense, and lots of environments (including python) where reformatters/prettifiers/code standardizers work fine. – Marvin Mar 12 '19 at 03:04
Well, it’s probably the old discussion of expectations from IDE vs. code editor users. I don’t expect my editor to be too smart for its own good but clearly many do. And apparently there is now an extension for that. – herrbischoff Mar 13 '19 at 08:48
6

This seems like a pretty opinionated response. It isn't uncommong to come across a (non-Python) codebase with loads of indendtation errors. Default action is to format the file using the current rules, ensure project builds, tests pass, then review your file in git (possibly ignoring whitespace). I'd subscribe to a method that allows me to do this with a project rather than single files. – lorengphd Feb 16 '20 at 18:16

How do I format all files in a Visual Studio Code project?

12 Answers12

Linked

Related