How do I format all files in a Visual Studio Code project?
JavascriptVisual Studio-CodeFormattingJavascript 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:
- 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
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 :
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:
- download this extension https://marketplace.visualstudio.com/items?itemName=ApceHHypocrite.OpenAllFiles
- open all files
- set "editor.formatOnSave": true
- 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.