ESLint code format in Vue

Question

I created a project with npm and vuejs/vue-cli.

I imported the ESLint extension.

I have eslint entries in my package.json file.

Now when I format my code (right-click, Format Code), it completely disfigures my code.

What do I have to do to get vscode to format according to the ESLint rules?

But on the website, ESLint complains that everything is not formatted correctly, and so it is obviously installed and running in some sense:

Answer 1

1) First, you need to install the ESLint extension in the VS code.

This extension uses the ESLint library.If you haven't installed ESLint either locally or globally do so by running

npm install eslint //For a local install
 or 
npm install -g eslint //For a global install.

2) Then, open Setting.json file in VS code. by File-> Preferences->Settings.

3) Add following setting.

 {
    "eslint.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [".js",".vue"]
    },
    "eslint.validate": [
        { "language": "vue", "autoFix": true }
    ]
}

4) Now, check your vue file.It will start showing linting error.If not, restart the VS code.