CODEWITHSUNDEEP
vue.jseslintvisual-studio-codevetur
code-8
code-8

Reputation: 58642

VSCode ESLint on save - for Vue.js

enter image description here

I'm new to ESLint in vscode and vue.js

I ran yarn add -D eslint eslint-plugin-vue and have this "eslint-plugin-vue": "^8.1.1" in my package.json

I have a file at the root of my folder

.eslintrc

{
    "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
    ],
    "rules": {
    "vue/html-self-closing": "off"
    }
}

I also have this in my settings.json

"editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
},
"vetur.validation.template": true,

I tried to, purposely spell component wrong.

<script>
import Task from "./Task.vue"

export default {
    name: "Tasks",
    props: {
        tasks: Array
    },
    component: {
        Task
    }
}
</script>

When I saved the file, It didn't stop me and highlight that I spelled wrong.

enter image description here

What did I do wrong here ?

Can someone please help me get my VSCode going with eslint for vue.js ?

Upvotes: 0

Views: 2724

Answers (1)

Ferry Kranenburg
Ferry Kranenburg

Reputation: 2635

I didn't found a way to prevent this specific typo, but adding this to your rules inside .eslintrc file would give you a heads up next time.

"vue/no-restricted-component-options": [
        "error",
        {
            "name": "component",
            "message": "Use \"components\" instead."
        }
    ]

Upvotes: 2

Related Questions