Visual Studio Code で Angular のコードをクリーンアップする方法
Angular 2+ で使用されていないインポートと宣言を削除する方法
手動で削除する
これは最も簡単な方法ですが、時間がかかり、誤って必要なコードを削除してしまう可能性があります。
IDE またはエディターの機能を使う
多くの IDE またはエディターには、使用されていないインポートと宣言を自動的に検出して削除する機能があります。
これらの拡張機能をインストールすると、以下のコマンドを使って使用されていないインポートと宣言を削除することができます。
Ctrl + Shift + I
ng lint コマンドは、コードのスタイルと静的解析を実行するコマンドです。このコマンドを実行すると、使用されていないインポートと宣言に関する警告が表示されます。
ng lint
警告が表示されたら、以下のコマンドを使って該当するコードを削除することができます。
ng fix -- lint
ngcc コマンドは、Angular コンパイラによって生成された JavaScript ファイルを最適化するコマンドです。このコマンドを実行すると、使用されていないインポートと宣言が自動的に削除されます。
ngcc
注意事項
- 使用していないインポートと宣言を削除する前に、コードをバックアップすることをおすすめします。
- 削除するコードが本当に使用されていないことを確認してください。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
// 使用されていないインポート
import { FormsModule } from '@angular/forms';
// 使用されていない宣言
export class UnusedClass {
}
これらのコードを削除するには、以下の方法があります。
import { FormsModule } from '@angular/forms'; と export class UnusedClass { のコードを削除します。
Visual Studio Code の場合、Ctrl + Shift + I コマンドを実行すると、使用されていないインポートと宣言が自動的に検出され、削除することができます。
ng lint コマンドを実行すると、使用されていないインポートと宣言に関する警告が表示されます。
ng lint
ng fix -- lint
ngcc
Webpack の unused-imports プラグインは、使用されていないインポートを検出して削除するプラグインです。
このプラグインを使うには、以下の手順が必要です。
- プロジェクトに Webpack をインストールする。
webpack.config.jsファイルにunused-importsプラグインを追加する。
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.UnusedImportsPlugin(),
],
};
- Webpack を実行する。
webpack
import rollupPluginUnusedImports from 'rollup-plugin-unused-imports';
export default {
// ...
plugins: [
rollupPluginUnusedImports(),
],
};
- Rollup を実行する。
rollup
Terser の --unused オプションを使う
Terser は、JavaScript コードを圧縮するツールです。--unused オプションを指定すると、使用されていないコードが自動的に削除されます。
- Terser をインストールする。
- 以下のコマンドを実行する。
terser --unused input.js -o output.js
angular visual-studio-code
