Issue Prettier, eslint x codegen & @vue/apollo-composable

[jlorezz]

Currently, having an issue with GraphQL code gen and @vue/apollo-composable. ELINT and prettier is automatically formatting stuff to be wrong.

export default defineComponent({
    name: 'userlist',
    setup() {
        // eslint-disable-next-line prettier/prettier
        const { onResult } = useQuery<GetUsersQueryVariables>(GetUsersDocument);

        onResult(({ data }) => {
            console.log(data);
        });

        return {
            people,
        };
    },
});

it automatically formats this part when i save:

const { onResult } = useQuery<GetUsersQueryVariables>(GetUsersDocument);

to this:

const { onResult } = useQuery < GetUsersQueryVariables > GetUsersDocument;

which is not valid syntax for apollo-composable

[lydell]

Hi!

This happens when you use the “wrong” parser in Prettier. For example, when using the babel parser:

Prettier 2.2.1 Playground link

--parser babel

Input:

const { onResult } = useQuery<GetUsersQueryVariables>(GetUsersDocument);

Output:

const { onResult } = useQuery < GetUsersQueryVariables > GetUsersDocument;

When using for example the typescript parser it looks like you expect:

Prettier 2.2.1 Playground link

--parser typescript

Input:

const { onResult } = useQuery<GetUsersQueryVariables>(GetUsersDocument);

Output:

const { onResult } = useQuery<GetUsersQueryVariables>(GetUsersDocument);

The reason this happens is that when interpreted as JavaScript, the code happens to be valid syntax using the < and > operators (although the code is non-sensical), but when interpreted as TypeScript the code is a function call with a generic.

This issue often happens when people add "parser": "whatever" to their .prettierrc. If so, the solution is to remove that. See https://prettier.io/docs/en/configuration.html#setting-the-parserdocsenoptionshtmlparser-option for more information.

Hopefully that’s the problem. Otherwise it’s hard to say what’s wrong since you didn’t include steps to reproduce. A tip for the future: Try running only Prettier when debugging stuff like this. Then you can find out if it’s Prettier’s fault, ESLint’s fault or the combination of the two, and find the correct repo to report in. I doubt this has anything to do with eslint-config-prettier.

[lydell]

Closing because no response.