Do you write many codes/scripts that need to look more readable and comprehensive? Writing scripts is already a handful of tasks, so don’t prolong the agony. If you mainly use Visual Studio Code (VSCode), the Prettier VSCode plugin is a must-try!
Not a reader? Watch this related video tutorial!In this tutorial, you’ll learn how to take advantage of the Prettier VSCode plugin to write readable and “prettier” scripts.
Dive in and write scripts other people can effortlessly read!
Prerequisites
This tutorial will be a hands-on demonstration. If you’d like to tag along, be sure you have:
- An operating system that supports VS Code – This tutorial uses Windows 10.
- Node 16.0+ installed.
Installing the Prettier VSCode Plugin
Prettier is a code-formatter that supports numerous programming languages. Formatting scripts and codes can be complex, especially when working with a team. Prettier removes that struggle by automating the formatting of your code.
Create a project folder named Prettier, which is arbitrary, and open that folder in VS Code.
Press Ctrl+Shift+X or click on the extensions button in the Activity bar (left), as shown below, to access VS Code’s extensions marketplace. Search for Prettier, and click on the Install button to install the Prettier plugin.
Alternatively, press Ctrl+P to access the command palette and run the command below to install the Prettier VSCode plugin.
ext install esbenp.prettier-vscode
Once installed, you’ll get an output similar to the one below.
Testing Out the Prettier Plugin
Now that the Prettier plugin has been installed, it’s time to see what Prettier has to offer. You’ll create a script with lousy formatting and use Prettier to fix the format.
1. Create a new file in the Prettier folder. You can name the file as you like, but this tutorial uses a JavaScript file named script.js.
VS Code supports many other programming languages, so choose the language that suits your taste.
2. On your script (script.js), add the following code that stores the Hello World message in the greetings variable.
The code below is purposely written bad with the following:
- The
greetingsvariable is below theconstkeyword.
- Too many spaces between the equal sign (
=) and theHello Worldstring.
- The string is enclosed in single quotes instead of double quotes.
- No semicolon (;) at the end.
const
greetings = 'Hello World'Check the bottom-right corner of VS Code’s window, and you’ll see the Prettier plugin is enabled, as shown below.
3. Now, right-click on a blank space and select Format Document With in the context menu, which opens the command palette.
4. Lastly, select Prettier from the list to fix your code.
Watch the magic happens, as shown below, where:
- Prettier keeps all codes in one line.
- Removes white spaces.
- Changes the single quotes to double-quotes.
- And added a semicolon at the end.
Fixing Code Format On Save
You’ve seen how to manually use Prettier to fix your code’s format, which can be a struggle in the long run. So instead, implement the Format On Save feature. This feature automatically tells Prettier to format your code as soon as you save changes on your code.
To enable the Format On Saved feature:
1. Click on File on the top nav bar, hover on Preference, and select Settings (or press Ctrl+, keys) to access VS Code’s settings.
2. Next, search for Format On Save in the search box. Tick the box on the Format On Save option, as shown below, to enable the Format On Save feature.
3. Search for Default Formatter, and click on the dropdown field. Look for and select the Prettier – Code formatter option from the list to set Prettier as your default code formatter.
4. Head back to the script.js file and change the code to the one below. Of course, a poorly formatted one.
const
ATA = 'Automate all the things'5. Lastly, hit the Ctrl+S keys to save the changes. With the Format On Save feature enabled, Prettier fixes the format like you see below.
Setting Prettier’s Basic Configurations
You’ve already set Prettier as your default code formatter, and you’re ready to configure Prettier as you like. VS Code lets you configure many Prettier configurations, but you’ll focus on the ones that can enhance your IT scripting.
1. On VS Code settings page, search for prettier quotes, and enable the Single Quote option, as shown below. By default, Prettier is set to use double-quotes. Enabling the Single Quote option sets Prettier to use single quotes for your script.
2. Next, search for prettier tab, and set the number of spaces (4) Prettier will use to indent your script in the Tab Width field.
After setting the tab width, tick the Index lines with tabs box. This option tells Prettier to indent your script when pressing the Tab key.
3. Search for prettier semicolon, and untick the Semi option. By default, Prettier adds semicolons at the end of every line in your code. Disabling this option tells Prettier not to add semicolons.
4. Lastly, search for prettier print width, and set the maximum number of characters (80) each line should contain. With this option enabled, Prettier will do it’s best to limit the number of characters without affecting your script.
Formatting Code Using the Prettier CLI
Fixing code format via VS Code’s GUI works fine. But if a command-line environment is more of your preference, you’re in for a treat. VS Code also lets you run commands in Prettier CLI.
1. Press Ctrl+` on your keyboard to open VS Code’s integrated terminal, and choose your preferred terminal shell depending on your OS.
2. Next, run the below commands to install prettier in your project.
npm init --y # Creates a Package.json
npm i prettier # Installs the Prettier CLI
By default, VS Code automatically updates all installed extensions, so you don’t need to worry about your extension getting outdated. But if for some reason Prettier needs an update, just re-run the npm i prettier command.
3. Make the code in your script.js file look bad again, like the one below. Disable the Format On Save feature, then save the changes.
const
ATA = "Fixing code via Prettier CLI"4. Now, run the npx prettier command below to format codes in all files in the working directory (.).
npx prettier --write .Below is the list of files Prettier scanned for Prettier’s code style.
5. Finally, run the below command with the –check flag to scan through the working directory (.) to check if codes in all files are entirely formatted with Prettier.
npx prettier --check .Using the check flag will give you similar output to the one shown below.
Configuring Prettier Preferences via the Prettier CLI
Was it fun formatting code via CLI? Prettier CLI lets you perform more, like configuring Prettier based on your preferences.
Prettier CLI uses a configuration file in your project’s directory to configure your preferences. And Prettier supports several configuration files, but this tutorial uses configuration files called .prettierrc and .prettierrc.js.
1. Create a file in your projects directory named .prettierrc, and add the code below to the file, which tells Prettier to use single quotes and discard semicolons.
When formatting your code, Prettier will search for a configuration file (.prettierrc) and use the configurations to format your script.
You can write the .prettierrc file in either JSON or YAML syntax, but this tutorial uses the JSON syntax.
{
"singleQuote": true,
"semi": false
}2. Now, run the command below to format codes in all files in your working directory.
This command functions like the one in step four of the “Formatting Code Using the Prettier CLI” section. But this time, Prettier uses the configurations you set in your .prettierrc file.
npx prettier --write .After formatting, you’ll see the string is enclosed with single quotes, and the semicolon is removed.
3. Create a file named .prettierrc.js, and add the following JavaScript code.
The code below configures the maximum word each line should contain and the number of spaces that make up a tab.
Note that the .prettierrc.js is only an alternative to the .prettierrc file. You can only have either of the file present in your project folder. In short, using either file is just a matter of configuration format preference.
module.exports = {
printWidth: 12, // Setting the max word for each line to 12.
tabWidth: 4, // Setting the number of spaces that make up a tab to 4 spaces.
};The .prettierrc.js file supports many options you can configure for Prettier.
4. Finally, re-run the npx prettier command below to test the configuration file.
npx prettier --write .Once formatted, you can see the string jumped to a new line since the maximum line width set is 12 (const ATA = ) and indented.
But why is the string still intact in one line? As previously mentioned, Prettier limits the number of characters per line, messing up your script.
Congratulations on fixing your code with the Prettier VSCode plugin. The outcome below makes the code look bad instead of fixed, but you get the idea.
Conclusion
In this tutorial, you’ve learned to set up and configure Prettier, so you don’t have to worry about getting a clean, almost error-free script. At this point, you can comfortably configure prettier based on your preference to level up your scripting.
Why not try integrating ESLint with Prettier, and improve your IT Scripting exquisitely?
