Автоматический импорт кода Visual Studio

Я делаю переход от Webstorm к Visual Studio Code. Производительность в Webstorm ужасна.

Код Visual Studio не очень помогает найти нужные мне зависимости и импортировать их. Я делаю это вручную до сих пор, но, честно говоря, я предпочел бы ждать 15 секунд, чтобы webstorm смог найти и добавить мой импорт, который придется копать вручную для него.

Я использую семя angular2 из @minko-gechev https://github.com/mgechev/angular2-seed

У меня есть tsconfig.json в моем baseDir, который выглядит так:

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "dist",
    "typings/index.d.ts",
    "typings/modules",
    "src"
  ],
  "compileOnSave": false
}

и у меня есть еще один в моем директории src/client, который выглядит так:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true
  }
}

Я не знаю, почему их два. В проекте angualr seed используются задачи typescript gulp, поэтому я думаю, что компиляция отличается.

Что я могу сделать, чтобы vscode стал более полезным?

Ответ 1

Я получил эту работу, установив различные плагины. Вот скриншот моего списка расширений. В большинстве случаев вещи просто импортируются сами по себе, как только я набираю имя класса. В качестве альтернативы появляется лампочка, которую вы можете щелкнуть. Или вы можете нажать F1 и ввести "import...", и там есть различные варианты. Я использую их все. Кроме того, F1 Implement для реализации интерфейса полезен, но не всегда работает.

Ответ 2

2018 сейчас. Вам не нужно никаких расширений для автоматического импорта в Javascript и TypeScript.

Существует два типа автоматического импорта: быстрое исправление добавления отсутствующего импорта quick fix, которое отображается в виде лампочки при ошибках:

И предложения автоматического импорта. Они показывают элементы предложения при вводе. Принятие предложения автоматического импорта автоматически добавляет импорт в верхней части файла

Оба должны работать из коробки с JavaScript и TypeScript. Если автоматический импорт по-прежнему не работает, откройте вопрос

Ответ 3

Я использовал плагин Auto Import, который довольно прост.

Автоматически находит, анализирует и предоставляет код действия и код завершение для всего доступного импорта. Работает с Typescript и TSX.

Вы можете увидеть, как это работает на: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

Ответ 4

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

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

Затем, открыв файл машинописи в vscode, нажмите номер версии машинописи в правом нижнем углу. Когда появятся параметры вверху, выберите "Использовать версию рабочей области", а затем перезагрузите vscode.

Теперь авто-импорт должен работать.

Ответ 5

Существует проблема с Visual Studio Code, которую вы можете отслеживать и делать пальцами для этой функции. Была также проблема с голосовым сообщением, но я считаю, что они перешли на голосование на вопросы GitHub.

Кажется, им нужны функции автоматического импорта в TypeScript, поэтому его можно использовать повторно. TypeScript проблема автоматического импорта, чтобы отслеживать и видеть здесь.

Ответ 6

Взгляните на это первое ДОЛЖНО ИМЕТЬ ДОПОЛНИТЕЛЬНО и установите расширения, которые вам могут понадобиться. И тогда, следующее работает для меня просто отлично.

{
    "compilerOptions": {
        "target": "es5",
        "allowSyntheticDefaultImports": true
    }
}

Ответ 7

Если вы используете angular, убедитесь, что tsconfig.json не содержит ошибок. (в терминале проблем)

По какой-то причине я удвоил эти строки, и у меня это не сработало

"модуль": "esnext", "moduleResolution": "узел",