How to setup prettier for group projects

In this gist, I will explain how I set up the Prettier code formatter for my group project.

Install prettier

• This command installs the Prettier dependency in our project. You can see it added to our package.json file. Once the updated package.json is pushed to GitHub, all new team members will automatically install it when they run npm install.
• If you already have a local clone of the project, you’ll need to run git pull to fetch the updated package.json, and then run npm install again.

npm install --save-dev --save-exact prettier

If you already have a prettierrc file and a prettierignore file, you can skip these steps. When setting up a Svelte project, the CLI gives you the option to add prettier to your project. If you chose this option, you probably already have these files.

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

Formating with prettier

To format all files in our project, run:

npx prettier . --write

This will format all supported files in the project, except for the ones listed in .prettierignore
Note that this may take a while for larger projects.

You can also format only specific files, for example:

npx prettier --write src/lib/components/Button.svelte

Prettier check

npx prettier . --check

This checks if all files in the project are formatted. It does not format them.
You can use this to see which files have changes and then format only those files, instead of formatting everything

Editor integration

If you have the Prettier - Code formatter extension in VS Code, you can configure it to format on save. Combined with auto save, you won’t have to run these commands manually, formatting will happen automatically.

This can be done locally, which means everyone would have to set it up manually.
Or, you can create a .vscode/settings.json file in the root of your project. This achieves the same without requiring team members or future members to configure it manually, making it easy for everyone to use the Prettier code formatter correctly.

prettier code formatter for team projects

first make a folder named:

.vscode

in that folder add this file:

settings.json

in this file add the following code:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

after installing Prettier

After setting this up in my project, I noticed that the formatter did not run automatically. I had to format everything manually using:

npx prettier . --write

This confirmed that Prettier was correctly installed, but it was not formatting on save.

In vscode, I had to enable editor: format On Save in the settings. Now, when I save a file, all the code is formatted automatically.

We already enable this feature in .vscode/settings.json, but because vscode user settings, locally, have higher priority, if someone turns it off in their personal VS Code settings, it will not work.

solution

Open VS Code settings using the shortcut: Ctrl , + Search for

editor: format on save

and enable this option.
everytime you manual save, ctrl S, your code gets formatted

For now, I don’t see a way to automatically format on auto-save. If I figure it out in the future, I will update this.

Configuration Overrides

In your .prettierrc file, you can add this under overrides => options to override the default settings:

The printWidth option tells Prettier when to insert line breaks. This example sets it to 140 characters, which is wide enough to keep img and source tags on a single line.

"printWidth": 140

To prevent prettier from adding semicolons, ;, in JavaScript, you can add the following setting

"semi": false

With these changes, this is what our .prettierrc file looks like now:

{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100,
	"plugins": ["prettier-plugin-svelte"],
	"overrides": [
		{
			"files": "*.svelte",
			"options": {
				"parser": "svelte",
				"printWidth": 140,
				"semi": false
			}
		}
	]
}

Summary

If you already have the project:

• Push your changes to GitHub, the prettier code formatter changes
• Your team can then pull these changes to their local clone.
• They will need to run:
  • npm install
  • to download the new dev dependencies

If this is your first time cloning the project, following the regular install instructions (probably described in the README) should install everything automatically.

Next, make sure Format on Save is enabled in VS Code:

• Open VS Code settings. file > preferences > settings
• Search for:
  • editor: format on save
• Turn this option on.

Now, every time you save a file manually, Ctrl+S, that file will be formatted.
Note: This setup does not automatically format your code on Auto Save.

If you forget to save files manually, you can check which files have to be formatted by running:

npx prettier . --check

Then, you can format those files either by manually saving them, Ctrl+S, or via the command line:

npx prettier --write {path to file}

Or format the entire project at once:

npx prettier . --write

This option will take the longest.