Correctly setup Eslint Airbnb with VScode in Vue project

Question

This is my Vuejs code without linting.

After I run

npm run lint --fix

Code is like this

But again I do some change and press Control + C. It's get formatted to the old code and gives me back same linting errors.

I think my code is auto formatted when I hit the Control + C.

This is my Vue projects eslint.rc file

 module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/essential', '@vue/airbnb', ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', }, parserOptions: { parser: 'babel-eslint', }, };

I didn't installed pretier plugin on VScode. But I installed Vueter plugin and Eslint pluggin.

My goal is to format my Vuejs code with Eslint Airbnb rules. When I save the code. Right now it mess the code. How do I fix this?

Answer 1

For me adding

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

to my VS Code settings ( Preferences: Open Settings (JSON) ) helped. Also: don't forget to reload/restart VS Code.