Travis Horn

Travis Horn

Setting up Prettier on VS Code

Setting up Prettier on VS Code

Prettier is an opinionated code formatter. It is fundamentally different than a style linter. Prettier doesn’t care how you write your JavaScript. It simply comes in after you’re done and formats all your code in a standard way.

I posted a very similar tutorial on how to set up ESLint on VS Code with Airbnb JavaScript Style Guide. Many people found it useful. I figured I’d do something similar with Prettier.

Some may find it useful to install a linting configuration that obeys Prettier’s recommended rules so they can write code in the style that Prettier already expects. Following these rules will ensure your code has a level of clarity that makes reading and maintaining your code easier for anyone who has to work on it. For the linting step, you can use ESLint, which is a tool for “linting” your code. It can analyze your code and warn you of potential errors. In order for it to work, you need to configure it with specific rules. Luckily, Prettier provides an ESLint configuration that anyone can use.

VS Code is a popular code editor created by Microsoft. One of the nice features is that you can enabled extensions that make your life as a developer easier. There are extension for Prettier and ESLint which will integrate their formatting and linting features right in your editor. You will be warned of potential problems on the fly as you write code and you can auto-format your code on save.

Many developers consider setting up linting in this way essential. In this post, I’ll show you how to set it all up.

The concise version

  1. cd coding-directory

  2. npm init -y

  3. npm i -D prettier eslint eslint eslint-config-prettier eslint-plugin-prettier

  4. Create .eslintrc.js: module.exports = { "extends": "plugin:prettier/recommended" };

  5. In VS Code, Ctrl + Shift + X

  6. Search and install ESLint

  7. Search and install Prettier Code formatter

  8. Restart VS Code

Follow along with the detailed version below if you are new to any of the concepts above or just want to get a better understanding of what these steps do.

The detailed version

First, download and install Node.js. Its package manager, npm, is included with the installation.

Once Node and npm are installed, open up a terminal (or command prompt). Change directories into the root directory for any coding you do. I call my directory “code”.

> cd C:\users\travis\code

This is the directory in which I want to configure ESLint. Any subdirectories within this one will also use the configuration we are about to set up. This works because when you run ESLint, it looks in the current directory for a configuration; If it can’t find one, it moves up to the parent directory, checks there, and the process repeats until a configuration is found.

Now initialize a new npm configuration.

> npm init -y

Install and save the necessary packages for Prettier, ESLint and the Prettier ESLint configuration.

> npm i -D prettier eslint eslint eslint-config-prettier eslint-plugin-prettier

Now create .eslintrc.js with the following contents:

module.exports = {
  "extends": "plugin:prettier/recommended"
};

Prettier and ESLint are now installed and configured. Now we need to get it working in VS Code.

Download and install VS Code.

Open it and press Ctrl + Shift + X to open the Extensions panel.

Type ESLint in the search bar. Find the ESLint extension in the search results and click the green Install button next to it.

Do the same thing for Prettier Code Formatter. Search and install it.

Go ahead and close VS Code and then re-open it.

Congratulations! Prettier and ESLint are enabled in your User Settings by default. If you open up any .js file in any sub-directory of C:\users\travis\code (or wherever you installed the configuration), ESLint will check your code against Prettier’s recommended rules and warn you of any conflicts.

To automatically fix the problems it finds, press Shift+Alt+F. You can also set editor.formatOnSave to true in your user or workspace settings to format your code automatically every time you save.

ESLint warns on hover. Prettier fixes on Shift+Alt+FESLint warns on hover. Prettier fixes on Shift+Alt+F

 
Share this