Search code examples
vue.jsvuejs2eslintprettierstandardjs

Vue 2 - ESLint + Standard + Prettier

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.

Solution

  • 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)!

    enter image description here

    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.