
Today, I revisited the react-native project that was developed and published by me earlier and the first thing I did was to run tests because I intended to add more Typescript support to the project, wanted to know the current state of test suites of the project.

It wasn't the best FIRST task as a start, but in my opinion, adding more Typescript will be benefiting over the long run.

I've identified removing unused imports to be the low hanging fruit to fix the `tsc` errors.

I started with [https://www.npmjs.com/package/eslint-plugin-unused-imports](https://www.npmjs.com/package/eslint-plugin-unused-imports) but turned out it also removes custom Types import that was used in my files.

Then I found out that VS Code can achieve that with organize import feature.

```
"editor.formatOnSave": true,
"[typescript]": {
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    }
}
```

That works also with `Shift` + `Option` + `o` shortcut. However, that will also reorder the imports alphabetically.
It seems like there is no way to only remove unused imports without reorder them with `organizeImports`, that being one issue.
The second issue is that I need to also press the shortcut keys for every files. Which is very repetitive work, because there are 1105 files in my `/src` directory.

```
$ find src -type f | wc -l
  1105
```

The second issue was resolved with a VS Code extension to run `organizeImports` in a folder.

[https://marketplace.visualstudio.com/items?itemName=bierner.folder-source-actions](https://marketplace.visualstudio.com/items?itemName=bierner.folder-source-actions)

Then to reorder the imports to my desired orders, I found this great article [https://dev.to/otamnitram/sorting-your-imports-correctly-in-react-213m](https://dev.to/otamnitram/sorting-your-imports-correctly-in-react-213m) that does that.

This is my config

```
"import/order": [
  "error",
  {
    "groups": [ "builtin", "external", "internal", ["parent", "sibling"] ],
    "pathGroups": [
      {
        "pattern": "react+(|-*)",
        "group": "external",
        "position": "before"
      },
      {
        "pattern": "@**+(/**)",
        "group": "internal",
        "position": "before"
      }
    ],
    "pathGroupsExcludedImportTypes": ["react"],
    "newlines-between": "always",
    "alphabetize": {
      "order": "asc",
      "caseInsensitive": true
    }
  }
],
```

Just a TIL from me. That's it! Hope it helps.

Cheers.


Remove unused and reorder imports

January 21, 2022