improve rule template

lib/utils/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-fallthrough */
 import { IncludeExcludeOptions, isExportStory } from '@storybook/csf'
 
 import { ASTUtils, TSESTree, TSESLint } from '@typescript-eslint/utils'
@@ -63,7 +64,7 @@ export const getDescriptor = (
     case 'Literal':
     // @ts-expect-error TODO: Investigation needed. Type systems says, that "RegExpLiteral" does not exist
     case 'RegExpLiteral':
-      // @ts-ignore
+      // @ts-expect-error TODO: investigation needed
       return property.value.value
     default:
       throw new Error(`Unexpected descriptor: ${type}`)

tools/generate-rule.ts

@@ -13,17 +13,18 @@ const questions = [
     type: 'text',
     name: 'authorName',
     initial: '',
-    message: 'What is your name?',
+    message: 'What is your name? (to be given credit for the rule)',
     validate: (name: string) => (name === '' ? "Name can't be empty" : true),
   },
   {
     type: 'text',
     name: 'ruleId',
-    message: dedent(`'What is the rule ID? Follow the ESLint rule naming conventions:
+    message: dedent(`Time to name your rule! Follow the ESLint rule naming conventions:
 
       - If your rule is disallowing something, prefix it with no- such as no-eval for disallowing eval() and no-debugger for disallowing debugger.
       - If your rule is enforcing the inclusion of something, use a short name without a special prefix.
       - Use dashes between words.
+      What is the ID of this new rule?
     `),
     validate: (rule: string) => (rule === '' ? "Rule can't be empty" : true),
   },
@@ -42,12 +43,16 @@ const questions = [
 ]
 
 const generateRule = async () => {
-  const { authorName, ruleId, ruleDescription, isAutoFixable } = await prompts(questions)
-
-  if (!authorName) {
-    logger.log('Process canceled by the user.')
-    process.exit(0)
-  }
+  logger.log(
+    '👋 Welcome to the Storybook ESLint rule generator! Please answer a few questions so I can provide everything you need for your new rule.'
+  )
+  logger.log()
+  const { authorName, ruleId, ruleDescription, isAutoFixable } = await prompts(questions, {
+    onCancel: () => {
+      logger.log('Process canceled by the user.')
+      process.exit(0)
+    },
+  })
 
   const ruleFile = path.resolve(__dirname, `../lib/rules/${ruleId}.ts`)
   const testFile = path.resolve(__dirname, `../tests/lib/rules/${ruleId}.test.ts`)
@@ -61,8 +66,10 @@ const generateRule = async () => {
        * @author ${authorName}
        */
 
+      import { TSESTree } from '@typescript-eslint/utils'
       import { createStorybookRule } from '../utils/create-storybook-rule'
       import { CategoryId } from '../utils/constants'
+      import { isIdentifier, isVariableDeclaration } from '../utils/ast'
 
       //------------------------------------------------------------------------------
       // Rule Definition
@@ -72,12 +79,12 @@ const generateRule = async () => {
         name: '${ruleId}',
         defaultOptions: [],
         meta: {
-          type: null, // \`problem\`, \`suggestion\`, or \`layout\`
+          type: 'problem', // \`problem\`, \`suggestion\`, or \`layout\`
           docs: {
             description: 'Fill me in',
             // Add the categories that suit this rule.
             categories: [CategoryId.RECOMMENDED],
-            recommended: 'warn', // or 'error'
+            recommended: 'warn', // \`warn\` or \`error\`
           },
           messages: {
             anyMessageIdHere: 'Fill me in',
@@ -102,20 +109,30 @@ const generateRule = async () => {
 
           return {
             /**
-             * This is an example rule that reports an error in case a named export is called 'wrong'
-             * Use https://eslint.org/docs/developer-guide/working-with-rules for Eslint API
+             * 👉 Please read this and then delete this entire comment block.
+             * This is an example rule that reports an error in case a named export is called 'wrong'.
+             * Hopefully this will guide you to write your own rules. Make sure to always use the AST utilities and account for all possible cases.
+             *
+             * Keep in mind that sometimes AST nodes change when in javascript or typescript format. For example, the type of "declaration" from "export default {}" is ObjectExpression but in "export default {} as SomeType" is TSAsExpression.
+             *
+             * Use https://eslint.org/docs/developer-guide/working-with-rules for Eslint API reference
              * And check https://astexplorer.net/ to help write rules
-             * And delete this entire comment block
+             * Working with AST is fun. Good luck!
              */
-            ExportNamedDeclaration: function (node) {
-              const identifier = node.declaration.declarations[0].id
-              if (identifier) {
-                const { name } = identifier
-                if (name === 'wrong') {
-                  context.report({
-                    node,
-                    messageId: 'anyMessageIdHere',
-                  })
+            ExportNamedDeclaration: function (node: TSESTree.ExportNamedDeclaration) {
+              const declaration = node.declaration
+              if (!declaration) return
+              // use AST helpers to make sure the nodes are of the right type
+              if (isVariableDeclaration(declaration)) {
+                const identifier = declaration.declarations[0]?.id
+                if (isIdentifier(identifier)) {
+                  const { name } = identifier
+                  if (name === 'wrong') {
+                    context.report({
+                      node,
+                      messageId: 'anyMessageIdHere',
+                    })
+                  }
                 }
               }
             },
@@ -145,22 +162,23 @@ const generateRule = async () => {
 
         ruleTester.run('${ruleId}', rule, {
           /**
-           * This is an example test for a  rule that reports an error in case a named export is called 'wrong'
-           * Use https://eslint.org/docs/developer-guide/working-with-rules for Eslint API
-           * And delete this entire comment block
+           * 👉 Please read this and delete this entire comment block.
+           * This is an example test for a rule that reports an error in case a named export is called 'wrong'
+           * Use https://eslint.org/docs/developer-guide/working-with-rules for Eslint API reference
            */
-          valid: ['export const Correct'],
+          valid: ['export const correct = {}'],
           invalid: [
             {
-              code: 'export const wrong',
+              code: 'export const wrong = {}',
               errors: [
                 {
                   messageId: 'anyMessageIdHere', // comes from the rule file
                 },
               ],
             },
           ],
-        })\n`)
+        })
+    `)
   )
 
   logger.log(`creating docs/rules/${ruleId}.md`)