re: Using ESLint and Prettier in a TypeScript Project VIEW POST


You need to run prettier through ESLint, otherwise you'll get these kind of conflicts.


It seems that vscode is running prettier when formatting on save, rather than eslint! I will look into it on Monday when I back with my laptop :P

You need to make sure to turn off the formatOnSave in VSCode for your JavaScript and Typescript files. Here are the settings:

"editor.formatOnSave": true,
"[javascript]": {
    "editor.formatOnSave": false,
  "[javascriptreact]": {
    "editor.formatOnSave": false,
  "[typescript]": {
    "editor.formatOnSave": false,
  "[typescriptreact]": {
    "editor.formatOnSave": false,

Then to make sure you get ESLint to fix problems on save, make sure you have the following settings in VS Code:

"eslint.autoFixOnSave": true,
  "eslint.validate": [
    {"language": "typescript", "autoFix": true },
    {"language": "typescriptreact", "autoFix": true }

Thanks! But there is still an issue with it :( It seems like a conflict between eslint(prettier/prettier) and eslint(@typescript-eslint/indent). I also feel like eslint is running twice or something. For now I have set:

    rules: {
        '@typescript-eslint/indent': 'off',

Here's my full eslint config file:

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
        project: './tsconfig.json',
        tsconfigRootDir: './',
    settings: {
        react: {
            version: 'detect',
    rules: {
        '@typescript-eslint/interface-name-prefix': 'always',
        '@typescript-eslint/no-explicit-any': 'always',
        '@typescript-eslint/explicit-function-return-type': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/no-use-before-define': 'off',
        '@typescript-eslint/member-delimiter-style': {
            delimiter: 'none',
            requireLast: true,

VSCode User settings:
VSCode Workspace settings:

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

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

code of conduct - report abuse