Files option not working #18327

driesvints · 2024-04-12T13:00:22Z

driesvints
Apr 12, 2024

I'm using the files option to only scan js and vue files in the resources/js. However, when I run eslint it scans the entire project. It's not immediately clear what I'm doing wrong.

My eslint.config.js file:

import globals from "globals";
import js from "@eslint/js";
import pluginVue from 'eslint-plugin-vue';

export default [
  js.configs.recommended,
  // js.configs.all,
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['resources/js/**/*.js', 'resources/js/**/*.vue'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: {
          ...globals.amd,
          ...globals.browser,
          ...globals.es6,
      },
      sourceType: 'module',
    },
    rules: {
      indent: ['error', 2],
      quotes: ['warn', 'single'],
      semi: ['warn', 'never'],
      'comma-dangle': ['warn', 'always-multiline'],
      'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
      'vue/component-name-in-template-casing': 'warn',
      'vue/html-self-closing': ['warn', { html: { void: 'always', normal: 'always', component: 'always' } }],
      'vue/max-attributes-per-line': 'off',
      'vue/multi-word-component-names': 'off',
      'vue/no-reserved-component-names': 'off',
      'vue/no-v-html': 'off',
      'vue/require-default-prop': 'off',
      'vue/singleline-html-element-content-newline': 'off',
    }
  }
]

Running eslint gives:

Answered by kecrily

Apr 13, 2024

@driesvints sorry its a typo, it should be config object. like

import js from '@eslint/js'

export default [
  {
    files: ['resources/js/**/*.js', 'resources/js/**/*.vue'],
    rules: {
      ...js.configs.recommended.rules
    }
  }
]

View full answer

kecrily · 2024-04-12T16:31:36Z

kecrily
Apr 12, 2024
Collaborator

This is caused by

export default [
+  js.configs.recommended,
+  ...pluginVue.configs['flat/recommended']

You can see its code at https://github.com/eslint/eslint/blob/main/packages/js/src/configs/eslint-recommended.js

js.configs.recommended config doesn't have files property which mean it will be used in any file. So ...pluginVue.configs['flat/recommended'] as well

If you want to make it fit your exceptions, you should put these two line in config object which contains files property.

7 replies

driesvints Apr 13, 2024
Author

Thanks @kecrily. But an array can’t have properties? Could you maybe show a quick example at what you mean?

kecrily Apr 13, 2024
Collaborator

@driesvints sorry its a typo, it should be config object. like

import js from '@eslint/js'

export default [
  {
    files: ['resources/js/**/*.js', 'resources/js/**/*.vue'],
    rules: {
      ...js.configs.recommended.rules
    }
  }
]

Answer selected by driesvints

driesvints Apr 15, 2024
Author

Thank you @kecrily. That made me modify the file to:

import globals from "globals";
import js from "@eslint/js";
import pluginVue from 'eslint-plugin-vue';

export default [
  {
    files: ['resources/js/**/*.js', 'resources/js/**/*.vue'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: {
          ...globals.amd,
          ...globals.browser,
          ...globals.es6,
      },
      sourceType: 'module',
    },
    rules: {
      ...js.configs.recommended.rules,
      // js.configs.all,
      ...pluginVue.configs['flat/recommended'].rules,
      indent: ['error', 2],
      quotes: ['warn', 'single'],
      semi: ['warn', 'never'],
      'comma-dangle': ['warn', 'always-multiline'],
      'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
      'vue/component-name-in-template-casing': 'warn',
      'vue/html-self-closing': ['warn', { html: { void: 'always', normal: 'always', component: 'always' } }],
      'vue/max-attributes-per-line': 'off',
      'vue/multi-word-component-names': 'off',
      'vue/no-reserved-component-names': 'off',
      'vue/no-v-html': 'off',
      'vue/require-default-prop': 'off',
      'vue/singleline-html-element-content-newline': 'off',
    }
  }
]

But now I get:

$ eslint                                                                                                                                             ~/Herd/forge

Oops! Something went wrong! :(

ESLint: 9.0.0

TypeError: Key "rules": Key "vue/component-name-in-template-casing": Could not find plugin "vue".
    at throwRuleNotFoundError (/Users/driesvints/Herd/forge/node_modules/eslint/lib/config/rule-validator.js:66:11)
    at RuleValidator.validate (/Users/driesvints/Herd/forge/node_modules/eslint/lib/config/rule-validator.js:147:17)
    at [finalizeConfig] (/Users/driesvints/Herd/forge/node_modules/eslint/lib/config/flat-config-array.js:211:23)
    at FlatConfigArray.getConfig (/Users/driesvints/Herd/forge/node_modules/@humanwhocodes/config-array/api.js:1022:55)
    at FlatConfigArray.isFileIgnored (/Users/driesvints/Herd/forge/node_modules/@humanwhocodes/config-array/api.js:1046:15)
    at entryFilter (/Users/driesvints/Herd/forge/node_modules/eslint/lib/eslint/eslint-helpers.js:330:47)
    at Object.isAppliedFilter (/Users/driesvints/Herd/forge/node_modules/@nodelib/fs.walk/out/readers/common.js:12:31)
    at AsyncReader._handleEntry (/Users/driesvints/Herd/forge/node_modules/@nodelib/fs.walk/out/readers/async.js:86:20)
    at /Users/driesvints/Herd/forge/node_modules/@nodelib/fs.walk/out/readers/async.js:65:22
    at callSuccessCallback (/Users/driesvints/Herd/forge/node_modules/@nodelib/fs.scandir/out/providers/async.js:103:5)

I do not immediately know what I'm doing wrong. They're the same rules when I was still using .eslintrc.js and I don't immediately see what I'm doing wrong after looking in the eslint and eslint vue plugin library documentation.

kecrily Apr 15, 2024
Collaborator

@driesvints It's miss plugins property. You need to import and reference the plugin before using it.

An example from Configure Plugins documentation:

// eslint.config.js
import example from "eslint-plugin-example";

export default [
    {
        plugins: {
            example
        },
        rules: {
            "example/rule1": "warn"
        }
    }
];

...pluginVue.configs['flat/recommended'].rules only imports rules, it doesn't import and reference plugins for you. But if you use pluginVue.configs['flat/recommended'] then it will do everything for you.

pluginVue.configs['flat/recommended'] is a complete config, but .rules isn't

driesvints Apr 16, 2024
Author

Thanks @kecrily. Got a little bit further again with:

import globals from "globals";
import js from "@eslint/js";
import pluginVue from 'eslint-plugin-vue';

export default [
  {
    files: ['resources/js/**/*.js', 'resources/js/**/*.vue'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: {
          ...globals.amd,
          ...globals.browser,
          ...globals.es6,
      },
      sourceType: 'module',
    },
    plugins: {
      vue: pluginVue,
    },
    rules: {
      ...js.configs.recommended.rules,
      // js.configs.all,
      ...pluginVue.configs['flat/recommended'].rules,
      indent: ['error', 2],
      quotes: ['warn', 'single'],
      semi: ['warn', 'never'],
      'comma-dangle': ['warn', 'always-multiline'],
      'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
      'vue/component-name-in-template-casing': 'warn',
      'vue/html-self-closing': ['warn', { html: { void: 'always', normal: 'always', component: 'always' } }],
      'vue/max-attributes-per-line': 'off',
      'vue/multi-word-component-names': 'off',
      'vue/no-reserved-component-names': 'off',
      'vue/no-v-html': 'off',
      'vue/require-default-prop': 'off',
      'vue/singleline-html-element-content-newline': 'off',
    }
  }
]

But now I get all of these errors:

/Users/driesvints/Herd/forge/resources/js/partials/SchedulerForm.vue
  1:1  error  Parsing error: Unexpected token <

/Users/driesvints/Herd/forge/resources/js/partials/ServerHeader.vue
  1:1  error  Parsing error: Unexpected token <

/Users/driesvints/Herd/forge/resources/js/partials/SitesDropdown.vue
  1:1  error  Parsing error: Unexpected token <

I found a similar issue here: vuejs/eslint-plugin-vue#746

But that only shows the solution for the old config format. Do you might know what I need to do?

kecrily Apr 16, 2024
Collaborator

@driesvints This is because the Espree parser that ESLint uses by default only understands js, not vue. Using vue-eslint-parser will fix it.

Another example from Configure a Parser documentation

import babelParser from "@babel/eslint-parser";

export default [
    {
        files: ["**/*.js", "**/*.mjs"],
        languageOptions: {
            parser: babelParser
        }
    }
];

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Files option not working #18327

{{title}}

Replies: 1 comment 7 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Files option not working #18327

driesvints Apr 12, 2024

Replies: 1 comment · 7 replies

kecrily Apr 12, 2024 Collaborator

driesvints Apr 13, 2024 Author

kecrily Apr 13, 2024 Collaborator

driesvints Apr 15, 2024 Author

kecrily Apr 15, 2024 Collaborator

driesvints Apr 16, 2024 Author

kecrily Apr 16, 2024 Collaborator

driesvints
Apr 12, 2024

Replies: 1 comment 7 replies

kecrily
Apr 12, 2024
Collaborator

driesvints Apr 13, 2024
Author

kecrily Apr 13, 2024
Collaborator

driesvints Apr 15, 2024
Author

kecrily Apr 15, 2024
Collaborator

driesvints Apr 16, 2024
Author

kecrily Apr 16, 2024
Collaborator