Add suggestions for naming convention rule (#839)

dimaMachina · web-flow · commit 2c73cb73c3ad · 2021-12-14T20:18:56.000+02:00
diff --git a/.changeset/loud-coins-stare.md b/.changeset/loud-coins-stare.md
@@ -0,0 +1,5 @@
+---
+'@graphql-eslint/eslint-plugin': minor
+---
+
+feat: add suggestions for `naming-convention` rule
diff --git a/packages/plugin/src/rules/match-document-filename.ts b/packages/plugin/src/rules/match-document-filename.ts
@@ -9,20 +9,14 @@ const MATCH_EXTENSION = 'MATCH_EXTENSION';
 const MATCH_STYLE = 'MATCH_STYLE';
 
 const ACCEPTED_EXTENSIONS: ['.gql', '.graphql'] = ['.gql', '.graphql'];
-const CASE_STYLES: ['camelCase', 'PascalCase', 'snake_case', 'UPPER_CASE', 'kebab-case'] = [
-  CaseStyle.camelCase,
-  CaseStyle.pascalCase,
-  CaseStyle.snakeCase,
-  CaseStyle.upperCase,
-  CaseStyle.kebabCase,
-];
+const CASE_STYLES: CaseStyle[] = ['camelCase', 'PascalCase', 'snake_case', 'UPPER_CASE', 'kebab-case'];
 
 type PropertySchema = {
-  style: CaseStyle;
-  suffix: string;
+  style?: CaseStyle;
+  suffix?: string;
 };
 
-type MatchDocumentFilenameRuleConfig = {
+export type MatchDocumentFilenameRuleConfig = {
   fileExtension?: typeof ACCEPTED_EXTENSIONS[number];
   query?: CaseStyle | PropertySchema;
   mutation?: CaseStyle | PropertySchema;
@@ -54,7 +48,7 @@ const rule: GraphQLESLintRule<[MatchDocumentFilenameRuleConfig]> = {
         },
         {
           title: 'Correct',
-          usage: [{ query: CaseStyle.snakeCase }],
+          usage: [{ query: 'snake_case' }],
           code: /* GraphQL */ `
             # user_by_id.gql
             query UserById {
@@ -68,7 +62,7 @@ const rule: GraphQLESLintRule<[MatchDocumentFilenameRuleConfig]> = {
         },
         {
           title: 'Correct',
-          usage: [{ fragment: { style: CaseStyle.kebabCase, suffix: '.fragment' } }],
+          usage: [{ fragment: { style: 'kebab-case', suffix: '.fragment' } }],
           code: /* GraphQL */ `
             # user-fields.fragment.gql
             fragment user_fields on User {
@@ -79,7 +73,7 @@ const rule: GraphQLESLintRule<[MatchDocumentFilenameRuleConfig]> = {
         },
         {
           title: 'Correct',
-          usage: [{ mutation: { style: CaseStyle.pascalCase, suffix: 'Mutation' } }],
+          usage: [{ mutation: { style: 'PascalCase', suffix: 'Mutation' } }],
           code: /* GraphQL */ `
             # DeleteUserMutation.gql
             mutation DELETE_USER {
@@ -99,7 +93,7 @@ const rule: GraphQLESLintRule<[MatchDocumentFilenameRuleConfig]> = {
         },
         {
           title: 'Incorrect',
-          usage: [{ query: CaseStyle.pascalCase }],
+          usage: [{ query: 'PascalCase' }],
           code: /* GraphQL */ `
             # user-by-id.gql
             query UserById {
@@ -114,10 +108,10 @@ const rule: GraphQLESLintRule<[MatchDocumentFilenameRuleConfig]> = {
       ],
       configOptions: [
         {
-          query: CaseStyle.kebabCase,
-          mutation: CaseStyle.kebabCase,
-          subscription: CaseStyle.kebabCase,
-          fragment: CaseStyle.kebabCase,
+          query: 'kebab-case',
+          mutation: 'kebab-case',
+          subscription: 'kebab-case',
+          fragment: 'kebab-case',
         },
       ],
     },
@@ -134,25 +128,22 @@ const rule: GraphQLESLintRule<[MatchDocumentFilenameRuleConfig]> = {
         asObject: {
           type: 'object',
           additionalProperties: false,
+          minProperties: 1,
           properties: {
-            style: {
-              enum: CASE_STYLES,
-            },
-            suffix: {
-              type: 'string',
-            },
+            style: { enum: CASE_STYLES },
+            suffix: { type: 'string' },
           },
         },
       },
       type: 'array',
+      minItems: 1,
       maxItems: 1,
       items: {
         type: 'object',
         additionalProperties: false,
+        minProperties: 1,
         properties: {
-          fileExtension: {
-            enum: ACCEPTED_EXTENSIONS,
-          },
+          fileExtension: { enum: ACCEPTED_EXTENSIONS },
           query: schemaOption,
           mutation: schemaOption,
           subscription: schemaOption,
@@ -219,7 +210,8 @@ const rule: GraphQLESLintRule<[MatchDocumentFilenameRuleConfig]> = {
           option = { style: option } as PropertySchema;
         }
         const expectedExtension = options.fileExtension || fileExtension;
-        const expectedFilename = convertCase(option.style, docName) + (option.suffix || '') + expectedExtension;
+        const expectedFilename =
+          (option.style ? convertCase(option.style, docName) : filename) + (option.suffix || '') + expectedExtension;
         const filenameWithExtension = filename + expectedExtension;
 
         if (expectedFilename !== filenameWithExtension) {
diff --git a/packages/plugin/src/rules/naming-convention.ts b/packages/plugin/src/rules/naming-convention.ts
@@ -1,6 +1,6 @@
 import { ASTKindToNode, Kind, NameNode } from 'graphql';
 import { GraphQLESLintRule, ValueOf } from '../types';
-import { TYPES_KINDS, getLocation } from '../utils';
+import { TYPES_KINDS, getLocation, convertCase } from '../utils';
 import { GraphQLESTreeNode } from '../estree-parser';
 import { GraphQLESLintRuleListener } from '../testkit';
 
@@ -51,7 +51,7 @@ type PropertySchema = {
 
 type Options = AllowedStyle | PropertySchema;
 
-type NamingConventionRuleConfig = {
+export type NamingConventionRuleConfig = {
   allowLeadingUnderscore?: boolean;
   allowTrailingUnderscore?: boolean;
   types?: Options;
@@ -165,6 +165,7 @@ const rule: GraphQLESLintRule<[NamingConventionRuleConfig]> = {
         ],
       },
     },
+    hasSuggestions: true,
     schema: {
       definitions: {
         asString: {
@@ -243,69 +244,97 @@ const rule: GraphQLESLintRule<[NamingConventionRuleConfig]> = {
       return typeof style === 'object' ? style : { style };
     }
 
-    const checkNode = (selector: string) => (node: GraphQLESTreeNode<ValueOf<AllowedKindToNode>>) => {
-      const { name } = node.kind === Kind.VARIABLE_DEFINITION ? node.variable : node;
-      if (!name) {
+    const checkNode = (selector: string) => (n: GraphQLESTreeNode<ValueOf<AllowedKindToNode>>) => {
+      const { name: node } = n.kind === Kind.VARIABLE_DEFINITION ? n.variable : n;
+      if (!node) {
         return;
       }
       const { prefix, suffix, forbiddenPrefixes, forbiddenSuffixes, style } = normalisePropertyOption(selector);
-      const nodeType = KindToDisplayName[node.kind] || node.kind;
-      const nodeName = name.value;
-      const errorMessage = getErrorMessage();
-      if (errorMessage) {
+      const nodeType = KindToDisplayName[n.kind] || n.kind;
+      const nodeName = node.value;
+      const error = getError();
+      if (error) {
+        const { errorMessage, renameToName } = error;
+        const [leadingUnderscore] = nodeName.match(/^_*/);
+        const [trailingUnderscore] = nodeName.match(/_*$/);
+        const suggestedName = leadingUnderscore + renameToName + trailingUnderscore;
         context.report({
-          loc: getLocation(name.loc, name.value),
+          loc: getLocation(node.loc, node.value),
           message: `${nodeType} "${nodeName}" should ${errorMessage}`,
+          suggest: [
+            {
+              desc: `Rename to "${suggestedName}"`,
+              fix: fixer => fixer.replaceText(node as any, suggestedName),
+            },
+          ],
         });
       }
 
-      function getErrorMessage(): string | void {
-        let name = nodeName;
-        if (allowLeadingUnderscore) {
-          name = name.replace(/^_*/, '');
-        }
-        if (allowTrailingUnderscore) {
-          name = name.replace(/_*$/, '');
-        }
+      function getError(): {
+        errorMessage: string;
+        renameToName: string;
+      } | void {
+        const name = nodeName.replace(/(^_+)|(_+$)/g, '');
         if (prefix && !name.startsWith(prefix)) {
-          return `have "${prefix}" prefix`;
+          return {
+            errorMessage: `have "${prefix}" prefix`,
+            renameToName: prefix + name,
+          };
         }
         if (suffix && !name.endsWith(suffix)) {
-          return `have "${suffix}" suffix`;
+          return {
+            errorMessage: `have "${suffix}" suffix`,
+            renameToName: name + suffix,
+          };
         }
         const forbiddenPrefix = forbiddenPrefixes?.find(prefix => name.startsWith(prefix));
         if (forbiddenPrefix) {
-          return `not have "${forbiddenPrefix}" prefix`;
+          return {
+            errorMessage: `not have "${forbiddenPrefix}" prefix`,
+            renameToName: name.replace(new RegExp(`^${forbiddenPrefix}`), ''),
+          };
         }
         const forbiddenSuffix = forbiddenSuffixes?.find(suffix => name.endsWith(suffix));
         if (forbiddenSuffix) {
-          return `not have "${forbiddenSuffix}" suffix`;
-        }
-        if (style && !ALLOWED_STYLES.includes(style)) {
-          return `be in one of the following options: ${ALLOWED_STYLES.join(', ')}`;
+          return {
+            errorMessage: `not have "${forbiddenSuffix}" suffix`,
+            renameToName: name.replace(new RegExp(`${forbiddenSuffix}$`), ''),
+          };
         }
         const caseRegex = StyleToRegex[style];
         if (caseRegex && !caseRegex.test(name)) {
-          return `be in ${style} format`;
+          return {
+            errorMessage: `be in ${style} format`,
+            renameToName: convertCase(style, name),
+          };
         }
       }
     };
 
-    const checkUnderscore = (node: GraphQLESTreeNode<NameNode>) => {
+    const checkUnderscore = (isLeading: boolean) => (node: GraphQLESTreeNode<NameNode>) => {
       const name = node.value;
+      const renameToName = name.replace(new RegExp(isLeading ? '^_+' : '_+$'), '');
       context.report({
         loc: getLocation(node.loc, name),
-        message: `${name.startsWith('_') ? 'Leading' : 'Trailing'} underscores are not allowed`,
+        message: `${isLeading ? 'Leading' : 'Trailing'} underscores are not allowed`,
+        suggest: [
+          {
+            desc: `Rename to "${renameToName}"`,
+            fix: fixer => fixer.replaceText(node as any, renameToName),
+          },
+        ],
       });
     };
 
     const listeners: GraphQLESLintRuleListener = {};
 
     if (!allowLeadingUnderscore) {
-      listeners['Name[value=/^_/]:matches([parent.kind!=Field], [parent.kind=Field][parent.alias])'] = checkUnderscore;
+      listeners['Name[value=/^_/]:matches([parent.kind!=Field], [parent.kind=Field][parent.alias])'] =
+        checkUnderscore(true);
     }
     if (!allowTrailingUnderscore) {
-      listeners['Name[value=/_$/]:matches([parent.kind!=Field], [parent.kind=Field][parent.alias])'] = checkUnderscore;
+      listeners['Name[value=/_$/]:matches([parent.kind!=Field], [parent.kind=Field][parent.alias])'] =
+        checkUnderscore(false);
     }
 
     const selectors = new Set([types && TYPES_KINDS, Object.keys(restOptions)].flat().filter(Boolean));
diff --git a/packages/plugin/src/utils.ts b/packages/plugin/src/utils.ts
@@ -155,13 +155,7 @@ export const TYPES_KINDS = [
   Kind.UNION_TYPE_DEFINITION,
 ] as const;
 
-export enum CaseStyle {
-  camelCase = 'camelCase',
-  pascalCase = 'PascalCase',
-  snakeCase = 'snake_case',
-  upperCase = 'UPPER_CASE',
-  kebabCase = 'kebab-case',
-}
+export type CaseStyle = 'camelCase' | 'PascalCase' | 'snake_case' | 'UPPER_CASE' | 'kebab-case';
 
 const pascalCase = (str: string): string =>
   lowerCase(str)
@@ -176,15 +170,15 @@ export const camelCase = (str: string): string => {
 
 export const convertCase = (style: CaseStyle, str: string): string => {
   switch (style) {
-    case CaseStyle.camelCase:
+    case 'camelCase':
       return camelCase(str);
-    case CaseStyle.pascalCase:
+    case 'PascalCase':
       return pascalCase(str);
-    case CaseStyle.snakeCase:
+    case 'snake_case':
       return lowerCase(str).replace(/ /g, '_');
-    case CaseStyle.upperCase:
+    case 'UPPER_CASE':
       return lowerCase(str).replace(/ /g, '_').toUpperCase();
-    case CaseStyle.kebabCase:
+    case 'kebab-case':
       return lowerCase(str).replace(/ /g, '-');
   }
 };
diff --git a/packages/plugin/tests/match-document-filename.spec.ts b/packages/plugin/tests/match-document-filename.spec.ts
@@ -1,9 +1,9 @@
 import { GraphQLRuleTester } from '../src';
-import rule from '../src/rules/match-document-filename';
+import rule, { MatchDocumentFilenameRuleConfig } from '../src/rules/match-document-filename';
 
 const ruleTester = new GraphQLRuleTester();
 
-ruleTester.runGraphQLTests('match-document-filename', rule, {
+ruleTester.runGraphQLTests<[MatchDocumentFilenameRuleConfig]>('match-document-filename', rule, {
   valid: [
     {
       filename: 'src/me.gql',
diff --git a/packages/plugin/tests/naming-convention.spec.ts b/packages/plugin/tests/naming-convention.spec.ts
@@ -1,9 +1,9 @@
 import { GraphQLRuleTester } from '../src';
-import rule from '../src/rules/naming-convention';
+import rule, { NamingConventionRuleConfig } from '../src/rules/naming-convention';
 
 const ruleTester = new GraphQLRuleTester();
 
-ruleTester.runGraphQLTests('naming-convention', rule, {
+ruleTester.runGraphQLTests<[NamingConventionRuleConfig]>('naming-convention', rule, {
   valid: [
     {
       code: /* GraphQL */ `

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@graphql-eslint/eslint-plugin': minor
 +---
++
 +feat: add suggestions for `naming-convention` rule