Support for linting graphql files?

[quantizor]

Biome has replaced eslint for almost everything, but one of the remaining file types is *.graphql. I was wondering if support for this could be considered?

Here's an example of graphql-oriented eslint rules → https://the-guild.dev/graphql/eslint/docs/configs

[bigint]

Very much needed, we migrated our huge monorepo to biome today, but we miss graphql linting very much

https://github.com/heyxyz/hey

[wcastand]

Any update on this? it's the number one request and by quite far, would it be considered?

considering switching back to prettier for this :/
no formatting in graphql tag is not nice :/

[ematipico]

In our roadmap for 2024, graphql isn't part of the languages we want to tackle.

Although, if someone wants to take on the task using our infrastructure, they are more than welcome!

[gaving]

Hope the team will re-consider since this is your most upvoted discussion (by a factor of almost 2x).

No shade, really a huge fan of the project - just something we're sorely missing!

[quantizor]

Would love to see some sort of formal extension framework so new rules can be contributed and/or plugged-in. That would work well for the community and help foster adoption (often companies will have their own rules for employee devs and lack of custom rules is a deal breaker for many.)

[quantizor]

I don't think Rust is even a barrier here, as long as there's a way to plug in third-party rule crates somehow.

[ematipico]

Hope the team will re-consider since this is your most upvoted discussion (by a factor of almost 2x).

No shade, really a huge fan of the project - just something we're sorely missing!

I know, but we are just a few, the help is very minimal and we want to do what we like and interest us.

Try to look at Apollo rust and see if there's a way to integrate in Biome.

[kgregory]

I have been trying to replace Prettier with Biome and the lack of GraphQL support continues to be a major hurdle. I've encountered a couple of issues and am currently stuck.

Issue 1: Ensuring that GraphQL statements are formatted

You're here, so you're aware that at the time of writing, Biome doesn't support GraphQL and has no intention of adding this support soon. I wasn't here when I realized this. Instead, I happened to notice that Biome wasn't formatting GraphQL statements at all after being under the false impression that Biome had reached 97% compatibility with Prettier (and not just its JavaScript capabilities).

I was able to get around this by creating a setup that uses both Biome and Prettier for formatting. I run Biome first and a second pass with Prettier to cover the languages that are supported by Prettier, but not yet supported by Biome.

To do this, we use the following as the basis for .prettierignore:

# ignore everything as a baseline
# don't ignore directories, so we can recurse into them

*
!*/

# html/css/graphql/markdown/yaml are not yet covered by Biome

!*.css
!*.html
!*.htm
!*.graphql
!*.gql
!*.markdown
!*.md
!*.yaml
!*.yml
!*.gql.ts

Prettier's GraphQL support covers GraphQL files (*.graphql, *.gql) and GraphQL that is defined in a template expression. The last entry in our .prettierignore snippet above, *.gql.ts, is a convention we've adopted for TypeScript files that use gql to define template expressions and it allows us to have Prettier handle this subset of our TypeScript code. We aren't excluding these files from Biome, so they will be formatted in two passes. Effectively, Biome imposes its formatting and import organization rules and Prettier formats the file again, adjusting the GraphQL statements.

For now, this seems okay, because it seems as though Biome is trying to offer Prettier compatibility. As Biome and Prettier drift, this will be a problem, but it's the best we have for now. So this is kind of worked around, but I don't feel too great about it.

Issue 2: Ensuring the proper VS Code Plugin

Now that I'm using Biome and Prettier for formatting, I need to wrangle their respective plugins so that VS Code formats files as expected. For the most part, this works fine because VS Code can be configured to use Biome's plugin by default and Prettier's plugin for the other languages:

    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[graphql]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[handlebars]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[markdown]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[yaml]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit",
      "source.organizeImports.biome": "explicit"
    },

However, I am faced with a dilemma for TypeScript files that define GraphQL statements as template literals (The files we've been creating using the *.gql.ts convention). While the CI can run Biome and Prettier in sequence, producing results that are currently acceptable, there is no way to configure VS Code to use two formatters for the same file. As I see it, these are my options:

1. Use Biome's plugin for all TypeScript files and accept the fact that gql tagged GraphQL expressions may be saved in the incorrect format (relying on CI to catch these errors so they can be fixed using the CLI).
2. Configure VS Code with a file.association for *.gql.ts so that these files are considered GraphQL, but lose Biome's import organization (relying on CI to catch these errors so they can be fixed using the CLI).
3. Set TypeScript's default formatter to be Prettier, which defeats most of the purpose of using Biome's plugin since most of our code is TypeScript (and suffers the same issues with respect to import organization, described in the previous options)
4. Stick with Prettier and scrap Biome until GraphQL is supported.

This extension allows us to run multiple formatters for a given language, which would have to be TypeScript to solve this issue. Unfortunate because this means formatting in VS Code would pretty much always run both Biome and Prettier whenever you save, which would be just slow enough to be annoying.

[ematipico]

Hi, everyone!

We just opened an issue to track the work for GraphQL support. Considering the huge success of this discussion, we would like to give the opportunity to other people to try and implement this feature in core.

We're seeking funding as a means to incentivise the developments. The core team needs to stick to the roadmap, but we are also more than happy to help any contributor to achieve the task with mentoring, PR reviews and coordination.

#1927