Enhance Your IT Scripting with the Prettier VSCode Plugin

Published:22 June 2022 - 8 min. read

Fredrick Emmanuel Image

Fredrick Emmanuel

Read more tutorials by Fredrick Emmanuel!

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!

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.

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.

Installing the Prettier plugin
Installing 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
Installing the Prettier plugin via the command palette
Installing the Prettier plugin via the command palette

Once installed, you’ll get an output similar to the one below.

Verifying the Prettier plugin is installed
Verifying the Prettier plugin is installed

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 greetings variable is below the const keyword.
  • Too many spaces between the equal sign (=) and the Hello World string.
  • 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.

Verifying enabled plugins
Verifying enabled plugins

3. Now, right-click on a blank space and select Format Document With in the context menu, which opens the command palette.

Accessing Code Formatters
Accessing Code Formatters

4. Lastly, select Prettier from the list to fix your code.

Formatting code with Prettier
Formatting code with Prettier

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.
Formatting the code with Prettier
Formatting the code with Prettier

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.

Accessing VS Code Settings
Accessing VS Code 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.

Enabling the Format On Save feature
Enabling 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.

Setting Prettier as default code formatter
Setting Prettier as 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.

Triggering the Format On Save feature by saving the code
Triggering the Format On Save feature by saving the code

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.

Setting Prettier to use single quotes instead of double quotes
Setting Prettier to use single quotes instead of double quotes

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.

Setting Prettier to indent script with the Tab key
Setting Prettier to indent script with 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.

Disabling the use of semicolons at the end of every line
Disabling the use of semicolons at the end of every line

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.

Setting the maximum line width
Setting the maximum line width

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
Creating a Package.json file
Creating a Package.json file
Installing the Prettier CLI
Installing 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.

Formatting codes in all files with Prettier
Formatting codes in all files with Prettier

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.

Prettier check flag
Prettier check flag

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.

Formatting code against the .prettierrc configuration file
Formatting code against the .prettierrc configuration file

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.

Formatting code against the .prettierrc.js configuration file
Formatting code against the .prettierrc.js configuration file

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?

Hate ads? Want to support the writer? Get many of our tutorials packaged as an ATA Guidebook.

Explore ATA Guidebooks

Looks like you're offline!