如何配置 eslint 使其可校验 Vue 单文件组件

演示环境：

• 系统: macOS Catalina 10.15.5
• Node: v12.18.2

所需 npm 依赖以及 eslint 配置

package.json

{
    // ...
    "devDependencies": {
        // ...
        "eslint-plugin-vue": "^6.2.2",
        "vue-eslint-parser": "^7.1.0",
        //...
    },
    //...
}

.eslintrc.js

eslint-plugin-vue 的配置规则

eslint-plugin-vue playground

module.exports = {
    extends: [
        // ...
        // 这里引入了 eslint-plugin-vue，有多种预设的配置，可根据情况选用
        'plugin:vue/recommended', 
        // ...
    ],
    // 此处配置比较特殊，务必留意。需额外配置parser
    parser: "vue-eslint-parser",
    parserOptions: {
        parser: "babel-eslint",
        sourceType: "module"
    },
    rules: {
        //...
        // 配置示例
        "vue/html-indent": ["error", 4, {
            "attribute": 1,
            "baseIndent": 0,
            "closeBracket": 1,
            "alignAttributesVertically": true,
            "ignores": []
        }],
        // ...
    },
    // ...
};

保存文件时，自动根据 eslint 修复文件

IDE: VSCode

所需扩展以及扩展配置

setting.json

{
    // 名称: ESLint
    // ID: dbaeumer.vscode-eslint
    // 说明: Integrates ESLint JavaScript into VS Code.
    // 版本: 2.1.8
    // 发布者: Dirk Baeumer
    // VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

    // 名称: Vetur
    // ID: octref.vetur
    // 说明: Vue tooling for VS Code
    // 版本: 0.25.0
    // 发布者: Pine Wu
    // VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=octref.vetur
    "vetur.validation.template": false,
}

webstorm

待添加