diff --git a/docs/guide/essentials/config/auto-imports.md b/docs/guide/essentials/config/auto-imports.md index 86b29503a..e4cec1956 100644 --- a/docs/guide/essentials/config/auto-imports.md +++ b/docs/guide/essentials/config/auto-imports.md @@ -18,15 +18,19 @@ By default, WXT automatically sets up auto-imports for all of it's own APIs and - `/hooks/*` - `/utils/*` -All named and default exports from files in these directories are available everywhere else in your project without having to import them. +All named and default exports from files in these directories are available everywhere else in your project without +having to import them. -To see the complete list of auto-imported APIs, run [`wxt prepare`](/api/cli/wxt-prepare) and look at your project's `.wxt/types/imports-module.d.ts` file. +To see the complete list of auto-imported APIs, run [`wxt prepare`](/api/cli/wxt-prepare) and look at your project's +`.wxt/types/imports-module.d.ts` file. ## TypeScript -For TypeScript and your editor to recognize auto-imported variables, you need to run the [`wxt prepare` command](/api/cli/wxt-prepare). +For TypeScript and your editor to recognize auto-imported variables, you need to run the +[`wxt prepare` command](/api/cli/wxt-prepare). -Add this command to your `postinstall` script so your editor has everything it needs to report type errors after installing dependencies: +Add this command to your `postinstall` script so your editor has everything it needs to report type errors after +installing dependencies: ```jsonc // package.json @@ -39,25 +43,31 @@ Add this command to your `postinstall` script so your editor has everything it n ## ESLint -ESLint doesn't know about the auto-imported variables unless they are explicitly defined in the ESLint's `globals`. By default, WXT will generate the config if it detects ESLint is installed in your project. If the config isn't generated automatically, you can manually tell WXT to generate it. +ESLint doesn't know about the auto-imported variables unless they are explicitly defined in the ESLint's `globals`. By +default, WXT will generate the config if it detects ESLint is installed in your project. If the config isn't generated +automatically, you can manually tell WXT to generate it. :::code-group -```ts [ESLint 9] +**ESLint 8** + +```ts [ESLint 8] export default defineConfig({ imports: { eslintrc: { - enabled: 9, + enabled: 8, }, }, }); ``` -```ts [ESLint 8] +**ESLint 9** + +```ts [ESLint 9] export default defineConfig({ imports: { eslintrc: { - enabled: 8, + enabled: 9, }, }, }); @@ -69,6 +79,18 @@ Then in your ESLint config, import and use the generated file: :::code-group +**ESLint 8** + +```js [ESLint 8] +// .eslintrc.mjs +export default { + extends: ['./.wxt/eslintrc-auto-import.json'], + // The rest of your config... +}; +``` + +**ESLint 9** + ```js [ESLint 9] // eslint.config.mjs import autoImports from './.wxt/eslint-auto-imports.mjs'; @@ -81,14 +103,6 @@ export default [ ]; ``` -```js [ESLint 8] -// .eslintrc.mjs -export default { - extends: ['./.wxt/eslintrc-auto-import.json'], - // The rest of your config... -}; -``` - ::: ## Disabling Auto-imports @@ -113,6 +127,7 @@ import { } from '#imports'; ``` -To learn more about how the `#imports` module works, read the [related blog post](/blog/2024-12-06-using-imports-module). +To learn more about how the `#imports` module works, read +the [related blog post](/blog/2024-12-06-using-imports-module). If you've disabled auto-imports, you should still use `#imports` to import all of WXT's APIs from a single place. diff --git a/packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap b/packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap index 868663acb..83bcb6845 100644 --- a/packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap +++ b/packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap @@ -119,8 +119,8 @@ export default { " `; -exports[`Auto Imports > eslintrc > "enabled: true" should output a JSON config file compatible with ESlint 8 1`] = ` -".wxt/eslintrc-auto-import.json +exports[`Auto Imports > eslintrc > "enabled: true" should output a JSON config file compatible with ESlint of package.json 1`] = ` +".wxt/eslint-auto-imports.mjs ---------------------------------------- { "globals": { diff --git a/packages/wxt/e2e/tests/auto-imports.test.ts b/packages/wxt/e2e/tests/auto-imports.test.ts index f1c305b54..8e82f7eee 100644 --- a/packages/wxt/e2e/tests/auto-imports.test.ts +++ b/packages/wxt/e2e/tests/auto-imports.test.ts @@ -217,7 +217,7 @@ describe('Auto Imports', () => { }); describe('eslintrc', () => { - it('"enabled: true" should output a JSON config file compatible with ESlint 8', async () => { + it('"enabled: true" should output a JSON config file compatible with ESlint of package.json', async () => { const project = new TestProject(); project.addFile('entrypoints/popup.html', ``); @@ -230,7 +230,7 @@ describe('Auto Imports', () => { }); expect( - await project.serializeFile('.wxt/eslintrc-auto-import.json'), + await project.serializeFile('.wxt/eslint-auto-imports.mjs'), ).toMatchSnapshot(); }); diff --git a/packages/wxt/src/core/resolve-config.ts b/packages/wxt/src/core/resolve-config.ts index 9e7903a76..1c7291dec 100644 --- a/packages/wxt/src/core/resolve-config.ts +++ b/packages/wxt/src/core/resolve-config.ts @@ -1,19 +1,19 @@ import { loadConfig } from 'c12'; import { resolve as esmResolve } from 'import-meta-resolve'; import { + ConfigEnv, InlineConfig, + Logger, ResolvedConfig, + ResolvedEslintrc, UserConfig, - ConfigEnv, - UserManifestFn, UserManifest, + UserManifestFn, WebExtConfig, - WxtResolvedUnimportOptions, - Logger, WxtCommand, WxtModule, WxtModuleWithMetadata, - ResolvedEslintrc, + WxtResolvedUnimportOptions, } from '../types'; import path from 'node:path'; import { createFsCache } from './utils/cache'; @@ -511,18 +511,21 @@ async function getUnimportEslintOptions( options === false ? false : (options?.eslintrc?.enabled ?? 'auto'); let enabled: ResolvedEslintrc['enabled']; + const version = await getEslintVersion(); + let major = parseInt(version[0]) as Exclude< + ResolvedEslintrc['enabled'], + false + >; + switch (inlineEnabled) { case 'auto': - const version = await getEslintVersion(); - let major = parseInt(version[0]); if (isNaN(major)) enabled = false; - if (major <= 8) enabled = 8; - else if (major >= 9) enabled = 9; - // NaN + else if (major <= 8) enabled = 8; + else if (major >= 9) enabled = major; else enabled = false; break; case true: - enabled = 8; + enabled = major; break; default: enabled = inlineEnabled; @@ -532,7 +535,7 @@ async function getUnimportEslintOptions( enabled, filePath: path.resolve( wxtDir, - enabled === 9 ? 'eslint-auto-imports.mjs' : 'eslintrc-auto-import.json', + enabled === 8 ? 'eslintrc-auto-import.json' : 'eslint-auto-imports.mjs', ), globalsPropValue: true, }; diff --git a/packages/wxt/src/types.ts b/packages/wxt/src/types.ts index 06282c570..1998404d7 100644 --- a/packages/wxt/src/types.ts +++ b/packages/wxt/src/types.ts @@ -1,5 +1,5 @@ import type * as vite from 'vite'; -import { UnimportOptions, Import } from 'unimport'; +import { Import, UnimportOptions } from 'unimport'; import { LogLevel } from 'consola'; import type { ContentScriptContext } from './utils/content-script-context'; import type { PluginVisualizerOptions } from '@aklinker1/rollup-plugin-visualizer'; @@ -1583,10 +1583,10 @@ export interface Eslintrc { * When true, generates a file that can be used by ESLint to know which * variables are valid globals. * + * - `true`: Version of `package.json``. * - `false`: Don't generate the file. * - `'auto'`: Check if eslint is installed, and if it is, generate a compatible * config file. - * - `true`: Same as `8`. * - `8`: Generate a config file compatible with ESLint 8. * - `9`: Generate a config file compatible with ESLint 9. *