feat(format-query-block): add option overridePrettierOption (#104)

* refactor(utils): add type PrettierSupportOptionName

close #60

* refactor: add PrettierOptions

* refactor: refactor type

* feat: support vueIndentScriptAndStyle

* chore: rename get-code-wrap-indent-info

* test: update test get-code-wrap-indent-info

* feat(format-query-block): add option overridePrettierOption

* chore: change eslint settings

Author: tyankatsu0105

.eslintrc.js

@@ -2,18 +2,24 @@
 module.exports = {
   parserOptions: {
     ecmaVersion: 2017,
-    project: "tsconfig.json",
     sourceType: "module",
   },
+  parser: "@typescript-eslint/parser",
+  env: {
+    node: true,
+  },
 
-  extends: ["plugin:@mysticatea/es2017", "plugin:@mysticatea/+eslint-plugin"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  plugins: ["prettier"],
   rules: {
-    "@mysticatea/prettier": [
-      "error",
-      {
-        tabWidth: 2,
-      },
-    ],
+    "prettier/prettier": "error",
     "func-style": ["error", "expression"],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/no-explicit-any": "off",
   },
 };

docs/rules/format-query-block.md

@@ -10,7 +10,7 @@ description: Enforce consistent format style in query block ex) `<page-query>`,`
 
 - This rule checks the consistency of a code in `<page-query>` and `<static-query>` tags.
 - This rule's formatter is [Prettier](https://prettier.io). [Parser is `graphql`](https://prettier.io/docs/en/options.html#parser)
-- If you use `.prettierrc`, this rule is check that file. Consider option `tabWidth` and `useTabs`.
+- If you use `.prettierrc`, this rule follow Prettier's option at `.prettierrc`. This rule checks the option `useTabs`, `tabWidth`, and `vueIndentScriptAndStyle`.
 
 ## :book: Rule Details
 
@@ -44,4 +44,21 @@ description: Enforce consistent format style in query block ex) `<page-query>`,`
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "gridsome/format-query-block": [
+    "warn",
+    {
+      "overridePrettierOption": {
+        "tabWidth": 4,
+        "vueIndentScriptAndStyle": true
+      }
+    }
+  ]
+}
+```
+
+- `overridePrettierOption` (`{ tabWidth: number; useTabs: boolean; vueIndentScriptAndStyle: boolean; }`) ... This option can override Prettier's option. Default is `{}`
+  - [tabWidth](https://prettier.io/docs/en/options.html#tab-width)
+  - [useTabs](https://prettier.io/docs/en/options.html#tabs)
+  - [vueIndentScriptAndStyle](https://prettier.io/docs/en/options.html#vue-files-script-and-style-tags-indentation)

lib/rules/format-query-block.ts

@@ -10,16 +10,19 @@ import {
   getPrettierDefaultOption,
   getPrettierRcOption,
   getMergedPrettierOption,
-  getIndentInfo,
+  getCodeWrapIndentInfo,
   NodeNames,
+  OverridePrettierOption,
 } from "../utils";
 
 import prettier from "prettier";
 
 const prettierParser = "graphql";
 const LINES = /[^\r\n\u2028\u2029]+(?:$|\r\n|[\r\n\u2028\u2029])|\s/gu;
 
-type Options = {};
+type Options = {
+  overridePrettierOption?: OverridePrettierOption;
+};
 
 const defaultOptions: [Options] = [{}];
 
@@ -38,10 +41,26 @@ export = createRule<[Options], MessageIds>({
     messages: {
       formatQueryBlock: "{{ name }} code format is incorrect",
     },
-    schema: [],
+    schema: [
+      {
+        type: "object",
+        properties: {
+          overridePrettierOption: {
+            type: "object",
+            items: [
+              { tabWidth: "number" },
+              { useTabs: "boolean" },
+              { vueIndentScriptAndStyle: "boolean" },
+            ],
+          },
+        },
+      },
+    ],
   },
   defaultOptions,
   create(context) {
+    const overridePrettierOption = context.options[0]?.overridePrettierOption;
+
     const sourceCode = context.getSourceCode();
     const filePath = context.getFilename();
 
@@ -50,8 +69,11 @@ export = createRule<[Options], MessageIds>({
       getPrettierRcOption(filePath)
     );
 
-    const { baseIndent, indentChar } = getIndentInfo(mergedPrettierOption);
-    const indent = indentChar.repeat(baseIndent);
+    const { indentRepeatTime, indentChar } = getCodeWrapIndentInfo(
+      mergedPrettierOption,
+      overridePrettierOption
+    );
+    const indent = indentChar.repeat(indentRepeatTime);
 
     return {
       Program(node: AST.ESLintProgram) {
@@ -76,15 +98,13 @@ export = createRule<[Options], MessageIds>({
 
             const code = sourceCode.text.slice(...codeRange);
 
-            const prettierConfig = getPrettierRcOption(filePath);
+            const prettierConfig = {
+              ...getPrettierRcOption(filePath),
+              ...overridePrettierOption,
+            };
 
             const formattedCode = prettier
-              .format(
-                code,
-                Object.assign({}, prettierConfig, {
-                  parser: prettierParser,
-                })
-              )
+              .format(code, { ...prettierConfig, parser: prettierParser })
               .trim();
 
             let lines = formattedCode.match(LINES);

lib/utils/get-code-wrap-indent-info.ts

@@ -0,0 +1,60 @@
+import prettier from "prettier";
+
+import { MergedPrettierOption } from "./get-prettier-option";
+import { PrettierSupportOptionName } from "./types";
+
+const indent = {
+  space: " ",
+  tab: "\t",
+  none: "",
+};
+
+export type OverridePrettierOption =
+  | {
+      tabWidth?: number;
+      useTabs?: boolean;
+      vueIndentScriptAndStyle?: boolean;
+    }
+  | undefined;
+
+type PrettierOptions = {
+  [key in PrettierSupportOptionName]: prettier.SupportOption["default"];
+};
+
+/**
+ * Get indent information
+ */
+export const getCodeWrapIndentInfo = (
+  mergedPrettierOptions: MergedPrettierOption,
+  eslintOption?: OverridePrettierOption
+) => {
+  const defaultInfo = {
+    indentRepeatTime: 0,
+    indentChar: indent.space,
+  };
+
+  const prettierOptions = mergedPrettierOptions as PrettierOptions;
+
+  const tabWidth = eslintOption?.tabWidth || prettierOptions.tabWidth;
+  const useTabs = eslintOption?.useTabs ?? prettierOptions.useTabs;
+  const vueIndentScriptAndStyle =
+    eslintOption?.vueIndentScriptAndStyle ??
+    prettierOptions.vueIndentScriptAndStyle;
+
+  const result = {
+    indentRepeatTime: tabWidth as number,
+    indentChar: defaultInfo.indentChar,
+  };
+
+  if (useTabs) {
+    result.indentRepeatTime = 1;
+    result.indentChar = indent.tab;
+  }
+
+  if (!vueIndentScriptAndStyle) {
+    result.indentRepeatTime = 0;
+    result.indentChar = indent.none;
+  }
+
+  return { ...defaultInfo, ...result };
+};

lib/utils/get-indent-info.ts

@@ -1,29 +1,36 @@
 import prettier from "prettier";
 
+type PrettierOptions = {
+  [key: string]: prettier.SupportOption["default"];
+};
+
 /**
  * Get Prettier's default option
  */
 export const getPrettierDefaultOption = prettier
   .getSupportInfo()
-  .options.reduce((acc, option) => {
+  .options.reduce<PrettierOptions>((acc, option) => {
     acc[option.name] = option.default;
     return acc;
-  }, {} as any);
+  }, {});
 
 // /**
 //  * Get option from .prettierrc
 //  */
 export const getPrettierRcOption = (filePath: string) =>
   prettier.resolveConfig.sync(filePath, {
     editorconfig: true,
-  });
+  }) as PrettierOptions | null;
 
 // /**
 //  * Get option merged getPrettierDefaultOption and getPrettierRcOption
 //  */
 export const getMergedPrettierOption = (
   prettierDefaultOption: typeof getPrettierDefaultOption,
   prettierRcOption: ReturnType<typeof getPrettierRcOption>
-) => ({ ...prettierDefaultOption, ...prettierRcOption });
+) => ({
+  ...prettierDefaultOption,
+  ...prettierRcOption,
+});
 
 export type MergedPrettierOption = ReturnType<typeof getMergedPrettierOption>;

lib/utils/get-prettier-option.ts

@@ -6,7 +6,7 @@ export * from "./parser-services";
 // Prettier
 // ====================================================
 export * from "./get-prettier-option";
-export * from "./get-indent-info";
+export * from "./get-code-wrap-indent-info";
 
 // ====================================================
 // AST

lib/utils/index.ts

@@ -0,0 +1,33 @@
+/**
+ * @see https://prettier.io/docs/en/options.html
+ */
+type PrettierDefaultOptionName =
+  | "arrowParens"
+  | "bracketSpacing"
+  | "cursorOffset"
+  | "endOfLine"
+  | "filepath"
+  | "htmlWhitespaceSensitivity"
+  | "insertPragma"
+  | "jsxBracketSameLine"
+  | "jsxSingleQuote"
+  | "parser"
+  | "pluginSearchDirs"
+  | "plugins"
+  | "printWidth"
+  | "proseWrap"
+  | "quoteProps"
+  | "rangeEnd"
+  | "rangeStart"
+  | "requirePragma"
+  | "semi"
+  | "singleQuote"
+  | "tabWidth"
+  | "trailingComma"
+  | "useTabs"
+  | "vueIndentScriptAndStyle";
+
+/**
+ * Note: If eslint-plugin-gridsome supoprts prettier's plugin, define type like PrettierDefaultOptionName. Then, merge type at this type.
+ */
+export type PrettierSupportOptionName = PrettierDefaultOptionName;

lib/utils/types/Prettier.ts

@@ -1,3 +1,4 @@
 export * from "./Node";
 export * from "./Rule";
 export * from "./Parser";
+export * from "./Prettier";