Complete Guide to Automating Import Organization and Removal in Angular Projects

Built-in Import Organization in Visual Studio Code

Since Visual Studio Code version 1.22, the editor natively supports import organization for TypeScript and JavaScript files. This functionality is implemented through the "Organize Imports" command, which automatically removes unused import statements and reorganizes the structure of existing imports.

In Windows systems, this feature can be triggered using the Alt+Shift+O keyboard shortcut; in macOS systems, the corresponding shortcut is Option+Shift+O. This functionality is particularly useful for handling module imports in Angular components, capable of consolidating scattered import statements into more concise forms.

Enhanced Functionality with TypeScript Hero Extension

While VS Code provides basic import organization capabilities, the TypeScript Hero extension offers a more comprehensive import management solution. This extension includes the following core features:

• Automatically add imports from your project or libraries to the current file
• Quickly add imports for symbols under the cursor
• Add all missing imports in a file with a single command
• Intelligent symbol suggestions with automatic import addition
• "Light bulb feature" for fixing code issues
• Sort and organize imports (including sorting and removing unused imports)
• Code outline view displaying the structure of open TypeScript documents

The extension provides independent shortcuts: Ctrl+Alt+o for Windows systems and Control+Option+o for macOS systems.

Automated Import Organization on Save Configuration

To achieve a more efficient development workflow, automatic import organization can be configured in VS Code user settings. By modifying the settings.json file, add the following configuration:

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

This configuration ensures that import organization is automatically executed each time a file is saved, eliminating the need for manual shortcut triggering and significantly improving development efficiency.

Project-Level Batch Import Cleaning Solution

For large Angular projects, handling unused imports file by file can be inefficient. In such cases, a TSLint-based batch cleaning solution can be employed. This solution requires installing necessary Node.js packages:

npm install -g typescript tslint tslint-etc

Create a specialized TSLint configuration file tslint-imports.json in the project root directory:

{
  "extends": ["tslint-etc"],
  "rules": {
    "no-unused-declaration": true
  }
}

Execute the batch fix command:

tslint --config tslint-imports.json --fix --project .

This command recursively traverses all *.ts files in the project, automatically removing unused imports. It is crucial to ensure that the project is under version control before executing this operation, allowing rollback of changes if issues arise.

Practical Application Examples and Best Practices

Consider a typical Angular module import scenario. The original code might contain multiple scattered import statements:

import { AutoCompleteModule, InputSwitchModule } from 'primeng/primeng';
import { ListboxModule } from 'primeng/primeng';

After import organization, these statements would be consolidated into:

import { AutoCompleteModule,
         InputSwitchModule,
         ListboxModule } from 'primeng/primeng';

In practical development, it is recommended to combine multiple approaches: use VS Code's built-in functionality or the TypeScript Hero extension for real-time organization during daily development, and employ TSLint for batch cleaning during project maintenance phases. Additionally, after performing batch operations, always run project build commands (such as ng build --prod) to verify code correctness.

Security Considerations and Version Compatibility

While automated tools improve efficiency, they also introduce certain risks. Before using any automatic fix functionality, it is essential to ensure:

• The project is under version control
• Important changes have been committed or backed up
• Understanding of the tool's specific behavior and processing logic
• Verification of functional integrity after fixes

Different versions of VS Code and TypeScript may have variations in import organization functionality; it is advisable to consult the official documentation for the respective versions before use. For large team projects, import organization standards and tool configurations should be unified within the team.