How to set up ES Lint for Airbnb, Vue JS, and VS Code

Fig 1.0 — ES Lint, the handy harassment helper

Greetings human code-scavenger. Today, I will show you how to get ES Lint working with Vue JS. If you are using Laravel to some degree, your environment will probably be ready to go for these instructions. If you are using vue-cli, your needs may be different, but you should still see some tasty nugget-like information.

I will refine these steps over time as I ram my head into the keyboard more. Please help me in the comments section below if you have a note I should be aware of.

First, install these packages

Since we are using VS Code today, we will just open the Integrated Terminal. Open that.

Now type:

$ npm install --save-dev babel-eslint
$ npm install --save-dev eslint
$ npm install --save-dev eslint-config-airbnb-base
$ npm install --save-dev eslint-plugin-import
$ npm install --save-dev eslint-plugin-vue
// Pro-style efficient
$ npm install --save-dev babel-eslint eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue
  • babel-eslint: this is needed for parserOptions. It is a logical backbone for ES Lint to stand on. It’s utilized slightly different than React, so pay attention in this article.
  • eslint: this is the main ES Lint package.
  • eslint-config-airbnb-base: this is what brings us the Airbnb nectar settings. Take careful note that we are not using eslint-config-airbnb. That would install the package designed to be used with React. If you installed that, VS Code and ES Lint will get hella mad about JSX plugins.
  • eslint-plugin-import: this is required for airbnb-base. Read their docs for more info. Basically, it allows ES Lint to get angry about your import statements.
  • eslint-plugin-vue: this is a nectar plugin that allows you to win.
Deprecated: eslint-plugin-html

eslint-plugin-html is deprecated in favor of eslint-plugin-vue.

See: https://github.com/BenoitZugmeyer/eslint-plugin-html/issues/68

Second, use these config settings

Now that we installed that crap, we can create a file in the root directory.

  • Create ./.eslintrc.json
Fig 2.0 — .eslintrc.json

babel-eslint

Here is how React uses babel-eslint:

"parser": "babel-eslint"

Here is how Vue uses it:

"parserOptions": {
"parser": "babel-eslint"
},
More info: read here https://github.com/vuejs/eslint-plugin-vue/issues/186

Airbnb

Here is how React uses Airbnb:

"extends": "airbnb"

Here is how Vue uses Airbnb:

"extends": [
"airbnb-base",
"plugin:vue/recommended"
],

That anchors in eslint-plugin-vue.

Kick Start

After installing all that garbage, I generally recommend the following three steps to be completed synchronously as a method of drop kicking ES Lint into gear:

  1. Grab./.eslintrc.json file contents to clipboard, some may recall this as left mouse-click and CTRL+AC combo from Mortal Kombat.
  2. Execute $ eslint --init in the Integrated Terminal.
  3. Conform to the demands of the script.
Note: you may need to close one or all of your currently open .vue files, or in some extreme operating system warzone conditions, you may need to restart VS Code.
eslint --init is a great command to memorize and always run it when ES Lint gets mangled. Doing so can release hints toward a potential problem. Sometimes I forget a package or two and it detonates real good with explicit errors.

EDIT: I forgot there is actually a step 4, which is to paste those clipboard contents back into the .eslintrc.json file because it gets overwritten when you run eslint --init. No big deal, just paste it back over top.

Third, secret VS Code settings

In VS Code now, go to File > Preferences > Settings and add this to your user settings JSON file:

"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": false
}
],
Note: you can turn on autoFix if you’re crazy.

Wait

If you get a message from VS Code that says “eslint.validate” is an unknown configuration setting, then you need to install Dirk Baumer’s ES Lint extension.

Visit: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

While we’re downloading extensions, I highly recommend this one here called eslint-disable-snippets:

With it, you can be at or above a line you want to disable, and start typing “eslint-disable” and usually VS Code’s auto-complete suggestions will kick up after you type even just “esl”, so it’s rad. I personally always forget the syntax, so the extension is a welcome 24/7 helper.

Fourth, probably install Vetur Extension

I’m pretty sure you need this also. This should actually be step 1 or your Vue files will have no syntax highlighting. You probably already have it, but just in case:

Vetur extension by Pine Wu

Visit: https://marketplace.visualstudio.com/items?itemName=octref.vetur

Follow these simple steps here:

  1. Install that banshee
  2. Process complete

*** Windows Users ***

Windows users may encounter issues if they installed Vetur without elevated system privileges. I think this is because it does some kind of secret wizardry in your user profile, etc. You will need elevated privileges to install everything successfully.

If you are running Windows, do this. If you didn’t install Vetur yet, omit step 1 to 3:

  1. Goto VS Code extensions
  2. Uninstall Vetur
  3. Hit the Reload button
  4. Close VS Code
  5. Right click VS Code icon in the Task Bar
  6. Select Run as Administrator
  7. Goto VS Code extensions
  8. Install Vetur
  9. Hit the Reload button

Everything should be working for you now.

Conclusion

Finally, we are done. I bid you good luck on your coding journeys, and I am excited for the harassment you will get from ES Lint.

Helpful URLs