Glenn Kimble Jr

July 6, 2019 by Glenn

ESLint for Vue.js in Sublime Text 3

I recently started at a new job that requires me to have linting tools setup in my editor for Vue.js. I was provided with a list of packages to install, and an example of how to set this up in PHPStorm. However my prefered text editor is Sublime Text 3, so I was on my own to figure out the setup.

It turns out it's pretty easy, and the documentation for one of the packages even explained most of it. But for the sake of getting a quick and dirty blog post in, I've compiled the info here for you fine people to read.

First things first, we need to install a few things:

yarn add eslint eslint-plugin-vue babel-eslint --dev

We'll be using ESlint with a plugin that allows us to check the <template> and <script> sections of .vue files and another package that lets us lint all valid Babel code.

Next we need to head over to Sublime. Open up command-palette via Cmd/Ctrl+Shift+P and type Package Control: Install Package, search for SublimeLinter, and install. We should repeat this process for SublimeLinter-eslint and ESLint Fix as well.

Open up the command-palette (again) and type Preferences: SublimeLinter Settings. We'll need to add this to the config on the right side.

"linters": {
    "eslint": {
      "selector": "text.html.vue, source.js - meta.attribute-with-value"
    }
}

Now that we're finished up in Sublime, we'll want to add a .eslintrc.js file to the root directory of any project we're working on. This will tell ESLint what to look for. You can find an example here.

You may remember from earlier that we installed a package called babel-eslint. To get this working, we simply need to add this to our .eslintrc.js file:

module.exports = {
  parser: "babel-eslint",
};

That's it! We should now have ESLint running automatically when we open .vue files, displaying any warnings and errors.

Open up the command-palette and search for ESLint Fix: Fix this file (or just fix) to fix most of the issues the linter warns you about.

Happy linting!