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.

Edit 1: Today (April 2, 2020) I edited the bottom of this article. Please skim the entire article before taking your first action because I edited my config to remove babel-eslint.

Edit 2: Today (April 5, 2020) I noticed ES Lint was throwing a parser error related to dynamic importing. The fix was simple, and it means babel-eslint parser isn’t required unless you are using dynamic imports, in which case babel-eslint parser is required.

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:

I forgot to mention that I usually have ES Lint installed globally:

sudo npm install -g eslint --save

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:

eslint-disable-snippets - Visual Studio Marketplace

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

• https://vuejs.github.io/vetur/setup.html
• https://codeburst.io/tutorial-how-to-add-eslint-to-your-vue-js-project-ccfb84fab9
• https://alligator.io/vuejs/vue-eslint-plugin/
• https://github.com/vuejs/vetur/issues/660

Bonus edit

With the newest versions of ES Lint, and any other upstream or downstream logic, such as VS Code core, I find I require a little different config now — in April 2020:

package.json

"devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-vue": "^6.2.2",
}

• babel-eslint: if you are using dynamic imports for bundle splitting, add:

    "babel-eslint": "^10.1.0",

.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "airbnb-base",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2019,
        "sourceType": "module"
    },
    "plugins": [
         "vue"
    ],
    "rules": {
        // yolo    
    },
}

• babel-eslint is required for dynamic importing — plugin: @babel/plugin-syntax-dynamic-import). Note: adding/removing the babel-eslint parser takes affect immediately. Add a character to a file, remove it, press CTRL+S, and you’ll see immediately if the parser is installed correctly.

"parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2019,
    "sourceType": "module"
},

• extends eslint:recommended seems required too; I’m not 100% sure about this, but I was having trouble linting .vue files for stuff like requiring semi-colon, so some rules might not be included in the airbnb-base, and rather, maybe the Airbnb set is extended from the eslint set.

VS Code settings.json

• Code > Preferences > Settings (OSX)
• File > Preferences > Settings (Probably on Windows)

"eslint.options": {
    "extensions": [".html", ".js", ".vue", ".jsx"]
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
],

• After reading some GitHub issues threads, I added those above VS Code settings.
• Just add the React ones in there, yolo-style; it may help you one day to forget about those but already have them when “the day” comes.
• You can use JSX in Vue (ie: @vue/babel-plugin-transform-vue-jsx) so you may find yourself linting that in functional components that use JSX syntax.
• VS Code itself was throwing an error with that autoFix: true stuff, and it told me to use the “string form”, which is what you see above. If you happen to see that, you aren’t crazy. I saw it too, and I yolo’d past it — no harm so far.

A note about Airbnb-base

Please note that if you choose to roll with airbnb-base , you should tend to prefer its recommendations rather than turning those rules off. My best tip for anyone is to always Google a rule that you aren’t familiar with, and read enough articles and docs (especially GitHub issues threads involving questions from people and answers from Airbnb team).

In many cases, you will find the answer to “why do I need this garbage?” leads towards JavaScript danger zones, memory allocation, and functional composability (and therefore, readability and clarity of Functional Programming (FP) styles).

In my experience, reading these discussions and studying FP has lead me to emphatically endorse the airbnb-base ruleset, and to generally feel comfortable seeing people disable specific rules for specific purposes. If you understand the rule and disagree with it, turn off that rule. Doing so places an explicit mention in your ES Lint config file. That’s all a person needs.

Final thing, Webpack aliases

Is your life currently ruined by something like this:

Fig 3.0 — Aliases, legal yet illegal

Install:

npm install --save-dev eslint-import-resolver-alias

Laravel-mix (aka Webpack config)

mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            '@': `${__dirname}/resources`,
        },
    },
});

• Note the resolve key there if you are using something ultra-wild like “just Webpack by itself and not Laravel Mix”; there will be a standard deviation of syntax.

.eslintrc.json

"settings": {
    "import/resolver": {
        "alias": {
            "map": [
                ["@", "./resources"]
            ],
            "extensions": [".js", ".vue"]
        }
    }
}

source: https://github.com/benmosher/eslint-plugin-import/issues/496