// Tutorial //

How To Configure ESLint and Prettier for Vue.js

Published on March 12, 2018 · Updated on July 23, 2021
Default avatar
By Joshua Bemenderfer
Developer and author at DigitalOcean.
How To Configure ESLint and Prettier for Vue.js

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:

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.

  1. npm install --global prettier@2.3.2

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

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

Next, navigate to the new project directory:

  1. cd vue-eslint-prettier-example

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

  1. 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:

package.json
{
  // ...
  "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):

.eslintrc.js
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:

  1. 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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
2 Comments

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

he dear Thank you very much for your training You have been very patient for this training and thank you :)))

Thanks for the article, but I’ve some question regarding implementation on Vue-Cli 4. I wanted to do exactly like you did here with using prettier rules inside Eslint --fix but also be able to change some general rules like removing semicolons.