Enforce consistent format style in query block ex) <page-query>,<static-query>(gridsome/format-query-block)

• 🔧 The --fix option on the command line (opens new window) can automatically fix some of the problems reported by this rule.

• This rule checks the consistency of a code in <page-query> and <static-query> tags.

• This rule's formatter is Prettier (opens new window). Parser is graphql (opens new window)

• If you use .prettierrc, this rule follow Prettier's option at .prettierrc. This rule checks the option useTabs, tabWidth, and vueIndentScriptAndStyle.

📖 Rule Details

👎 Examples of incorrect code for this rule:

<page-query>
  query Blog { allWordPressPost (limit: 5) { edges { node { id title } }} }
</page-query>

<static-query>
  query Example { example: examplePage(path: "/docs/example") { content }}
</static-query>

👍 Examples of correct code for this rule:

<page-query>
  query Blog { allWordPressPost(limit: 5) { edges { node { id title } } } }
</page-query>

<static-query>
  query Example { example: examplePage(path: "/docs/example") { content } }
</static-query>

🔧 Options

{
  "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 (opens new window)
  • useTabs (opens new window)
  • vueIndentScriptAndStyle (opens new window)