Introduction

Prettier takes the code you write, transforms it into an AST, then prints that AST in a, well, prettier format. Its goal is to automate the work of formatting code to be super readable. While it was rapidly adopted by the React and larger JavaScript (and even CSS!) ecosystems, Vue users were initially left in the dark, due to a lack of support for Single-File Components (.vue files). However, as of Prettier 1.10, *.vue files are officially supported!

In this article, you will learn how to use Prettier and ESLint with a Vue project.

Prerequisites

To complete this tutorial, you will need:

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
• Some familiarity with setting up a Vue.js project may be beneficial.

This tutorial was verified with Node v16.5.0, npm v7.20.0, vue v2.6.11, eslint v6.7.2, prettier v2.3.2, eslint-config-prettier v8.3.0, and eslint-plugin-vue v6.2.2".

Step 1 — Setting Up the Project

First, you’ll want to install prettier globally from NPM, if you haven’t already. It can be installed on a per-project basis, but that’s not really recommended.

npm install --global prettier@2.3.2

Then, start a new Vue project using @vue/cli with default configurations:

npx @vue/cli create vue-eslint-prettier-example --default

Next, navigate to the new project directory:

cd vue-eslint-prettier-example

Finally, add the eslint-prettier integration packages to your project:

npm install --save-dev eslint-plugin-prettier@6.2.2 eslint-config-prettier@8.3.0

Note: You may encounter an unable to resolve dependency tree error due to differences between the version of eslint that @vue/cli installs and these integration packages declare. You can use --legacy-peer-deps to get around this error for the sake of this tutorial.

At this point, you will have a new Vue project with support for ESLint and Prettier.

Step 2 — Adding the Config

If you’re using a project created with @vue/cli, you’ll find the ESLint config inside package.json under the eslintConfig property.

Add "plugin:prettier/recommended", to the extends sub-property after "plugin:vue/essential",, to enable Prettier support in ESLint with the default settings:

{
  // ...
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "plugin:prettier/recommended",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  // ...
}

Otherwise, if you’re using a pre-existing project with eslint already set up, then make the same modifications to .eslintrc.js (or whichever ESLint configuration format you’re using):

module.exports = {
  "root": true,
  "extends": [
    "plugin:vue/essential",
    "plugin:prettier/recommended",
    "eslint:recommended"
  ],
}

Now, ESLint is configured to use the default recommended Prettier rules.

Step 3 — Using ESLint with Prettier

If you don’t have eslint installed or set up for Vue yet, we have just the guide for you! This guide also shows how to configure VSCode and Atom to lint your Vue files in real time.

With eslint installed and configurations set, you will be able to run the following command:

eslint --fix

This will use Prettier to reformat and prettify your JS and Vue files for you! No more worrying, arguing, or pulling out hair over code styles! They’ll be automatically enforced for everyone using eslint.

Conclusion

In this article, you learned how to use Prettier and ESLint with a Vue project.

If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.