Vue 2 - ESLint + 标准 + 更漂亮

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.

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.

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 !