Vuejs/Eslint/Prettier - Eslint 抱怨 tabwith 并没有纠正问题

Question

Trying to get Eslint and Prettier to work on Vue projects. Having a couple of issues though.

For example, I have a rule setup is Eslint to add a space before function parens but it won't format:

Another issue is, I get a error about the tab width in the template section (but I've specified I want 4 spaces in Prettier). Any where would this rule be coming from? I haven't put 2 spaces for template section anywhere in the code:

As an FYI, I'm running Lunvarvim , which (not to blow too much smoke) is a great IDE which I'd like to continue to use if I can resolve this few pain points.

Here is my setup:

Eslint

module.exports = {
    env: {
        browser: true,
        es6: true,
        amd: true,
        jquery: true,
        jest: true,
        'jest/globals': true,
    },
    extends: [
        'plugin:jest/recommended',
        'plugin:cypress/recommended',
        'eslint:recommended',
        'plugin:prettier/recommended',
        'plugin:vue/recommended',
    ],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly',
        $: true,
        M: true,
        Vue: true,
        axios: true,
        moment: true,
        get: true,
        process: true,
        global: true,
        accounting: true,
        Qty: true,
        Stripe: true,
        Chart: true,
        _: true,
    },
    parserOptions: {
        parser: 'babel-eslint',
        ecmaVersion: 2018,
        sourceType: 'module',
    },
    plugins: ['vue'],
    overrides: [
        {
            files: ['*.spec.js'],
            rules: {
                'no-unused-expressions': 0,
            },
        },
    ],
    rules: {
        'object-curly-spacing': ['error', 'always', { objectsInObjects: true }],
        'space-in-parens': ['error', 'never'],
        'array-bracket-spacing': ['error', 'never'],
        'space-before-function-paren': ['error', 'always'],
        'vue/component-name-in-template-casing': [
            'error',
            'kebab-case',
            {
                registeredComponentsOnly: true,
                ignores: [],
            },
        ],
        'vue/no-unused-properties': [
            'error',
            {
                groups: ['props', 'data', 'computed', 'methods'],
            },
        ],
        indent: ['error', 4],
        'linebreak-style': 0,
        'global-require': 0,
        quotes: ['error', 'single'],
        semi: ['error', 'always'],
        'no-trailing-spaces': ['warn', { skipBlankLines: true }],
        'eol-last': ['warn', 'always'],
        'vue/html-self-closing': [
            'error',
            {
                html: {
                    normal: 'any',
                },
            },
        ],
        'vue/valid-v-slot': [
            'error',
            {
                allowModifiers: true,
            },
        ],
    },
};

Prettier

{
    "tabWidth": 4,
    "singleQuote": true
}

Answer 1

Try to move the Prettier configuration into your package.json and make sure you have installed eslint-config-prettier