Automatic import sorting in Visual Studio Code
Tags: javascript, tooling
Published: 2023-07-12 15:42:53

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)`

```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:

```json
{
    ...
    "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](https://code.visualstudio.com/updates/v1_85#_code-actions-on-save-and-auto)

## 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:

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

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

```jsonc
{
  ...
  "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.