Add to recommended, add skipImportCheck

Author: TylerJDev

src/configs/recommended.js

@@ -11,7 +11,8 @@ module.exports = {
     'primer-react/direct-slot-children': 'error',
     'primer-react/no-deprecated-colors': 'warn',
     'primer-react/no-system-props': 'warn',
-    'primer-react/a11y-tooltip-interactive-trigger': 'error'
+    'primer-react/a11y-tooltip-interactive-trigger': 'error',
+    'primer-react/explicit-heading': 'error'
   },
   settings: {
     github: {

src/rules/explicit-heading.js

@@ -2,58 +2,59 @@ const {isPrimerComponent} = require('../utils/is-primer-component')
 const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
 const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
 
-const validHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const validHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
 
 const isHeadingComponent = elem => getJSXOpeningElementName(elem) === 'Heading'
 const isUsingAsProp = elem => {
-    const componentAs = getJSXOpeningElementAttribute(elem, 'as');
+  const componentAs = getJSXOpeningElementAttribute(elem, 'as')
 
-    if (!componentAs) return;
+  if (!componentAs) return
 
-    return componentAs.value;
+  return componentAs.value
 }
 
-const isValidAsUsage = value => validHeadings.includes(value.toLowerCase());
+const isValidAsUsage = value => validHeadings.includes(value.toLowerCase())
 const isInvalid = elem => {
-    const elemAs = isUsingAsProp(elem);
+  const elemAs = isUsingAsProp(elem)
 
-    if (!elemAs) return 'nonExplicitHeadingLevel'; 
-    if(!isValidAsUsage(elemAs.value)) return 'invalidAsValue';
+  if (!elemAs) return 'nonExplicitHeadingLevel'
+  if (!isValidAsUsage(elemAs.value)) return 'invalidAsValue'
 
-    return false;
+  return false
 }
 
 module.exports = {
-    meta: {
-        type: "problem",
-        schema: [
-            {
-              properties: {
-                skipImportCheck: {
-                  type: 'boolean'
-                }
-              }
-            }
-          ],
-          messages: {
-            nonExplicitHeadingLevel: "Heading must have an explicit heading level applied through the `as` prop.",
-            invalidAsValue: "Usage of `as` must only be used for heading elements (h1-h6)."
+  meta: {
+    schema: [
+      {
+        properties: {
+          skipImportCheck: {
+            type: 'boolean'
           }
-    },
-    create: function(context) {
-        return {
-            JSXOpeningElement(jsxNode) {
-                if (isPrimerComponent(jsxNode.name, context.getScope(jsxNode)) && isHeadingComponent(jsxNode)) {
-                    const error = isInvalid(jsxNode);
-
-                    if (error) {
-                      context.report({
-                        node: jsxNode,
-                        messageId: error
-                      })
-                    }
-                }
-            }
-        };
+        }
+      }
+    ],
+    messages: {
+      nonExplicitHeadingLevel: 'Heading must have an explicit heading level applied through the `as` prop.',
+      invalidAsValue: 'Usage of `as` must only be used for heading elements (h1-h6).'
     }
-};
+  },
+  create: function(context) {
+    return {
+      JSXOpeningElement(jsxNode) {
+        const skipImportCheck = context.options[0] ? context.options[0].skipImportCheck : false
+
+        if ((skipImportCheck || isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) && isHeadingComponent(jsxNode)) {
+          const error = isInvalid(jsxNode)
+
+          if (error) {
+            context.report({
+              node: jsxNode,
+              messageId: error
+            })
+          }
+        }
+      }
+    }
+  }
+}