Автоматичний імпорт коду Visual Studio

Я переходжу від Webstorm до Visual Studio Code. Виступ у Webstorm є жахливим.

Код Visual Studio не надто допомагає знайти залежності, які мені потрібні, та імпортувати їх. До цього часу я робив це вручну, але, чесно кажучи, я волів би зачекати 15 секунд, поки webstorm знайде та додасть мій імпорт, який для цього потрібно копати вручну.

Я використовую насіння angular2 від @ minko-gechev https://github.com/mgechev/angular2-seed

У моєму baseDir є tsconfig.json, який виглядає так:

    {
  "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 використовує завдання збірки ковтка машинопису, тому я думаю, компіляція відрізняється.

Що я можу зробити, щоб vscode був більш корисним ??

2018 рік. Вам не потрібні ніякі розширення для авто-імпорту в Javascript ( до тих пір , поки у вас є checkjs: trueу вашому jsconfig.jsonфайлі) та машинопис.

Існує два типи автоматичного імпорту: додавання відсутнього імпорту швидке виправлення яке відображається як лампочка щодо помилок:

І автоматичного імпорту . Вони відображають елементи пропозицій під час введення тексту. Прийняття пропозиції автоматичного імпорту автоматично додає імпорт у верхню частину файлу

Обидва мають працювати нестандартно з JavaScript та TypeScript. Якщо автоматичний імпорт все ще не працює для вас, відкрийте проблему

Я отримав це, встановивши різні плагіни нижче.

Здебільшого речі просто імпортуються самі по собі, як тільки я вводжу назву класу. Крім того, з’являється лампочка, на яку ви можете натиснути. Або ви можете натиснути F1і набрати "імпортувати ...", і там також є різні варіанти. Я якось використовую їх усі. Також F1реалізація для реалізації інтерфейсу корисна, але не завжди працює.

Список плагінів

• нпм Intellisense
• ngrx для фрагментів Angular 2
• Набір інструментів TypeScript
• нм
• TsTools
• Кутові фрагменти (версія 9)
• Типи автоматичного інсталятора
• Налагоджувач для Chrome
• Імпортер TypeScript
• Герой TypeScript
• vscode-іконки
• Додайте кутові файли

Знімок екрана розширень

^{* клацніть для повного дозволу}

Я використовував плагін Auto Import від steoates, що досить просто.

Автоматично знаходить, аналізує та забезпечує дії коду та заповнення коду для всіх доступних імпортів. Працює з Typescript та TSX.

У tsconfig.app.json стандартна програма Angular 10 містить:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Після того, як я змінив включення, подобається бути:

  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts"
  ]

У мене це спрацювало

Якщо хтось зіткнувся з цією проблемою нещодавно, я виявив, що мені довелося додати налаштування, щоб використовувати версію TypeScript для мого робочого простору для роботи автоматичного імпорту. Для цього додайте цей рядок до налаштувань робочої області :

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

Потім, відкривши файл vscript у vscode, клацніть на версії машинопису в нижньому правому куті. Коли з’являться опції вгорі, виберіть «використовувати версію робочої області», а потім перезавантажте vscode .

Тепер автоімпорт повинен запрацювати.

VS Code зараз це підтримує нестандартно, але, здається, ця функція іноді працює, а іноді ні. Наскільки я міг з'ясувати, VS Code повинен завантажувати дані, необхідні для автоматичного імпорту, що відбувається більш-менш так:

• Завантажте дані для всього експорту з локальних файлів
• Завантажте дані для всього експорту з типів node_modules / @
• Завантажте дані для всього експорту з node_modules / {packageName}, лише якщо будь-який із ваших локальних файлів їх імпортує

Це краще описано в цьому коментарі: https://github.com/microsoft/TypeScript/issues/31763#issuecomment-537226190 .

Через помилки або у VS Code, або в деклараціях типу конкретних пакетів, останні два пункти не завжди працюють. Це був мій випадок, я не бачив автоматичного імпорту реакції-завантаження в простому додатку Create-React-App. Нарешті це виправлено вручну, скопіювавши папку пакета з node_modules у node_modules / @ типи і залишивши там лише файли оголошень типу, наприклад Button.d.ts. Це не чудово, тому що якщо ви коли-небудь видалите папку node_modules, вона знову перестане працювати. Але я віддаю перевагу цьому, ніж завжди потрібно вручну вводити імпорт. Це була моя остання інстанція після спроб і невдач із цими методами:

• Оновити код VS (v. 1.45.1)
• Встановіть типи для вашого пакету, наприклад npm install --save @types/react-bootstrap
• Додайте файл jsconfig.json і пограйте з налаштуваннями, як пропонували інші люди
• Спробуйте всі плагіни для автоматичного імпорту

Сподіваюся, це комусь допоможе!

Якщо ви використовуєте angular, переконайтесь, що tsconfig.jsonпомилка не містить помилок. (у терміналі проблем)

Я чомусь подвоїв ці рядки, і у мене це не спрацювало

{
  "module": "esnext",
  "moduleResolution": "node",
}

Я зіткнувся з цією проблемою у Typescript версії 3.8.3.

Intellisense - найкраще, що ми могли мати, але для мене, здається, функція автоматичного імпорту теж не працює. Я спробував встановити розширення, хоча автоматичний імпорт не працював. Я перевірив усі налаштування, пов’язані з розширеннями. Нарешті, функція автоматичного імпорту запрацювала, коли я очистив кеш з

C: \ Users \ ім'я користувача \ AppData \ Roaming \ Code \ Cache

& перезавантажте VSCode

Примітка: AppData можуть бути видимими в імені користувача, лише якщо ви виберете "Показати (приховані елементи)" у меню ("Перегляд").

У деяких випадках ми можемо в кінцевому підсумку думати, що існує помилка, пов’язана з імпортом, тоді як насправді, несвідомо, ми можемо кодувати, використовуючи застарілі функції або API в angular.

Наприклад: якщо ви намагаєтесь закодувати щось подібне

конструктор (http: Http) {

// ...}

Де Http вже застарілий і замінений на HttpClient в новішій версії, тому ми можемо в кінцевому підсумку думати, що помилка, пов’язана з цим, може бути пов’язана з помилкою автоматичного імпорту. Для отримання додаткової інформації ви можете звернутися до застарілих API та функцій

Імпортер машинопису робить цю роботу за мене

https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter

Він автоматично шукає визначення машинопису у вашій робочій області, і коли ви натискаєте клавішу Enter, він імпортує його.

Заповніть includeвластивість на першому рівні JSON-об’єкта приблизно tsconfig.editor.jsonтак:

"include": [
  "src/**/*.ts"
]

У мене це добре працює.

Також ви можете додати ще одне розширення файлу Typescript, якщо це потрібно, як тут:

"include": [
  "src/**/*.ts",
  "src/**/*.spec.ts",
  "src/**/*.d.ts"
]

Виникла проблема з кодом Visual Studio, яку ви можете відстежувати та оцінювати непогано для цієї функції. Також виникла проблема з голосом користувача , але я вважаю, що вони перенесли голосування до питань GitHub.

Здається, вони хочуть функцію автоматичного імпорту в TypeScript, тому її можна використовувати повторно. Проблема автоматичного імпорту TypeScript для відстеження та великих пальців тут .

Я використовую плагін 'ImportJS' від Devin Abbott для автоматичного імпорту, і ви можете встановити його, використовуючи код нижче

npm install --global import-js