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?

h3yduck h3yduck · Accepted Answer · 2019-12-29T18:31:14

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.

Correctly setup Eslint Airbnb with VScode in Vue project

1 Answers