Vue 2 - ESLint + Standard + Prettier

Question

How do I create a Vue 2 project that uses ESLint + StandardJS + Prettier?

StandardJS's rules should naturally take precedence over Prettier's.

vue create only provides the following options:

1. ESLint + Standard
2. ESLint + Prettier

I tried 2 things:

1. I mixed the eslint configurations of both of the above options. It resulted in a dependency hell, and once that was solved it didn't really work as expected.
2. I added the prettier-standard package to my eslintrc.js, it didn't work as expected either. It's worth mentioning that prettier-standard works well when manually executing it from the command line.

I'm of course looking to set this up at the project config level and not at the IDE level.

Rajasthani

Which do you want as your formatter? Did you generate you eslintrc with npx eslint --init? Try posting your eslintrc – Zero

The formatter should be prettier, it should be overrided by eslint whenever there are collisions (e.g. StandardJS's space after function name should overrride Prettier's no space after function name). I used Vue CLI's ESLint + Standard and ESLint + Prettier to generate my configs and tried to play with them, nothing special about my configs at the moment. It might do more harm than good to start from the mess I made. – Rajasthani

Usually, ESlint goes before Prettier. Because lining is always before formatting. – Jeneejenei

Even if ESLint goes before prettier, it shouldn't matter. From what I understand, the prettier rules that collide with StandardJS should be removed (if I recall correctly that's what the standard-prettier package did). It's definitely solvable logically, I just can't get the existing solutions to run as part of my config. – Rajasthani

Answer 1

Can you try this repo I've just created? Looks like it's working great from what I've tested.

https://github.com/kissu/so-eslint-standard-prettier-config

Notes

• I created 2 projects and dumped the configuration of the standard one into the Prettier one, the changes can be seen in this commit
• CLI's current version of @vue/eslint-config-standard is throwing an error (Environment key "es2021" is unknown) because it requires ESlint 7 to work, as shown in this changelog
• bumping ESlint to the latest version 7.29.0, fixed the issue
• to check your project's current version of ESlint, you can run npx eslint --version
• of course, you need to have the ESlint extension enabled and Prettier one disabled (if using VScode), otherwise it may conflict

---

I've tried to remove @vue/prettier from

extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/standard', '@vue/prettier']

and see if it's successfully removes any ; and it does!

The errors are indeed coming from ESlint (if we do remove @vue/prettier), and they're fixed by ESlint only upon save (after an ESlint server + VScode restart)!

Putting Prettier back works fine of course.

---

Luckly, I had a new PC, hence had the opportunity to try a whole fresh config with VScode. I had to install ESlint only and have those settings into my settings.json

{
  "editor.codeActionsOnSave": {
      "source.organizeImports": false,
      "source.fixAll": true,
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    }
}

The formatting works perfectly and nothing more is required.

Jeneejenei

Thanks for the thorough response, I tried to test your repo. In the vs code user settings I disabled formatter as suggested and enabled only linting on save "editor.codeActionsOnSave": {"source.fixAll.eslint": true}. With prettier enabled before it somehow did something. With prettier disabled and eslint enabled it doesn't do anything on save. npm run lint doesn't seem to get rid of ; (so I guess it's not running eslint with standardjs). What am I missing? – Rajasthani

Your VScode settings are maybe wrong. I may post the lines required to have ESlint working when in front of my computer (on phone right now). Do you at least have the ESlint errors in the problems VScode tab ? It is just not formatting, right? – Jeneejenei

I tried now on my Mac with WebStorm where I know my preferences are set up correctly for sure. Can't even get through npm install though this time, getting the following error: ibb.co/X21ZdZT I literally git clone then npm install. Regarding your question - on my PC with VS Code I didn't have ESLint errors, it wasn't just not formatting. – Rajasthani

I used yarn and it's legit that we do have a conflict as suggested in my answer (CLI is generating a lower ESlint package version). – Jeneejenei

Thanks for the update. Basically what I’m trying to do is create a config for our whole team that is IDE agnostic, therefore a VS code plugin wouldn’t be the solution. (assuming it’d work for me) – Rajasthani

Can you please elaborate on how you bumped ESLint to the latest version? Any npm install attempt after changing the version in package.json failed as well due to ESLint version collisions. – Rajasthani

More importantly, do you think we could get to a config that would work out of the box by npm installing? Anything that requires further manual steps by every individual who clones the repo kinda beats the purpose. – Rajasthani

You can simply have an ESlint configuration and let people manage how they want to trigger it. Should be pretty tool-agnostic so far.To bump the version of ESlint, run yarn add [email protected] and it should do the trick. Nowadays, to install yarn, it's as simple as npm install --global yarn. I've picked my project, removed yarn.lock, run npm i and it's working exactly same. – Jeneejenei

Running that results in a dependency versions collision :) I could run it with --force, I guess that's what you did? Regarding your first sentence, not sure how it'd concretely look like for StandardJS + Prettify - do you mean something different than the answer you gave to this issue? Regarding choosing how to trigger it - it'd have to be on save. – Rajasthani

*StandardJS + Prettier – Rajasthani

Not sure what you tried before doing npm i during the linked conflict install, but the repo should not really be messed up IMO. Did you removed yarn.lock or something else? Also, maybe try to rm -rf node_modules and reinstall it again. Personally, I had not conflicts at all, from the project that I've just git cloned. Not sure if it somehow helps but here are all of my versions. npx eslint --version >> 7.20.0 xx npm -v >> 6.14.4 xx node -v >> 14.2.0. If you have something similar, you should not have any trouble running this project. Otherwise, maybe try this one with yarn. – Jeneejenei

Hey, sorry for the late reply. Sure you're able to get a smooth install after git cloning the repo you attached? – Rajasthani

All the details for my repo are written in my original answer. It works with either yarn or npm as asked. yarn will be faster usually tho. I even uploaded a gif to showcase how simple this is to launch: i.imgur.com/uRsqodN.mp4 Not sure if this can be more simpler. – Jeneejenei

I can't test at the moment but it looks like you've done more than enough. Thanks :) – Rajasthani

To be clear for those like me trying to find a working config for Vue 2 and a recent ESLint: the package.json from this answer will not install with npm install. npm finds peer dependency conflicts and refuses to install. yarn finds the same conflicts, warns, but installs anyway. The conflict is that @vue/[email protected] says it needs eslint < 7.0.0 as a peer dependency and we are specifying ^7.29.0, so it's a genuine conflict. – Levorotation

npm behaves differently because it tries to ensure all peer dependencies are available, and will install them if it can. If it can't it throws. yarn just checks and warns, which is what npm used to do. You can make npm behave like yarn by doing npm i --legacy-peer-deps. – Levorotation

Answer 2

I have eslint 7.8.1 with Vue Prettier on and i don't have any problem, maybe the version of eslint that you have is not compatible with Prettier or maybe your eslint have some errors?

In each way i will put my eslint configuration and maybe it will help you!

module.exports = {
    env: {
        'browser': true,
        'es6': true,
        'node': true
    },
    parserOptions: {
        'parser': 'babel-eslint'
    },
    extends: [
        '@vue/standard',
        'plugin:vue/recommended'
    ],
    rules: {
        "vue/html-indent": ["error", 4, {
            "attribute": 1,
            "closeBracket": 0,
            "switchCase": 0,
            "ignores": []
        }],

        "vue/max-attributes-per-line": [2, {
            "singleline": 10,
            "multiline": {
              "max": 1,
              "allowFirstLine": false
            }
          }],
        'indent': ['error', 4],
        'vue/component-name-in-template-casing': ['error', 'kebab-case'],
        'vue/script-indent': [
            'error',
            4,
            { 'baseIndent': 1 }
        ],
        'space-before-function-paren': ['error', 'never'],
        'semi': [2, "never"],
        'vue/singleline-html-element-content-newline': 'off',
        'vue/multiline-html-element-content-newline': 'off'
    },
    overrides: [
        {
            'files': ['*.vue'],
            'rules': {
                'indent': 'off'
            }
        }
    ]
}

Also maybe you have forgot some of the devDependecies on package.json, those are mine

"eslint": "^7.8.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2"

Hope that those will help you !

Glycosuria

As told in my answer, the CLI is indeed generating an eslint version <7. That's probably why OP does not have a working solution. – Jeneejenei

I wasn't able to find prettier anywhere in your config. Sure it's not just ESLint + Standard without prettier? – Rajasthani