ESLint

Next.js 提供開箱即用的整合式 ESLint 體驗。將 next lint 作為指令碼新增至 package.json

{
  "scripts": {
    "lint": "next lint"
  }
}

然後執行 npm run lint 或 yarn lint

yarn lint

如果您的應用程式中尚未設定 ESLint，系統將會引導您完成安裝和設定程序。

yarn lint

您會看到如下提示

？您想要如何設定 ESLint？

❯ 嚴格 (建議)
基本
取消

您可以選擇以下三個選項之一：

• 嚴格：包含 Next.js 的基本 ESLint 設定，以及更嚴格的核心網頁指標規則集。這是推薦給首次設定 ESLint 的開發人員的配置。

  .eslintrc.json

  {
    "extends": "next/core-web-vitals"
  }

• 基本：包含 Next.js 的基本 ESLint 設定。

  .eslintrc.json

  {
    "extends": "next"
  }

• 取消：不包含任何 ESLint 設定。僅當您打算設定自己的自訂 ESLint 設定時，才選擇此選項。

如果選擇了其中任何一個設定選項，Next.js 會自動將 eslint 和 eslint-config-next 安裝為應用程式中的 dependencies，並在專案的根目錄中建立一個包含您所選設定的 .eslintrc.json 檔案。

現在，您每次想要執行 ESLint 以捕捉錯誤時，都可以執行 next lint。設定好 ESLint 後，它也會在每次建置 (next build) 期間自動執行。錯誤將導致建置失敗，而警告則不會。

如果您不希望 ESLint 在 next build 期間執行，請參閱忽略 ESLint的說明文件。

我們建議您使用適當的整合，以便在開發期間直接在程式碼編輯器中檢視警告和錯誤。

ESLint 設定

預設設定 (eslint-config-next) 包含您在 Next.js 中獲得最佳開箱即用程式碼檢查體驗所需的一切。如果您的應用程式中尚未設定 ESLint，我們建議您使用 next lint 來設定 ESLint 以及此設定。

如果您想將 eslint-config-next 與其他 ESLint 設定一起使用，請參閱其他設定章節，了解如何在不造成任何衝突的情況下進行設定。

eslint-config-next 中使用了以下 ESLint 外掛程式中推薦的規則集：

• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-next

這將優先於 next.config.js 中的設定。

ESLint 外掛程式

Next.js 提供了一個 ESLint 外掛程式，eslint-plugin-next，它已捆綁在基本設定中，可以捕捉 Next.js 應用程式中的常見問題。完整的規則集如下：

在建議的設定中已啟用

如果您已在應用程式中設定 ESLint，我們建議直接從這個外掛程式延伸，而不是包含 eslint-config-next，除非滿足一些條件。請參閱建議的外掛程式規則集了解更多資訊。

自訂設定rootDir

如果您在 Next.js 並未安裝於專案根目錄的專案中使用 eslint-plugin-next（例如 monorepo），您可以使用 .eslintrc 中的 settings 屬性來告訴 eslint-plugin-next Next.js 應用程式的位置。

{
  "extends": "next",
  "settings": {
    "next": {
      "rootDir": "packages/my-app/"
    }
  }
}

rootDir 可以是一個路徑（相對或絕對）、一個 glob（例如 "packages/*/"），或是一個路徑和/或 glob 的陣列。

Lint 指定目錄和檔案

預設情況下，Next.js 會對 pages/、app/、components/、lib/ 和 src/ 目錄中的所有檔案執行 ESLint。然而，您可以使用 next.config.js 中 eslint 設定的 dirs 選項來指定要檢查的目錄（適用於正式版建置）。

module.exports = {
  eslint: {
    dirs: ['pages', 'utils'], // Only run ESLint on the 'pages' and 'utils' directories during production builds (next build)
  },
}

同樣地，--dir 和 --file 旗標可以用於 next lint 來 lint 指定的目錄和檔案。

next lint --dir pages --dir utils --file bar.js

快取中。如果您包含任何依賴於單一原始檔內容以外的 ESLint 規則，並且需要停用快取，請在使用 next lint 時加上 --no-cache 旗標。

終端機

next lint --no-cache

停用規則

.eslintrc.json

{
  "extends": "next",
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off"
  }
}