This content originally appeared on DEV Community and was authored by Andreas Riedmüller
Prettier
Prettier is an opinionated code formatter with support for multiple languages.
Since I started using Prettier, I don't want to work code without it anymore. Despite having some concerns in the beginning (the forced line width for example), I fell in love with default settings.
Install and Configure Prettier
Installing Prettier is easy, here are the steps in a nutshell. You can also follow the official installation guide.
First you need to install the exact version of prettier locally. This ensures that everyone will use the exact same version for formating code in the project.
npm install --save-dev --save-exact prettier
Next you need to create the Prettier configuration file .prettierrc and .prettierignore (optional) in the root of your project.
You can run this command to create the default configuration file with an empty object:
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
The .prettierignore file works in the same way as a .gitignore file. In fact, Prettier already follows the rules set out in your .gitignore, so you might not even need one:
📖 By default prettier ignores files in version control systems directories (".git", ".sl", ".svn" and ".hg") and node_modules (unless the --with-node-modules CLI option is specified). Prettier will also follow rules specified in the ".gitignore" file if it exists in the same directory from which it is run.
Here is an example .prettierignore to skip all HTML files:
# Ignore all HTML files:
**/*.html
Format all existing code
Before continuing with formating the whole codebase, commit your changes. I also recommend merging all open pull requests, as a lot of files will be affected.
Now run this command in the root folder of your project to format all files:
npx prettier . --write
ℹ️ using
npxhere ensures that the locally installed version of Prettier is executed. This is important if you also have prettier installed globally.
Now all your project files should be nicely formated. 🧹✨
Install the Prettier VSCode Extension
Next you can setup a Prettier plugin for your IDE. I use Visual Studio Code, but there are also plugins for many other editors.
For VSCode, install this extension: esbenp.prettier-vscode
Having done that you can navigate to the VSCode settings and search for "formatter". Here you could set Default Formatter to esbenp.prettier-vscode.
However, if, like me, you work on many different projects and not all of them have Prettier, you will probably leave it at the default setting (None).
Instead you can set the default formatter in the local VSCode settings file (.vscode/settings.json) of the projects you use prettier.
To be sure any language specific global VSCode settings are overriden by the local config, you might need to specify defaultFormatter for each language individually.
Here is an example .vscode/settings.json for reference:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
This content originally appeared on DEV Community and was authored by Andreas Riedmüller
Andreas Riedmüller | Sciencx (2024-08-14T09:49:33+00:00) How to Install Prettier in Your Codebase and VSCode. Retrieved from https://www.scien.cx/2024/08/14/how-to-install-prettier-in-your-codebase-and-vscode/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.