How to get VueJS + ESLint (Airbnb) + Prettier working together? (VSCode)

Question

I've been pulling my hair out at trying to get this to work for the past few days and have had no luck, so I hope someone here can perhaps provide some help!

Essentially, I'm using VueJS and I really like the ESLint rules that Airbnb use, but I also want to use prettier for ONLY formatting. (max-length, indentation, etc...) So, for example, instead of it being this;

<li v-for="(item, index) in this.list" v-bind:key="index" v-if="showRandomFor">{{item}}</li>

It will be this; (or something along these lines)

However, I can never get it to do this. I've tried using eslint-config-prettier which has been of no help at all since even after including it to the eslint config, the prettier rules still get applied (no error messages), so I'm unsure what to do about this one.

Any help is greatly appreciated and let me know if I can provide any additional information or logs!

EDIT: Just to clarify, I've looked at other posts. But I cannot seem to find one that involves VueJS. Vue causes a lot of other issues with eslint/prettier so please don't say my question is a duplicate of someone else who is asking for help with say react.

Possible duplicate of [Prettier + Airbnb's ESLint config](https://stackoverflow.com/questions/46201647/prettier-airbnbs-eslint-config) — atilkan, Jun 18 '18 at 01:20
Not a duplicate. Using it with Vue causes a majority of the issue since Vue templates are a combination of; HTML, CSS, and JS. I want to find a way to fix these issues. (Which isn't addressed in this other thread.) — , Jun 18 '18 at 02:00
Some news - https://prettier.io/blog/2018/11/07/1.15.0.html - apparently Prettier can format Vue files now. I also hope it splits attributes and directives onto new lines. — freeMagee, Nov 08 '18 at 17:15

ippi · Answer 1 · 2018-06-18T06:10:47.383

this question made me question my life choices because I swear this worked earlier. Perhaps that latest vs code update that changed some things?

Anyway, here is a not-so-pretty answer for vs-code while we wait for something better:

vs-code settings, :

{
  "vetur.validation.template": false,
  "prettier.eslintIntegration": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onType",
  "eslint.autoFixOnSave": true
}

While autoFixOnSave works, I cannot get editor.action.formatDocument to listen to my esconfig no matter what (this must have changed, right? right??) So what to do?

I rebound my formatDocument-key to use eslint.executeAutofix instead. It only makes one pass (even if errors remain), so you have spam the key - which is especially noticeable with html-attributes, but it is something I guess.

And this is my .eslintrc.js:

module.exports = {
  root: true,
  extends: [
    "plugin:vue/recommended",
    'airbnb'
  ],
  parserOptions: {
    parser: "babel-eslint", // I guess we have prettier using eslint using babel-eslint? :(
    sourceType: "module"
  },
};

Don't forget to update when you find something better!

How to get VueJS + ESLint (Airbnb) + Prettier working together? (VSCode)

1 Answers1