How to set up ES Lint for Airbnb, Vue JS, and VS Code
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.
$ 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.
eslint-plugin-html is deprecated in favor of
Second, use these config settings
Now that we installed that crap, we can create a file in the root directory.
Here is how React uses
Here is how Vue uses it:
More info: read here https://github.com/vuejs/eslint-plugin-vue/issues/186
Here is how React uses Airbnb:
Here is how Vue uses Airbnb:
That anchors in
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:
./.eslintrc.jsonfile contents to clipboard, some may recall this as left mouse-click and CTRL+AC combo from Mortal Kombat.
$ eslint --initin the Integrated Terminal.
- Conform to the demands of the script.
Note: you may need to close one or all of your currently open
.vuefiles, or in some extreme operating system warzone conditions, you may need to restart VS Code.
eslint --initis 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:
Note: you can turn on
autoFixif you’re crazy.
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.
While we’re downloading extensions, I highly recommend this one here called eslint-disable-snippets:
Extension for Visual Studio Code - Simple snippets for disable eslint rulesmarketplace.visualstudio.com
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
Follow these simple steps here:
- Install that banshee
- 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:
- Goto VS Code extensions
- Uninstall Vetur
- Hit the Reload button
- Close VS Code
- Right click VS Code icon in the Task Bar
- Select Run as Administrator
- Goto VS Code extensions
- Install Vetur
- Hit the Reload button
Everything should be working for you now.
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.