Consider adding ESLint to get Vue Config

[mattstauffer]

Right now we only recommend prettier:

    "prettier": {
        "singleQuote": true,
        "trailingComma": "es5",
        "tabWidth": 4,
        "printWidth": 80
    }

@jonsugar mentioned we may want to add some ESLint configurations in order to apply some of our other preferences, like "follow Vue's conventions".

Can we add this stuff to Prettier? Or is it only viable in ESlint? And if only in ESlint, can we move our Prettier config to ESlint so we only have one tool? Or are we stuck with two tools?

This is @jonsugar's config:

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/recommended',
        'airbnb-base',
    ],
    parserOptions: {
        ecmaVersion: 12,
        parser: '@typescript-eslint/parser',
        sourceType: 'module',
    },
    plugins: [
        'vue',
        '@typescript-eslint',
    ],
    rules: {
​
        // ESLint -----------------------------------------------------------------
​
        indent: ['error', 4],
​
        'global-require': 'off',
        'import/extensions': 'off',
        'object-shorthand': 'off',
        'max-len': [
            'error', {
                code: 120,
                ignoreComments: true,
                ignoreTrailingComments: true,
                ignoreUrls: true,
                ignoreStrings: true,
                ignoreTemplateLiterals: false,
                ignoreRegExpLiterals: false,
                ignorePattern: 'class=".+"',
            },
        ],
​
        // TypeScript -------------------------------------------------------------
​
        'no-shadow': 'off',
        '@typescript-eslint/no-shadow': 'error',
​
        'no-unused-vars': 'off',
        '@typescript-eslint/no-unused-vars-experimental': 'error',
        '@typescript-eslint/no-unused-vars': 'off',
​
        'no-empty-function': 'off',
        '@typescript-eslint/no-empty-function': [
            'error', {
                allow: ['private-constructors'],
            },
        ],
​
        'no-redeclare': 'off',
        '@typescript-eslint/no-redeclare': 'error',
​
        // Classes ----------------------------------------------------------------
​
        'class-methods-use-this': 'off',
        'no-useless-constructor': 'off',
        '@typescript-eslint/no-useless-constructor': 'error',
​
        'max-classes-per-file': 'warn',
        'lines-between-class-members': 'off',
        'no-underscore-dangle': 'off',
​
        // Vue 3 ---------------------------------------------------------------
​
        'vue/html-indent': ['error', 4, {
            attribute: 1,
            baseIndent: 1,
            closeBracket: 0,
            alignAttributesVertically: true,
            ignores: [],
        }],
​
        'vue/no-multiple-template-root': 'off',
​
        'vue/max-len': ['error', {
            code: 120,
            ignoreComments: true,
            ignoreTrailingComments: true,
            ignoreUrls: true,
            ignoreStrings: true,
            ignoreTemplateLiterals: true,
            ignoreRegExpLiterals: true,
            ignoreHTMLAttributeValues: true,
            ignoreHTMLTextContents: false,
        }],
    },
​
    settings: {
        'import/resolver': {
            node: {
                extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
            },
        },
    },
};

And this is one @calebporzio wrote on a project for us a few years back:

{
    "extends": "plugin:vue/recommended",
    "parserOptions": {
        "ecmaVersion": 8,
        "sourceType": "module"
    },
    "rules": {
        "semi": [2, "never"],
        "indent": [2, 4],
        "eol-last": [2, "always"],
        "linebreak-style": [2, "unix"],
        "vue/max-attributes-per-line": [2, { "singleline": 2 }],
        "vue/html-indent": [2, 4, { "closeBracket": 0, "attribute": 1 }],
        "vue/script-indent": [2, 4],
        "vue/require-default-prop": 0,
        "vue/require-prop-types": 0,
        "vue/html-closing-bracket-newline": [
            2,
            { "multiline": "always" }
        ]
    }
}

[jonsugar]

Can we add this stuff to Prettier? Or is it only viable in ESlint? And if only in ESlint, can we move our Prettier config to ESlint so we only have one tool? Or are we stuck with two tools?

You can indeed run prettier from within ESlint.

• https://prettier.io/docs/en/integrating-with-linters.html
• https://indepth.dev/posts/1282/setting-up-efficient-workflows-with-eslint-prettier-and-typescript

Another approach might be to only use ESLint for static analysis of code quality issues and let prettier do the code formatting. That way you can have ESLint integrated with your IDE/vscode etc and get red squiggles for the code quality issues as you develop then have prettier format on save (or when you manually run duster).