📦 eslint-plugin

ESLint 是一個靜態分析程式碼並透過編輯器提示和命令列報告問題或建議最佳實務的工具。Docusaurus 提供了一個 ESLint 外掛來強制執行 Docusaurus 的最佳實務。

安裝

npm

npm install --save-dev @docusaurus/eslint-plugin

Yarn

yarn add --dev @docusaurus/eslint-plugin

pnpm

pnpm add --save-dev @docusaurus/eslint-plugin

使用方法

建議設定

將 plugin:@docusaurus/recommended 加入 .eslintrc 設定檔的 extends 區段

.eslintrc

{
  "extends": ["plugin:@docusaurus/recommended"]
}

這將會啟用 @docusaurus eslint 外掛並使用 recommended 設定。請參閱下方的 支援的規則 以取得將會啟用的規則清單。

手動設定

如需更精細的控制，您也可以手動啟用外掛並直接設定您要使用的規則

.eslintrc

{
  "plugins": ["@docusaurus"],
  "rules": {
    "@docusaurus/string-literal-i18n-messages": "error",
    "@docusaurus/no-untranslated-text": "warn"
  }
}

支援的設定

• 建議：大多數 Docusaurus 網站都應該擴展的建議規則集。
• 全部：啟用所有規則。這會在次要版本之間變更，因此如果您想要避免非預期的重大變更，則不應該使用此選項。

支援的規則

名稱	說明
@docusaurus/no-untranslated-text	強制將 JSX 中的文字標籤以 translate 呼叫包裝
@docusaurus/string-literal-i18n-messages	強制在純文字標籤上呼叫 translate API	✅
@docusaurus/no-html-links	確保使用 @docusaurus/Link 來取代 <a> 標籤	✅
@docusaurus/prefer-docusaurus-heading	確保使用 @theme/Heading 來取代 <hn> 標籤作為標題	✅

✅ = 建議

範例設定

以下是一個範例設定

.eslintrc.js

module.exports = {
  extends: ['plugin:@docusaurus/recommended'],
  rules: {
    '@docusaurus/no-untranslated-text': [
      'warn',
      {ignoredStrings: ['·', '—', '×']},
    ],
  },
};