Discussion on: Using ESLint and Prettier in a TypeScript Project

robertcoopercode profile image
Robert Cooper Author

I think your extends array should be the following (I've added comments explaining things):

    extends: [
        'plugin:@typescript-eslint/recommended', // uses typescript-specific linting rules
        'plugin:react/recommended', // uses react-specific linting rules
        'plugin:prettier/recommended', // enables eslint-plugin-prettier and eslint-config-prettier
        'prettier/react', // disables react-specific linting rules that conflict with prettier
Thread Thread
bitttttten profile image

Still didn't seem to fix the issue! Although I also ran into this last week, which I have not been able to solve. Something must be wrong with my setup somewhere haha. Check it out:

Prettier wants this:

export default function Heading(
    props: HTMLProps<HTMLHeadingElement> & {
        as?: AsTags
        withComponent?: HeadingTags
) /* .... */

But typescript fails to compile because of the missing comma after as?: AsTags as it wants as?: AsTags, but prettier removes it ._.

Thanks for providing the snippets though. If you can shed any light on this one I would appreciate it a ton :3