Есть ли способ удалить неиспользуемый импорт и объявления из Angular 2+?

139

Мне поручено взять какой-то испорченный код от других разработчиков, которые недавно уже покинули компанию.

Я с любопытством спрашиваю, есть ли какой-нибудь подключаемый модуль Visual Studio Code или другие средства, которые могут помочь нам быстро и эффективно привести в порядок и организовать импорт и ссылки?

Например, таких импортов может быть сотни.

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

можно преобразовать в аналогично

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

Или другие функции, такие как автоматическое удаление неиспользуемых импортов и объявлений из app.module или из всех компонентов всего проекта?

Спасибо за любые отзывы!

SKE
источник
Мне тоже интересно, не снижает ли производительность посторонний импорт в компоненты.
Марцидиус
8
stackoverflow.com/a/49697144/3914072 vscode 1.22 Shift + Alt + O - у меня работает!
Раджаб Шакиров
Это также можно сделать из командной строки (или git-хука): npmjs.com/package/organize-imports-cli
thorn̈

Ответы:

169

Редактировать (как было предложено в комментариях и другими людьми), Visual Studio Code эволюционировал и предоставляет эту встроенную функцию в виде команды «Организовать импорт» со следующими сочетаниями клавиш по умолчанию :

option+ Shift+ Oдля Mac

Alt + Shift + Oдля Windows


Оригинальный ответ:

Я надеюсь, что этого расширения кода Visual Studio будет достаточно: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

Он предоставляет следующие возможности:

  • Добавить импорт вашего проекта или библиотек в текущий файл
  • Добавить импорт для текущего имени под курсором
  • Добавить все недостающие импорты файла одной командой
  • Intellisense предлагает символы и автоматически добавляет необходимый импорт "Функция лампочки", исправляющий написанный вами код.
  • Сортируйте и систематизируйте импорт (отсортируйте и удалите неиспользуемые )
  • Схема кода вашего открытого документа TS / TSX
  • А также все крутые штуки для JavaScript! (хотя экспериментальная стадия, подробное описание ниже.)

Для Mac: control+ option+o

Для победы: Ctrl+ Alt+o

Мухаммад Рехан Кадри
источник
1
Спасибо, что включили меня в это дополнение, оно потрясающе! До тех пор, пока я не установил его, у меня было установлено расширение Auto-Import, чтобы позаботиться об этой маленькой функциональности (автоматический импорт). Но после установки TypeScript Hero ... вау, он делает все, что мне нужно, включая сортировку зависимостей в алфавитном порядке внутри самих операторов импорта, избавление от импорта, который не используется в классах компонентов, и т. Д.!
Марцидиус
2
В 2018 году сопровождающий проекта TS Hero заявил, что прекратит поддержку расширения, поскольку оно устарело после реализации основных функций непосредственно в VS Code (см. Другие комментарии).
mattarau
2
Есть ли способ позвонить Alt+Shift+Oбез изменения порядка импорта?
XCS
Alt + Shift + O тоже для Linux
manuman94
155

Начиная с Visual Studio Code Release 1.22, это бесплатно без необходимости расширения.

Shift+ Alt+O позаботится о вас.

Аарон Джордан
источник
1
Ницца! Я использую ctrl + shift + - всегда, и теперь я могу найти и изменить ярлык.
GeorgiG
Мне пришлось установить его, не вошел в мою установку 1.37.1
старый монах
57

Если вы активный пользователь Visual Studio, вы можете просто открыть настройки своих предпочтений и добавить в файл settings.json следующее:

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

Надеюсь, это может быть полезно!

JayKan
источник
3
Кажется, это противоречит плагину ESLint Prettier. Он пытается выполнить однострочный импорт, но ESLint пытается разбить на несколько строк.
Ричард
Та же проблема, что и у @Richard. Кажется, это нерешенная проблема - github.com/prettier/prettier-vscode/issues/716
Крейг
Есть ли способ отключить удаление неиспользуемого импорта при сохранении сортировки импорта?
sunknudsen
отличный ответ. искал это целую вечность
Амир Африди
41

Чтобы иметь возможность обнаруживать неиспользуемый импорт, код или переменные, убедитесь, что у вас есть эти параметры в файле tsconfig.json

"compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true
}

установите компилятор машинописного текста, если не установите его с помощью:

npm install -g typescript

и tslint расширение установлен в Vcode, это работает для меня, но после включения я замечаю увеличение количества использования центрального процессора, особенно на больших проектах.

Я бы также порекомендовал использовать расширение героя машинописного текста для организации вашего импорта.

Матеус Фрик
источник
41

Начиная с VSCode v.1.24 и TypeScript v.2.9:

Для Mac: option+ Shift+O

Для победы: Alt+ Shift+O

Kenny
источник
7
для некоторых важнее команда Organize Importsoreditor.action.organizeImports
pcnate
@pcnate Есть ли способ отключить удаление неиспользуемого импорта при сохранении сортировки импорта?
sunknudsen
11

В этой теме уже столько хороших ответов! Я собираюсь опубликовать это, чтобы помочь всем, кто пытается сделать это автоматически ! Эта статья мне очень помогла, чтобы автоматически удалить неиспользуемый импорт для всего проекта .

В статье автор объясняет это так:

Создайте автономный файл tslint, содержащий следующее:

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

Затем выполните следующую команду, чтобы исправить импорт:

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

Попробуйте исправить любые другие ошибки, которые он выдает. (Я сделал)

Затем проверьте работу проекта, собрав его:

ng build

или

ng build name_of_project --configuration=production 

Конец: Если он построен правильно, вы успешно удалили импорт автоматически!

ПРИМЕЧАНИЕ. Это удаляет только ненужный импорт. Он не предоставляет других функций, которые делает VS Code при использовании одной из ранее упомянутых команд.

Мэтт Бассинг
источник
Понятно Could not find implementations for the following rules specified in the configuration: no-unused-declaration , значит, это решение больше не работает.
Юсуф Хан
Я использую версию tslint5.20.1
Юсуф Хан
0

перейдите к себе tslint.jsonи измените стоимость собственности no-unused-variableнаfalse

Мохамед Али РАЧИД
источник
3
Это полная противоположность тому, о чем спрашивал ОП. Он / она хочет НЕ иметь неиспользуемых переменных, поэтому это no-unused-variableдолжно быть правдой. Был задан вопрос, можно ли исправить (удаление неиспользуемых переменных) автоматически, на что уже был дан ответ.
mattarau