VSCode ESLint 保存 - 适用于 Vue.js

Question

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.

import Task from "./Task.vue" export default { name: "Tasks", props: { tasks: Array }, component: { Task } }

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

What did I do wrong here?

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

Answer 1

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."
        }
    ]