Автоматическая сортировка import в visual studio code

Обновлено: 05.07.2024

VSCode + JSDoc совершенная (почти) подсказка кода JavaScript

Функция хинтинга кода для слабо типизированного скриптового языка всегда была скрытой проблемой для разработчиков: без нее невозможно работать, но она часто стоит бесстрашного времени из-за неправильного написания или непреднамеренного изменения переменных, которые вызывают бесстрашное время. местный. Появление VSCode имеет тенденцию унифицировать область облегченной IDE.В своей новой версии он поставляется с функцией синтаксического анализа JSDoc, которая помогает разработчикам JavaScript предоставлять необходимую информацию в IDE путем написания комментариев и улучшения функции подсказки.

Давайте сначала рассмотрим простой пример (код внешнего интерфейса апплета WeChat)

Можно видеть, что в определении функции есть параметр o объекта типа и обратный вызов параметра обратного вызова типа функции. Однако IDE не может знать из определения кода только, какие поля должны быть включены в объект o и какие параметры будут возвращены в функцию обратного вызова. Для слабо типизированных языков сценариев, таких как JavaScript, эта информация не имеет смысла до этапа выполнения, а для разработчиков эту информацию легко забыть через некоторое время, не говоря уже о передаче третьим лицам. Таким образом, эта информация должна быть записана в JSDoc.

Можно видеть, что тип параметра o и его необходимая внутренняя структура с помощью JSDoc, обратный вызов параметра типа функции вернут тип параметра Error и тип возвращаемого значения void, а другая информация будет четко и ясно отмечена при сопровождении текстовых комментариев. ,

В это время напрямую используйте new CommonUtilsWX() Вызов построенного объекта request() Метод может увидеть следующий экран подсказки

А потом request() Когда функция передается в буквальный объект, вы увидите следующий экран приглашения

Ниже приведен второй пример: определите объект и передайте информацию о типе JSDoc полям в объекте.

В добавок к этому @type В дополнение к ключевым словам, он также используется в <> в" | «Символ. Такое использование означает, что помеченное поле может быть нескольких типов, особенно для ситуации в моем коде, то есть метод фабрики может возвращать любой объект подкласса, принадлежащий родительскому классу, это Если для пометки этого поля используется только родительский тип, среда IDE не может запросить специальный метод в подклассе при его использовании, поэтому после использования нескольких возможных меток типов среда IDE запросит все возможные типы информации запроса Выйти. На данный момент информация выглядит следующим образом

Есть еще один способ определить тип и комментарий каждого поля в объекте, и его можно использовать повторно. @typedef Ключевые слова, используется следующее @typedef Переписанный zy Объект JSDoc:

Верхняя часть используется @typedef Ключевые слова определяют новый тип ZY И заранее определил каждое поле в типе. Затем используйте JSDoc над объектом zy в нижней половине, чтобы сказать, что тип этого объекта ZY , Это использование подходит для многократно используемых объектов типа, или когда все внутренние поля не отображаются буквально или не сосредоточены в регионе.

Ниже показана другая проблема: VSCode импортирует JSDoc в другие файлы в соответствии с зависимостью файлового модуля, например A.js. require("B.js") , Информация JSDoc в B.js может использоваться в JSDoc для A.js, а также может отображаться в подсказке кода A.js. Но иногда бывают ситуации, которые логически не нужны в A.js
require("B.js") , Но в кодировании вам нужно использовать JSDoc в файле B.js. Если из-за этого спроса, дополнительные require("B.js") , Это разрушит нормальные зависимости кода. Так что есть следующее использование:

Этот метод эквивалентен файлу B.js, представленному JSDoc, а модуль в B.js определен как тип B.

Наконец, два звуковых сигнала, впервые появившиеся в техническом кругу за пять или шесть лет, также были затронуты многими старшими блоггерами. С одной стороны, ведение блога - это обмен собственным техническим опытом, получение большего в процессе обмена и улучшение Умение выразить себя в письменной форме. Но для входа в яму всегда нужно входить шаг за шагом, поэтому начните с дополнительных червей.

Перевод статьи «How to set up VSCode to improve your productivity».

С течением времени редакторы кода существенно улучшились. Еще несколько лет назад Visual Studio Code (VS Code) вообще не существовало. Вы, вероятно, пользовались Sublime Text, Atom, Bracket и т. п. Но теперь VS Code стал любимым редактором большинства разработчиков.

Почему VS Code?

Любви разработчиков к этому редактору способствуют (среди прочих) такие его особенности:

Настраиваемость
Легкость отладки
Emmet
Расширения
Интеграция Git
Встроенный терминал
Intellisense

Теперь, когда вы знаете о преимуществах использования VS Code, давайте рассмотрим, как его настроить и какие расширения установить, чтобы использовать этот редактор максимально эффективно. (Примечание редакции: в статье приводятся советы для macOS, но многие из них универсальны. Для вызова палитры команд вместо CMD + SHIFT + P можно использовать CTRL + SHIFT + P).

Терминал

Вы можете настроить ваш терминал для использования iTerm2 и Zsh, а затем сделать так, чтобы встроенный терминал в VS Code использовал эти настройки.

После конфигурации Zsh (для основного терминала) запустите встроенный в VS Code терминал Terminal > New Terminal и введите команду

чтобы выполнить содержимое файла конфигурации .zshrc в оболочке.

Шрифт

Благодаря поддержке лигатур хорошо смотрится FiraCode. Скачайте и установите этот шрифт, а затем добавьте его в ваш файл settings.json. (Примечание редакции: для доступа к файлу выберите в палитре команд Open Settings (JSON)).

[code]"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,[/code]

Запуск из командной строки

Хорошо бы иметь возможность запускать VS Code из терминала. Для этого нажмите CMD + SHIFT + P, введите shell command и выберите Install code command in path. После чего перейдите в любой проект из терминала и, находясь в выбранной директории, введите «code .», чтобы запустить проект с помощью VS Code.

Конфигурация

Конфигурация VS Code не зависит от рабочего окружения и содержится в файле settings.json. Вы можете внести изменения в этот файл, чтобы ваш VS Code больше соответствовал вашим предпочтениям.

Скопируйте и вставьте этот код в файл settings.json:

[code] "editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": true,
"editor.wordWrap": "bounded",
"editor.trimAutoWhitespace": true,
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.formatOnSave": true,
"files.autoSave": "onFocusChange",
"emmet.syntaxProfiles": "javascript": "jsx"
>,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact"
],
"javascript.validate.enable": true,
"git.enableSmartCommit": true,
"files.trimTrailingWhitespace": true,
"editor.tabSize": 2,
"gitlens.historyExplorer.enabled": true,
"diffEditor.ignoreTrimWhitespace": false,
"workbench.sideBar.location": "right",
"explorer.confirmDelete": false,
"javascript.updateImportsOnFileMove.enabled": "always",
>[/code]

Расширения

Ниже представлены полезные расширения, которые могут сделать более удобной вашу работу с кодовой базой.

Чтобы найти эти расширения,

Перейдите View -> Extensions
Найдите нужное расширение
Кликните «Install».

1. Auto Import

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

2. Add jsdoc comments

Это расширение добавляет блок комментариев к коду. Чтобы его использовать, выделите первую строку функции, нажмите CMD + SHIFT + P и выберите Add Doc Comments.

3. ESDoc MDN

В некоторых ситуациях у нас бывает тенденция забывать, как работают те или иные вещи. Здесь нам и пригодится расширение ESDoc MDN. С ним вам не придется запускать браузер, чтобы найти правильный синтаксис. Все, что нужно, это набрать

4. CSS Peek

Как следует из названия (peek – «заглянуть»), это расширение помогает вам просмотреть правила, задействованные при применении определенного стиля в кодовой базе. Это бывает удобно при работе с legacy-кодом.

5. GitLens

GitLens повышает эффективность работы с Git. С помощью этого расширения вы сможете делать гораздо больше всего, например, без труда исследовать репозитории Git, просматривать внесенные исправления, информацию об авторстве и т. д.

6. ESLint

Это расширение интегрирует ESLint в VS Code, благодаря чему вы сможете приводить свой код в соответствие со стандартами. Чтобы воспользоваться возможностями этого расширения для работы над проектом, нужно установить ESLint локально или глобально.

Для локальной установки запустите

[code]npm install eslint[/code]

а для глобальной –

[code]npm install -g eslint[/code]

Вам также понадобится создать конфигурационный файл .eslintrc. Если вы установили ESLint локально, запустите

– в случае глобальной инсталляции.

7. Debugger for Chrome

С его помощью вы сможете осуществлять отладку вашего JavaScript-кода прямо из браузера Google Chrome.

8. Google Fonts

С помощью этого расширения облегчается установка шрифтов Google. Больше не придется искать их в браузере. Чтобы получить список шрифтов, нажмите CMD + SHIFT + P и поищите Google fonts.

9. TODO Highlight

Когда вам нужно проделать много всего, и каждая задача имеет свой приоритет, легко забыть, что еще не сделано. TODO highlight подсвечивает задачи, так что вы сможете легко их увидеть.

10. Docker

Благодаря этому расширению вы сможете на лету создавать Dockerfiles. Также предоставляется подсветка синтаксиса, intellisense и многое другое.

Нажмите CMD + SHIFT + P и поищите Add Docker files to workspace.

11. Code Spellchecker

Это расширение позволяет с легкостью находить опечатки в коде.

12. Import Cost

Import Cost показывает, как импортируемые пакеты влияют на код. Это позволяет оценивать проблемы с производительностью.

13. HTMLHint

Это расширение проверяет ваш HTML, помогая вам писать код, совместимый со стандартами.

14. Peacock

Это расширение дает вам возможность изменять цвет вашего рабочего пространства. Идеально для случаев, когда у вас несколько экземпляров VS Code и вы хотите быстро определять нужный.

После установки Peacock кликните на иконке настроек > settings, выберите вкладку настроек рабочего пространства, кликните на <> и вставьте следующий код:

Также можно добавить titleBar и statusBar в affectedElements и настрйоки цвета для них в разделе colorCustomizations.

Чтобы использовать один из дефолтных цветов, нажмите CMD + SHIFT + P, введите peacock и выберите тему по своему вкусу. Это перезапишет настройки цвета в файле settings.json для данного рабочего пространства.

15. Prettier

При написании кода все время приходится набирать пробелы или табы? На помощь вам придет Prettier. Это расширение форматирует строки кода и делает код читаемым.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также: