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:

ESLint + Standard
ESLint + Prettier

I tried 2 things:

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.
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.

Which do you want as your formatter? Did you generate you `eslintrc` with `npx eslint --init`? Try posting your `eslintrc` — im_baby, Jul 02 '21 at 12:34
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. — Royi Bernthal, Jul 02 '21 at 17:51
Usually, ESlint goes before Prettier. Because lining is always before formatting. — kissu, Jul 02 '21 at 19:55
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. — Royi Bernthal, Jul 02 '21 at 21:46

kissu · Accepted Answer · 2021-07-05T08:58:20.047

8

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.

edited Jul 05 '21 at 08:58

answered Jul 02 '21 at 12:50

kissu

40,416
14
65
133

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? – Royi Bernthal Jul 03 '21 at 11:38
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? – kissu Jul 03 '21 at 13:19
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: https://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. – Royi Bernthal Jul 03 '21 at 19:18
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). – kissu Jul 03 '21 at 20:05
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) – Royi Bernthal Jul 05 '21 at 15:32
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. – Royi Bernthal Jul 05 '21 at 15:32
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. – Royi Bernthal Jul 05 '21 at 15:33
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 eslint@7.29.0` 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. – kissu Jul 05 '21 at 15:38
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. – Royi Bernthal Jul 05 '21 at 19:36
*StandardJS + Prettier – Royi Bernthal Jul 05 '21 at 19:55
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 clone`d. 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. – kissu Jul 05 '21 at 22:48
Hey, sorry for the late reply. Sure you're able to get a smooth install after git cloning the repo you attached? – Royi Bernthal Jul 08 '21 at 13:42
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: https://i.imgur.com/uRsqodN.mp4 Not sure if this can be more simpler. – kissu Jul 08 '21 at 14:30
1

I can't test at the moment but it looks like you've done more than enough. Thanks :) – Royi Bernthal Jul 08 '21 at 14:50
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](https://github.com/kissu/so-eslint-standard-prettier-config/blob/master/package.json) 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/cli-plugin-eslint@4.5.19 says it needs eslint < 7.0.0 as a [peer dependency](https://nodejs.org/en/blog/npm/peer-dependencies/) and we are specifying ^7.29.0, so it's a genuine conflict. – Rich N Jul 07 '22 at 15:54
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`. – Rich N Jul 07 '22 at 15:55

score 0 · Answer 2 · edited Jul 02 '21 at 14:08

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 !

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. — kissu, Jul 02 '21 at 14:08
I wasn't able to find prettier anywhere in your config. Sure it's not just ESLint + Standard without prettier? — Royi Bernthal, Jul 02 '21 at 17:44

Vue 2 - ESLint + Standard + Prettier

2 Answers2

Notes

Linked