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

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

This works for me

Install prettier:

npm init 
npm i -D prettier --save-dev

Add following script in package.json:

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

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

Run script:

npm run pretty

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)

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

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.

I recommend VSCode Workspace Formatter. Just formatted a subdirectory with a few hundred source code files, and it worked very well.

• Extension automates open+format+save steps.
• Applies VSCode's formatting settings, including formatting extensions.
• Format the workspace or a subdirectory (right-click in file tree).
• Configurable include/exclude path globs.
• Available in Open VSX and thus VSCodium.

See

• https://github.com/franneck94/Vscode-Workspace-Formatter
• https://open-vsx.org/extension/franneck94/workspace-formatter

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

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

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

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

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

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

You may decide to use prettier + eslint setup for this feature.

eslint.config.ts

const eslintConfigPrettier = require("eslint-config-prettier");
const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');

module.exports = [
  ... (Other configs - should be before prettier ones)
  eslintConfigPrettier,
  eslintPluginPrettierRecommended,
];

Also you need .orettierrc file:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  ... (Other prettier settings)
}

Now you may run this via eslint src --config eslint.config.js --fix with fixing all warnings like incorrect tab width.

Works with eslint>=8.24.0. Flat config provided above. For earlier version you may decide to use older config files.