How to configure vite vue3 to use eslint-plugin-project-structure

[hjyyang]

As mentioned in the title, when my project is using the vue framework, languageOptions in the eslint.config.js file is set to {parser: projectStructureParser} will See a bunch of Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error. mistake.
And there is no vue file involved in the existing demo, so can you add a demo?

[Igorkowalski94]

Hi, @hjyyang,

projectStructureParser should be used only and exclusively by the project-structure/folder-structure rule, all other rules should use the default parser.

  {
    files: ["**"], // Check all file extensions.
    ignores: ["projectStructure.cache.json"],
    languageOptions: { parser: projectStructureParser },
    plugins: {
      "project-structure": projectStructurePlugin,
    },
    settings: {
      // If you want to change the location of generating the projectStructure.cache.json file.
      // "project-structure/cache-location": "./src/cats",
    },
    rules: {
      // If you have many rules in a separate file.
      "project-structure/folder-structure": ["error", folderStructureConfig],
      // If you have only a few rules.
      "project-structure/folder-structure": [
        "error",
        {
          // Config
        },
      ],
    },
  },

  {
    files: ["*.someExtension"], 
    languageOptions: { parser: someDefaultParser},
    plugins: {
      "x": y,
    },
    rules: {
      //...
    },
  },

[Igorkowalski94]

Please send me a link to the repo and I’ll fix the config for you. In general, each object should have its own parser defined in the config, because eslint sometimes incorrectly migrates objects together and mixes up their parsers.

[Igorkowalski94]

1. Every object, except the plugin object, should have languageOptions: { parserOptions: { parser: tseslint.parser } }.
2. The object with projectStructureParser should come first.
3. It's also possible that tseslint.configs.recommended and pluginVue.configs['flat/essential'] should be moved into the main object with the general rules.

[hjyyang]

https://github.com/hjyyang/my-eslint-demo.git
This is my warehouse, please help me to check the configuration, thank you

[Igorkowalski94]

Try this:

import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import autoImport from './.eslintrc-auto-import.js';
import { projectStructureParser, projectStructurePlugin } from 'eslint-plugin-project-structure';
import eslint from '@eslint/js';

export default tseslint.config(
    {
        files: ['**'],
        ignores: ['projectStructure.cache.json'],
        languageOptions: {
            parser: projectStructureParser,
        },
        plugins: {
            'project-structure': projectStructurePlugin,
        },

        rules: {
            'project-structure/folder-structure': [
                'error',
                {
                    structure: [{ name: '*' }],
                },
            ],
        },
    },

    {
        languageOptions: { globals: { ...globals.browser, ...autoImport.globals } },
        ignores: [
            'tailwind.config.js',
            'node_modules/**',
            'dist/**',
            'prettier.config.cjs',
            '.eslintrc-auto-import.js',
        ],
    },

    {
        extends: [
            eslint.configs.recommended,
            tseslint.configs.recommended,
            pluginVue.configs['flat/essential'],
        ],
        languageOptions: {
            parser: pluginVue.parser,
            parserOptions: {
                parser: tseslint.parser,
            },
        },
        files: ['**/*.{js,mjs,cjs,ts,vue}'],
        rules: {
            'vue/multi-word-component-names': 1,
            'vue/component-name-in-template-casing': [
                'warn',
                'kebab-case',
                { registeredComponentsOnly: false, ignores: [] },
            ],
            'vue/max-attributes-per-line': ['warn', { singleline: { max: 3 } }],

            quotes: ['error', 'single'],
            '@typescript-eslint/array-type': ['warn'],
            'comma-dangle': ['error', 'always-multiline'],
        },
    },
);

[hjyyang]

That's it. Thank you very much for your help