Skip to main content
Version: 3.0.0-rc.1

📦 eslint-plugin

ESLint is a tool that statically analyzes your code and reports problems or suggests best practices through editor hints and command line. Docusaurus provides an ESLint plugin to enforce best Docusaurus practices.

Installation

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

Usage

Add plugin:@docusaurus/recommended to the extends section of your .eslintrc configuration file:

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

This will enable the @docusaurus eslint plugin and use the recommended config. See Supported rules below for a list of rules that this will enable.

Manual config

For more fine-grained control, you can also enable the plugin manually and configure the rules you want to use directly:

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

Supported configs

  • Recommended: recommended rule set for most Docusaurus sites that should be extended from.
  • All: all rules enabled. This will change between minor versions, so you should not use this if you want to avoid unexpected breaking changes.

Supported rules

NameDescription
@docusaurus/no-untranslated-textEnforce text labels in JSX to be wrapped by translate calls
@docusaurus/string-literal-i18n-messagesEnforce translate APIs to be called on plain text labels
@docusaurus/no-html-linksEnsures @docusaurus/Link is used instead of <a> tags
@docusaurus/prefer-docusaurus-headingEnsures @theme/Heading is used instead of <hn> tags for headings

✅ = recommended

Example configuration

Here's an example configuration:

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