Automatic import sorting with ESLint

Recently I found that it is possible to automatically sort imports in VS Code when saving a file. To do this you just need to set a flag in the settings.json

cmd+shift+p → Open User Settings (JSON)

{
    ...
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    }
}

More granular settings using eslint

If, like me, you need more precise settings, you can also use eslint plugins in combination with eslint-autofix.

While the plugin eslint-plugin-import is probably the most popular and has many configuration options. I went with eslint-plugin-simple-import-sort because it has a simpler feature set and is easy to configure.

For VS Code there is an option to execute eslint --fix when saving a file. For this to work you can ignore the above setting and add this to your settings.json instead:

{
    ...
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
}

This will automatically fix all auto fixable eslint errors when saving a file.

The value for this setting used to be Boolean, this was changed in VSCode 1.85.0 and can now be "explicit", "always" or "never". Read more here

My settings for eslint-plugin-simple-import-sort

Basically all I want to do is import React at the top and group packages, local imports and style and media imports at the bottom.

This was relatively simple: you first need to install the eslint plugin:

npm install --save-dev eslint-plugin-simple-import-sort

Then configure the plugin in your eslint config file (.eslintrc.json in my case):

{
  ...
  "plugins": ["simple-import-sort"],
  "rules": {
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // 1. Side effect imports at the start. For me this is important because I want to import reset.css and global styles at the top of my main file.
          ["^\\u0000"],
          // 2. `react` and packages: Things that start with a letter (or digit or underscore), or `@` followed by a letter.
          ["^react$", "^@?\\w"],
          // 3. Absolute imports and other imports such as Vue-style `@/foo`.
          // Anything not matched in another group. (also relative imports starting with "../")
          ["^@", "^"],
          // 4. relative imports from same folder "./" (I like to have them grouped together)
          ["^\\./"],
          // 5. style module imports always come last, this helps to avoid CSS order issues
          ["^.+\\.(module.css|module.scss)$"],
          // 6. media imports
          ["^.+\\.(gif|png|svg|jpg)$"]
        ]
      }
    ]
  }
}

💡 If you want to fix all files in a folder, you should be able to just run npx eslint --fix ./dir/subdir instead of opening and saving every single file. But make sure you have a clean git before you do that ;)

Hope this helps someone. Feel free to comment if you have any questions and/or suggestions.

Note to self: 1. I should evaluate using a prettier plugin for import instead. 2. For CSS Modules the import order is relevant, css imports should not be reordered.