TypeScript Barrel Generator

❓ Why

Working with TypeScript? Want to make your TypeScript imports cleaner? Use this extension to easily export all modules to a barrel index.ts file.

Info: A "barrel" is a way to rollup exports from several modules into a single convenient module. The barrel itself is a module file that re-exports selected exports of other modules.

Example:

// folder/index.ts
export * from "./foo";
export * from "./bar";

✨ Functionalities

The extension allows you to manually or automatically export the modules to a barrel file. For the automatic way, you first have to create a listener for the folder for which you want to create the automated export.

In both the manual and automatic way, an index.ts file will be created with a reference to all the folder/files in the current directory.

Info: If there are folders/files you want to get excluded from the export, you can do this by right-clicking on the folder/file and clicking on the TypeScript: Exclude folder/file from export.

Create from the current file directory

By using the Barrel Generator: Export all modules from the current file directory command, you can create a barrel file from the current file path its directory.

Info: If you want, you can add your own keybinding to this command to make it easier to trigger.

Manual creation

Module creation by listener

Info: When a folder listener is added, it will be visible in the TypeScript - Export Listeners view. By clicking on the folder names, you will automatically open the index.ts file.

Removing a listener

Folder listeners can be removed by right-clicking on the folder name in the TypeScript - Export View.

Excluding folder(s)/file(s)

If there are specific folders or files you want to exclude from your module, you can do this by right-clicking on the file, and click on the TypeScript: Exclude folder/file from export menu action.

Include previously excluded folder(s)/file(s)

When you already excluded a folder or file, and want to include these again into your module export, you can do this from the TypeScript - Export View. Under the Excluded folders & files section, right-click on the folder or file to include and click Include to export.

Customizing the Barrel File Name

By default, the barrel file is named index.ts. You can customize this name using the exportall.config.barrelName setting in your VS Code settings. For example:

"exportall.config.barrelName": "barrel.ts"

This will generate a barrel file with the specified name instead of index.ts.

Recursive Folder Search

You can enable recursive searching of subdirectories for TypeScript files using the exportall.config.recursive setting. This is useful when you have a folder structure like:

components/
  button/
    button.tsx
    button.module.scss
  textBox/
    textBox.tsx
    textBox.module.scss

To export TypeScript files from all subdirectories without requiring index files in each subfolder:

"exportall.config.recursive": true

When enabled, running the export command on the components folder will create:

// components/index.ts
export * from './button/button';
export * from './textBox/textBox';

⚙️ Configuration / Settings

The extension makes use of the following settings:

💪 Contribute

Experiencing any issues, or got feedback to share? Feel free to raise this in the issue list of the repo: issues.

🔑 License

MIT