From 454b076eaf9121ba8f43f5f0ffefbdd3cb07381e Mon Sep 17 00:00:00 2001
From: Aaron <aaronklinker1@gmail.com>
Date: Sat, 8 Jun 2024 13:40:14 -0500
Subject: [PATCH] docs: Add eslintrc info to auto-imports page

---
 docs/guide/key-concepts/auto-imports.md       | 24 +++++++++++++++++++
 .../key-concepts/web-extension-polyfill.md    |  4 ++--
 packages/wxt/src/types/index.ts               |  6 ++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/docs/guide/key-concepts/auto-imports.md b/docs/guide/key-concepts/auto-imports.md
index a75613c2..d1fb3493 100644
--- a/docs/guide/key-concepts/auto-imports.md
+++ b/docs/guide/key-concepts/auto-imports.md
@@ -76,3 +76,27 @@ export default defineConfig({
   imports: false,
 });
 ```
+
+## ESLint
+
+ESLint doesn't understand auto-imports; it thinks all auto-imported variables are undeclared globals and will report lint errors for each. To fix this, extend the ESLint file generated inside the `.wxt` directory:
+
+```js
+// .eslintrc.js
+module.exports = {
+  extends: ['./.wxt/eslintrc-auto-import.json'],
+};
+```
+
+By default, this file will be generated when ESLint is a direct dependency. If ESLint is a subdependency or your project is a monorepo, it may not be generated automatically. In this case, you can tell WXT to generate it:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  imports: {
+    eslintrc: {
+      enabled: true,
+    },
+  },
+});
+```
diff --git a/docs/guide/key-concepts/web-extension-polyfill.md b/docs/guide/key-concepts/web-extension-polyfill.md
index 81b585b2..b7d45e1c 100644
--- a/docs/guide/key-concepts/web-extension-polyfill.md
+++ b/docs/guide/key-concepts/web-extension-polyfill.md
@@ -42,7 +42,7 @@ Lets go over a few approaches:
    (browser.action ?? browser.browserAction).setBadgeColor('red');
    ```
 
-2. **Check the browser**: WXT provides environment variables about which browser is being targetted.
+2. **Check the browser**: WXT provides environment variables about which browser is being targeted.
    ```ts
    if (!import.meta.env.SAFARI) {
      // Safari doesn't implement `onStartup` correctly, so we need a custom solution
@@ -51,7 +51,7 @@ Lets go over a few approaches:
      browser.runtime.onStartup.addListener(...)
    }
    ```
-3. **Check the manifest version**: WXT provides environment variables about which manifest version is being targetted.
+3. **Check the manifest version**: WXT provides environment variables about which manifest version is being targeted.
    ```ts
    if (import.meta.env.MANIFEST_VERSION === 3) {
      // MV3 only code...
diff --git a/packages/wxt/src/types/index.ts b/packages/wxt/src/types/index.ts
index 0dca7676..dfc0565f 100644
--- a/packages/wxt/src/types/index.ts
+++ b/packages/wxt/src/types/index.ts
@@ -1203,7 +1203,11 @@ export interface ResolvedEslintrc {
 
 export type WxtUnimportOptions = Partial<UnimportOptions> & {
   /**
-   * When eslint is installed,
+   * When using ESLint, auto-imported variables are linted as "undeclared
+   * globals". This option lets you configure a base eslintrc that, when
+   * extended, fixes these lint errors.
+   *
+   * See <https://wxt.dev/guide/key-concepts/auto-imports.html#eslint>
    */
   eslintrc?: Eslintrc;
 };