`@typescript-eslint/restrict-template-expressions` fails on missing `scripts`

[nickofthyme]

Important

This mainly relates to the new flat config style, I don't know if the same applies to the old config style.

When using the createConfig with extending strictTypeChecked and providing an override for the @typescript-eslint/restrict-template-expressions rule like so...

// eslint.config.js
import { createConfig } from '@vue/eslint-config-typescript';

export default [
  ...createConfig({ extends: ['strictTypeChecked'] }),
  {
    name: 'overrides',
    files: ['**/*.{ts,vue}'],
    rules: {
      '@typescript-eslint/restrict-template-expressions': [
          'error',
          {
            allowNumber: true,
            allowBoolean: true,
          },
        ],
    },
  },
];

You get the following error...

> eslint

Oops! Something went wrong! :(

ESLint: 9.18.0

Error: Error while loading rule '@typescript-eslint/restrict-template-expressions': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://typescript-eslint.io/getting-started/typed-linting for enabling linting with type information.
Parser: vue-eslint-parser
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.
Occurred while linting /Users/me/vue-test/src/components/WelcomeItem.vue
    at throwError (/Users/me/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:38:11)
    at getParserServices (/Users/me/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:21:9)
    at create (/Users/me/node_modules/@typescript-eslint/eslint-plugin/dist/rules/restrict-template-expressions.js:85:55)
    at Object.create (/Users/me/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:31:20)
    at createRuleListeners (/Users/me/node_modules/eslint/lib/linter/linter.js:944:21)
    at /Users/me/node_modules/eslint/lib/linter/linter.js:1082:84
    at Array.forEach (<anonymous>)
    at runRules (/Users/me/node_modules/eslint/lib/linter/linter.js:1013:34)
    at #flatVerifyWithoutProcessors (/Users/me/node_modules/eslint/lib/linter/linter.js:1911:31)
    at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (/Users/me/node_modules/eslint/lib/linter/linter.js:1993:49)

I found this error is only triggered when the SFC .vue file has no <script> tag.

I see in the createConfig we are accounting for this case with the vueFilesWithScriptTs logic. The problem is that the createConfig function does not make it easy to override this rule. The only solution I found was to do something like...

// eslint.config.js
import { createConfig } from '@vue/eslint-config-typescript';

export default [
  ...vueTsEslintConfig({ extends: ['strictTypeChecked'] }).map((config) => {
    if (config.name !== 'typescript-eslint/strict-type-checked') return config;

    return {
      ...config,
      rules: {
        ...config.rules,
        // rules that must be applied conditionally
        '@typescript-eslint/restrict-template-expressions': [
          'error',
          {
            allowNumber: true,
            allowBoolean: true,
          },
        ],
      },
    };
  }),
  {
    name: 'overrides',
    files: ['**/*.{ts,vue}'],
    rules: {
      // other rules that don't care about missing script tags
    },
  },
];

I'm not sure if other rules have the same issue, maybe there is a simpler fix that can be applied to the overrides config. The best solution I can think of is to provide an option in the createConfig options to include rules to override.

[haoqunjiang]

Yeah that's the issue I was trying to fix in 14.3.
Please try out the new defineConfigWithVueTs helper: https://github.com/vuejs/eslint-config-typescript#usage That should work well with the type-aware rules.

[nickofthyme]

Perfect, that works great! Thanks!