Tutorial

Linting Vue.js Components with eslint-plugin-vue

Published on December 18, 2017
Default avatar

By Joshua Bemenderfer

Linting Vue.js Components with eslint-plugin-vue

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Linting has always been a bit of a pain point for Vue. Because of the single-file-component model, a linter trying to lint the script portion has to first be able to get through the HTML syntax around it. Linting the HTML structure and styles was largely ignored, as well, until now. Enter eslint-plugin-vue, the official linting plugin for Vue components. Previously, it was possible to lint scripts with Eslint by using eslint-plugin-html and a number of dirty hacks, but now it’s possible to lint Vue files properly. Structure and all. Let’s take a look at how to get that done.

Installation

First off, install eslint and of eslint-plugin-vue.

# Yarn
$ yarn add eslint eslint-plugin-vue --save-dev
# NPM
$ npm install eslint eslint-plugin-vue --save-dev

Usage

Now, update (or create) your .eslintrc.json file. Make sure you extend one of the available linting levels for eslint-plugin-vue.

The available levels are:

  • plugin:vue/base - Just the basic rules to make the parsing work. Doesn’t lint anything yet.
  • plugin:vue/essential - The above, plus rules that exist solely to prevent errors or unexpected behavior in Vue.
  • plugin:vue/strongly-recommended - The above, plus rules that are generally considered best practice.
  • plugin:vue/recommended - The above, plus a few often-suggested style rules.
.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
}

Many of the issues detected by those rules can be automatically fixed with eslint’s --fix option.

Editor Configuration

Now, if you open up a Vue file in your editor with some sort of eslint integration you might see… nothing. That’s because you need to associate the vue file type with the linter. This wasn’t previously a problem when using Vue files like HTML, as most integrations already supported HTML files.

Here’s how you’d fix the issue with Atom and VSCode. We’re still waiting on support in Sublime Text 3. Track this PR: https://github.com/roadhump/SublimeLinter-eslint/pull/169

For Atom + linter-eslint:

Go into Settings -> Packages -> linter-eslint and add text.html.vue to the “List of scopes to run eslint on” option. You may need to restart Atom.

Needed config changes to make Atom play nice with eslint-plugin-vue.

Result:

eslint-plugin-vue integrated with Atom

For VSCode + Eslint:

Open your User Settings file and add

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
],

Needed config changes to make VSCode play nice with eslint-plugin-vue.

If you’ve already modified the eslint.validate property, just add the last item of the list above to it.

Result:

eslint-plugin-vue integrated with VSCode.

Now eslint should now run as expected and produce nice little warnings and errors to all of your Vue components. Hooray!

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

Learn more about us


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


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!

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!

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