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

JavascriptVisual Studio-CodeFormatting

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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

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

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

Solution 2 - Javascript

This works for me

Install prettier:

npm init 
npm i prettier

Add following script in package.json:

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

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

Run script:

npm run pretty

Solution 3 - Javascript

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)

Solution 4 - Javascript

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.

Solution 5 - Javascript

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

Solution 6 - Javascript

You can use the extension Command on All Files

Add this to your settings.json

"commandOnAllFiles.commands": {
    "Format File": {
      "command": "editor.action.formatDocument",
      "includeFileExtensions": [".js",".ts",".css"]
    }
  }

From the command palette select command Apply 1 or more commands to all files in the Workspace and select Format File from the Quickpick list. Wait till you see an information message (lower right) that all files have been processed.

Solution 7 - Javascript

I do a simply trick:

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

Hope it helps

Solution 8 - Javascript

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

Solution 9 - Javascript

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionChris WilliamsView Question on Stackoverflow
Solution 1 - JavascriptStellan LindellView Answer on Stackoverflow
Solution 2 - JavascriptHieu ThaiView Answer on Stackoverflow
Solution 3 - JavascriptPiyush BalapureView Answer on Stackoverflow
Solution 4 - JavascriptDavid LacroixView Answer on Stackoverflow
Solution 5 - JavascriptxianshengluView Answer on Stackoverflow
Solution 6 - JavascriptrioV8View Answer on Stackoverflow
Solution 7 - JavascriptmarkzzzView Answer on Stackoverflow
Solution 8 - Javascriptuser9112752View Answer on Stackoverflow
Solution 9 - JavascriptherrbischoffView Answer on Stackoverflow