Run autofix to sort these imports! on eslint simple-import-sort/imports plugin in TypeScript

Question

Eslint is autofixing and cleaning up my code so far. But now I added these two eslint plugins:

"eslint-import-resolver-typescript": "^3.5.2",
"eslint-plugin-import": "^2.26.0",

• https://github.com/lydell/eslint-plugin-simple-import-sort

I used them in .eslintrc.json in the rules section:

"simple-import-sort/imports": [
  "error",
  {
    "groups": [
      [
        "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
      ],
      ["^\\w"],
      ["^@"],
      ["^\\u0000"],
      ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
      ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"]
    ]
  }
],
"simple-import-sort/exports": [
  "error",
  {
    "groups": [
      [
        "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
      ],
      ["^\\w"],
      ["^@"],
      ["^\\u0000"],
      ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
      ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"]
    ]
  }
],
"import/first": "error",
"import/newline-after-import": "error",
"import/no-duplicates": "error"

I also have:

"plugins": [
  "@typescript-eslint",
  "import",
  "simple-import-sort"
],

Why is it not autofixing the imports on save though?

My .vscode/settings.json is like this, which allows fix on save:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript"],
  "eslint.nodePath": "./node_modules/eslint",
  "eslint.packageManager": "npm"
}

Answer 1

If you want esLint to run across your code in one commit, call npx eslint . --fix.

This will run eslint and attempt to fix all possible issues (such as import sorting) that it can.

In my vsCode settings.json I have the following:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.ignoreUntitled": true,
  "eslint.validate": ["javascript", "typescript"],
  "eslint.format.enable": true,
  "eslint.run": "onSave",

This will then run eslint on save to correct issues like imports or let => const

Also, make sure VScode is updated; on ubuntu, it took updating the app to get this working.