How to use eslint-config-love with Vue.js?

[darkbasic]

I don't think I've seen any instructions on how to use eslint-config-love with vue.js and @vue/eslint-config-standard-with-typescript doesn't seem to be actively maintained.

How am I supposed to incorporate eslint-config-love into a vue.js project?

This is the default .eslintrc.cjs created by vue create:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  overrides: [
    {
      files: [
        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
        'cypress/support/**/*.{js,ts,jsx,tsx}'
      ],
      'extends': [
        'plugin:cypress/recommended'
      ]
    }
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

[mightyiam]

Hey, thank you for using this project.

I don't think I've seen any instructions on how to use eslint-config-love with vue.js

That's probably too specific to be documented in this project.

and @vue/eslint-config-standard-with-typescript doesn't seem to be actively maintained.

Sorry, I didn't even know of that project.

How am I supposed to incorporate eslint-config-love into a vue.js project?

This is the default .eslintrc.cjs created by vue create:

That looks like a classic config. ESLint has a newer, flat config format that you may consider using, instead.

I recommend you read ESLint documentation with patience and going through some ESLint flat config examples in both Vue.js projects and projects that use eslint-config-love.

If after that you're still confused, feel free to post your questions.

[starrin]

I'm not sure why Vue team never updated their official template, but eslint-plugin-vue and vue-eslint-parser are actively maintained, you can get eslint-config-love to work with Vue.js project with just some little tweaks.

The most tricky part is to correctly handle the .vue files. eslint-plugin-vue will send them to vue-eslint-parser, which separates the <script> block and sends it to another parser for further processing. By default, they are sent to espree, but in order to make eslint-config-love work properly, it should be configured to use @typescript-eslint/parser.

Additionally, Vue.js projects use tsconfig.app.json, which also requires some configuration.

The final eslint.config.js would be like this:

import eslintConfigLove from 'eslint-config-love';
import eslintPluginVue from 'eslint-plugin-vue';

export default [
  {
    ...eslintConfigLove,
    files: ['src/**/*.ts', 'src/**/*.vue']
  },
  ...eslintPluginVue.configs['flat/recommended'],
  {
    files: ['src/**/*.ts', 'src/**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: '@typescript-eslint/parser',
        project: 'tsconfig.app.json',
        extraFileExtensions: ['.vue']
      }
    }
  }
];

This works great for me.

[darkbasic]

Thanks, I was stuck on eslint-config-love v47.0.0 because I was still using the old syntax:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'love',
    'plugin:vue/vue3-recommended',
    'plugin:prettier/recommended',
    './.eslintrc-auto-import.json'
  ],
  plugins: ['vue'],
  ignorePatterns: ['dist/**/*', 'src/api/**/*'],
  overrides: [
    {
      files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', 'cypress/support/**/*.{js,ts,jsx,tsx}'],
      extends: ['plugin:cypress/recommended']
    }
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: [
      './tsconfig.json',
      './tsconfig.app.json',
      './tsconfig.node.json'
    ],
    extraFileExtensions: ['.vue']
  }
}