Keeping Your Angular Code Clean: Removing Unused Imports and Declarations in Visual Studio Code

• Imports: In Angular, you bring in functionalities from external libraries or modules using import statements. Unused imports clutter your code and can slow down compilation.
• Declarations: These are components, directives, pipes, or services defined in your TypeScript files. If they're not used anywhere in your application, they're unnecessary.

Removing Unused Imports and Declarations in Visual Studio Code

Visual Studio Code (VS Code) offers built-in features to streamline this process:

1. Code Actions (Refactor Menu):

   • Open the file containing the imports or declarations.
   • Place your cursor on an unused import statement (or right-click on it).
   • Press Ctrl + . (Windows/Linux) or Cmd + . (macOS) to trigger the Code Actions menu.
   • Select "Remove Unused Import" (or a similar option) to delete the import.

2. Organize Imports:

   • Open the file with imports.
   • Use the shortcut Shift + Alt + O (Windows/Linux) or Shift + Option + O (macOS).
   • VS Code will automatically remove unused imports and organize the remaining ones alphabetically.

Additional Tips:

• Linter Integration: Consider using a linter like ESLint or TSLint with rules that detect unused imports. These can provide automated warnings or even fix the code automatically.
• Extensions: Explore VS Code extensions that specifically target unused import removal and code organization. Search for extensions like "ESLint" or "TSLint" in the VS Code Marketplace.

Example Codes:

import { Component, OnInit } from '@angular/core';
import { SomeService } from './some.service'; // This might be unused
import { MyUnusedComponent } from './my-unused.component'; // This might be unused

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  constructor() { }

  ngOnInit(): void { }
}

Removing Unused Imports:

1. Code Actions Menu:
   • Place your cursor on the unused import line (e.g., import { SomeService } from './some.service';).

Result:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  constructor() { }

  ngOnInit(): void { }
}

1. Organize Imports:

Result (similar to Code Actions):

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  constructor() { }

  ngOnInit(): void { }
}

Removing Unused Declarations:

• If MyUnusedComponent is indeed unused throughout your application, you can safely delete its declaration entirely (including the class definition). This can be done manually or potentially with linter rules.

Alternate Methods for Removing Unused Imports and Declarations in Angular 2+

Linters with Autofix:

• ESLint or TSLint: These popular linters offer rules that detect unused imports and declarations. You can configure them to automatically remove these during code checks.
  • Install the linter extension and its recommended rules for Angular in VS Code.
  • Configure rules like no-unused-imports or no-unused-vars in your linter configuration file (e.g., .eslintrc.json or tslint.json).
  • Run the linter with the --fix flag to automatically remove unused imports and declarations.

Example (Using TSLint):

1. Install tslint and tslint-etc packages:

   npm install -g tslint tslint-etc
   

2. Create a tslint.json file in your project root and add the following configuration:

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

3. Run the following command to fix unused imports in all TypeScript files:

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

Code Formatting Tools with Sort Import Functionality:

• Some code formatters like Prettier or Code Formatting by ESLint can automatically sort imports and remove unused ones during formatting.
• Install the formatter extension of your choice in VS Code.
• Configure the formatter to sort imports and potentially remove unused ones (options may vary depending on the formatter).
• Save your files, and the formatter will automatically apply the configuration.

Custom Scripts or Tools:

• For more complex scenarios, you might consider creating custom scripts or utilizing existing tools like organize-imports-cli. These tools can scan your project for unused imports or declarations and remove them based on your criteria.

Choosing the Right Method:

• The best method depends on your project's size, preferences, and desired level of automation.
• Linters with autofix offer a good balance of control and automation.
• Code formatters with import sorting can be a convenient option during development.
• Custom scripts or tools are useful for complex scenarios or integration into build processes.