Tutorial

How To Configure ESLint and Prettier for Vue.js

Updated on July 23, 2021
author

Joshua Bemenderfer

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

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.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel