VS Code project code formatting using ESLint

Question

I'm using VS Code for a React project and have VS Code configured to format on save and to Require a 'prettierconfig' to format (the Prettier: Require Config setting from the VSCode Prettier extension). I also have the ESLint plugin enabled.

That seems to mean my project's .prettierrc config file drives the formatting on save and .eslintrc.json provides linting warnings. But in at least one case (below) some formatting issues are left unresolved on save.

The code below, as formatted, shows eslint(indent) squiggly warnings in VS Code. Upon save (Ctrl + S), some get resolved, but some do not.

Specifically, the incorrect indent spacing of the first <div> gets fixed on save and that eslint(indent) warning disappears. However, the later eslint(indent) warnings do NOT get resolved on save. But they DO, however, get resolved when (on Windows) I click Ctrl +Shift+ P, then find and click the "ESLint: Fix all auto-fixable Problems".

When I save the file again those changes are reverted and the warning appears again.

So "format on save" applies different formatting than "ESLint: Fix all auto-fixable Problems". Is there a way to reconcile these? I would like all the eslint(indent) issues to resolve on save.

Does anyone know what ESLint settings drive "ESLint: Fix all auto-fixable Problems"?

const MyModule = () => {
  ...   

  return (
    // "eslint(indent)" warning on next line gets resolved on save
  <div>
      {!menus.find(function(permission) {
        return permission.level === 'ADMIN';
      }) ? (
        // "eslint(indent)" warnings below DO NOT get resolved on save
        // ... but they DO get resolved on "ESLint: Fix all auto-fixable problems"
        // ... then they reappear on save
        <div>
          <Redirect to="/" />
        </div>
      ) : (
        <div>
          <Results />
        </div>
      )}
    </div>
  );
};

export default MyModule;

My .eslintrc.json contents:

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "rules": {
    "react/prop-types": 0,
    "no-console": 1,
    "no-control-regex": 0,
    "indent": ["warn", 2],
    "quotes": ["warn", "single"],
    "space-in-parens": 1,
    "prefer-destructuring": 0,
    "prefer-const": 0
  },
  "parser": "babel-eslint",
  "plugins": ["react", "import", "jsx-a11y"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

My .prettierrc:

{
  "useTabs": false,
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true
}

Answer 1

Like the other posted suggested, I use a setup where eslint runs prettier for me. I already had prettier disabled for my js/ts files so I knew that wasn't the issue. It turns out it was the built in formatter for vscode and turning off editor.formatOnSave fixed the issue.

My project's settings.json. This disables the formatter only for typescript files. Eslint will still fix your files as long as you have the eslint auto fix settings enabled.

{
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false
  }
}

Rather than turning off formatOnSave, you could instead set the default formatter to eslint:

{
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

Here are the rest of my settings just for reference.

My user settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "markdown"
  ]
}

.eslintrc

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "tsconfig.json",
    "warnOnUnsupportedTypeScriptVersion": false
  },
  "plugins": ["@typescript-eslint", "jest", "prettier"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "tabWidth": 2,
        "useTabs": false,
        "semi": false,
        "singleQuote": true,
        "trailingComma": "all",
        "printWidth": 110
      }
    ]
  }
}

Answer 2

Instead of using both prettier and eslint formatters, just use the eslint formatter and add your prettier options inside your eslintrc file. Here's an example

https://prettier.io/docs/en/integrating-with-linters.html

// .eslintrc.json

...
"rules": {
 "prettier/prettier": [
    1,
    {
      "useTabs": false,
      "printWidth": 120,
      "tabWidth": 2,
      "singleQuote": true
    }
  ]
}
...