首页 > 解决方案 > eslint 不遵循 vue/* 的规则

问题描述

所以我有这个.eslintrc.js

module.exports = {
    root: true,

    env: {
        browser: true,
        node: true,
    },

    parser: 'vue-eslint-parser',

    parserOptions: {
        ecmaVersion: 2020,
        parser: 'babel-eslint',
    },

    extends: [
        '@nuxtjs',
        '@vue/airbnb',
        'plugin:nuxt/recommended',
        'plugin:vue/recommended',
    ],

    // add your custom rules here
    rules: {
        'vue/script-indent': ['error', 4, {
            baseIndent: 1,
            switchCase: 0,
            ignores: [],
        }],
        'vue/html-indent': ['error', 4, {
            attribute: 1,
            baseIndent: 1,
            closeBracket: 0,
            alignAttributesVertically: true,
            ignores: [],
        }],

        ....

    },

    overrides: [
        {
            files: [
                './**/*.vue',
            ],
            env: {
                jest: true,
            },
            rules: {
                indent: 'off',
                'no-unused-expressions': 'off',
            },
        },
    ],
}

package.json有这个需要帮助

    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix ."
    },

所以我只是跑来npm run lint修复讨厌的格式吗?但它并没有真正做好。我收到这些错误

2:1 error Expected indentation of 2 spaces but found 4 spaces vue/html-indent

所以看着我default.vue的在线2我明白了

<template>
    <v-app dark> <! <-- this has 4 spaces, which is what I have im my .eslintrc.js for vue/html-indent -->
        <v-navigation-drawer
            v-model="drawer"
            :mini-variant="miniVariant"
            :clipped="clipped"
            fixed
            app
        >

我错过了什么???

标签: eslinteslint-config-vue

解决方案


推荐阅读