feat: add eslint plugin prefer-docusaurus-heading

Signed-off-by: Devansu <devansuyadav@gmail.com>
facebook · Nov 28, 2022 · 2e06132 · 2e06132
1 parent 1bf0589
commit 2e06132
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -374,6 +374,7 @@ module.exports = {
     // locals must be justified with a disable comment.
     '@typescript-eslint/no-unused-vars': [ERROR, {ignoreRestSiblings: true}],
     '@typescript-eslint/prefer-optional-chain': ERROR,
+    '@docusaurus/prefer-docusaurus-heading': ERROR,
     '@docusaurus/no-untranslated-text': [
       WARNING,
       {

diff --git a/packages/eslint-plugin/src/index.ts b/packages/eslint-plugin/src/index.ts
@@ -13,12 +13,14 @@ export = {
     recommended: {
       rules: {
         '@docusaurus/string-literal-i18n-messages': 'error',
+        '@docusaurus/prefer-docusaurus-heading': 'warn',
       },
     },
     all: {
       rules: {
         '@docusaurus/string-literal-i18n-messages': 'error',
         '@docusaurus/no-untranslated-text': 'warn',
+        '@docusaurus/prefer-docusaurus-heading': 'warn',
       },
     },
   },

diff --git a/packages/eslint-plugin/src/rules/index.ts b/packages/eslint-plugin/src/rules/index.ts
@@ -5,10 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import preferDocusaurusHeading from './prefer-docusaurus-heading';
 import noUntranslatedText from './no-untranslated-text';
 import stringLiteralI18nMessages from './string-literal-i18n-messages';
 
 export default {
   'no-untranslated-text': noUntranslatedText,
   'string-literal-i18n-messages': stringLiteralI18nMessages,
+  'prefer-docusaurus-heading': preferDocusaurusHeading,
 };
diff --git a/packages/eslint-plugin/src/rules/prefer-docusaurus-heading.ts b/packages/eslint-plugin/src/rules/prefer-docusaurus-heading.ts
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {createRule} from '../util';
+import type {TSESTree} from '@typescript-eslint/types/dist/ts-estree';
+
+type Options = [
+  {
+    includeAllHeadings: boolean;
+  },
+];
+type MessageIds = 'headingTwo' | 'allHeadings';
+
+export default createRule<Options, MessageIds>({
+  name: 'prefer-docusaurus-heading',
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'enforce using Docusaurus theme Heading component instead of <h2> tag',
+      recommended: false,
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          includeAllHeadings: {
+            type: 'boolean',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      headingTwo:
+        'Do not use an `<h2>` tag for headings. Use the `<Heading />` component from `@theme/Heading` instead.',
+      allHeadings:
+        'Do not use `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` tags for headings. Use the `<Heading />` component from `@theme/Heading` instead.',
+    },
+  },
+  defaultOptions: [
+    {
+      includeAllHeadings: false,
+    },
+  ],
+
+  create(context, [options]) {
+    const {includeAllHeadings} = options;
+    const headingTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+    return {
+      JSXOpeningElement(node) {
+        const elementName = (node.name as TSESTree.JSXIdentifier).name;
+
+        if (includeAllHeadings) {
+          if (!headingTypes.includes(elementName)) {
+            return;
+          }
+          context.report({node, messageId: 'allHeadings'});
+          return;
+        }
+
+        // By default, this plugin would only check for `<h2>` tags.
+        if (elementName !== 'h2') {
+          return;
+        }
+        context.report({node, messageId: 'headingTwo'});
+      },
+    };
+  },
+});