Correctly setup Eslint Airbnb with VScode in Vue project

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?