Add an Organize Imports step

[akd-io]

We are bound to run into problems with duplicate imports sooner rather than later.

Why

Say we have two plugins that both need to add a context provider in _app.tsx. Now say each of these plugins imports React from "react", in order to later reference React.createContext.

Now the CLI will generate the duplicate imports

import React from "react";
import React from "react";

which will throw Duplicate identifier 'React'. ts(2300)

The solution

Before running Prettier on the generated code base at the end of the setup process, perform the organizeImports function from the TypeScript Language Service, which is available through the typescript package.

Resources:

• https://github.com/simonhaenisch/prettier-plugin-organize-imports/blob/master/lib/organize.js
• https://github.com/microsoft/TypeScript/wiki/Using-the-Language-Service-API
• https://github.com/microsoft/TypeScript-Compiler-Notes
• https://github.com/microsoft/TypeScript-Compiler-Notes/blob/main/GLOSSARY.md