diff --git a/README.md b/README.md index 273b6fb..d305ec5 100644 --- a/README.md +++ b/README.md @@ -111,6 +111,8 @@ It is not always easy to set up the type-checking environment for ESLint without So we don't recommend you to configure individual type-aware rules and the corresponding language options all by yourself. Instead, you can start by extending from the `recommendedTypeChecked` configuration and then turn on/off the rules you need. +As of now, all the rules you need to turn on must appear *before* calling `...vueTsEslintConfig({ extends: ['recommendedTypeChecked'] })`, and all the rules you need to turn off must appear *after* calling it. + ```js // eslint.config.mjs import pluginVue from "eslint-plugin-vue"; @@ -118,15 +120,20 @@ import vueTsEslintConfig from "@vue/eslint-config-typescript"; export default [ ...pluginVue.configs["flat/essential"], + + { + files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'], + rules: { + // Turn on other rules that you need. + '@typescript-eslint/require-array-sort-compare': 'error' + } + }, ...vueTsEslintConfig({ extends: ['recommendedTypeChecked'] }), { files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'], rules: { // Turn off the recommended rules that you don't need. '@typescript-eslint/no-redundant-type-constituents': 'off', - - // Turn on other rules that you need. - '@typescript-eslint/require-array-sort-compare': 'error' } ] ``` diff --git a/package.json b/package.json index f1b75d0..82bc619 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vue/eslint-config-typescript", - "version": "14.1.1", + "version": "14.1.2", "description": "ESLint config for TypeScript + Vue.js projects", "main": "./dist/index.mjs", "type": "module", diff --git a/src/index.ts b/src/index.ts index c8d887e..e202374 100644 --- a/src/index.ts +++ b/src/index.ts @@ -70,6 +70,25 @@ export default function createConfig({ }) } + // More meaningful error message for the user, in case they didn't know the correct config name. + for (const name of configNamesToExtend) { + if (!tseslint.configs[name]) { + const nameInCamelCase = name.replace(/-([a-z])/g, (_, letter) => + letter.toUpperCase(), + ) + + // @ts-expect-error + if (tseslint.configs[nameInCamelCase]) { + throw new Error( + `The config name "${name}" is not supported in "extends". ` + + `Please use "${nameInCamelCase}" instead.`, + ) + } + + throw new Error(`Unknown config name in "extends": ${name}.`) + } + } + const mayHaveJsxInSfc = supportedScriptLangs.jsx || supportedScriptLangs.tsx const needsTypeAwareLinting = configNamesToExtend.some( name => diff --git a/test/index.spec.ts b/test/index.spec.ts index babf340..86fe549 100644 --- a/test/index.spec.ts +++ b/test/index.spec.ts @@ -191,3 +191,14 @@ test('#87: should not error if the project root has an older version of espree i const { stdout } = await runLintAgainst('with-older-espree', FROM_FIXTURES) expect(stdout).toMatch(WHITESPACE_ONLY) }) + +test('should guide user to use camelCase names in "extends"', async () => { + const eslintConfigPath = path.join(__dirname, '../examples/type-checked/eslint.config.js') + const { modify, restore } = setupFileMutations(eslintConfigPath) + modify((oldContents) => oldContents.replace('recommendedTypeChecked', 'recommended-type-checked')) + const { failed, stderr } = await runLintAgainst('type-checked') + restore() + + expect(failed).toBe(true) + expect(stderr).contain('Please use "recommendedTypeChecked"') +})