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.
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
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.
$ 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:
I forgot to mention that I usually have ES Lint installed globally:
sudo npm install -g eslint --save
./.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
.vue files, 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:
eslint-disable-snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Simple snippets for disable eslint rules
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.
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:
babel-eslint: if you are using dynamic imports for bundle splitting, add:
babel-eslintis 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.
eslint:recommendedseems required too; I’m not 100% sure about this, but I was having trouble linting
.vuefiles 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)
"extensions": [".html", ".js", ".vue", ".jsx"]
- 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: truestuff, 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 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:
npm install --save-dev eslint-import-resolver-alias
Laravel-mix (aka Webpack config)
extensions: ['.js', '.vue'],
- Note the
resolvekey 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.
"extensions": [".js", ".vue"]