Visual studio code как включить автозаполнение

Обновлено: 07.07.2024

Есть ли способ использовать компоненты или HTML-код в Visual Studio Code? Поскольку ввод каждой буквы вручную не является хорошей идеей, когда у нас есть классы, такие как Bootstrap и т.д. Например, завершение как в Emmet: ul>li*2>a

Я пошел бросить все ответы, и этот конфиг работал для меня. пришлось включить язык, а также добавить синтаксисProfile. без расширения триггера ничего не получалось, но теперь я нажимаю только клавишу Tab, чтобы получить результат.

ответил(а) 2019-03-01T14:05:00+03:00 2 года, 8 месяцев назад

2018: прямой ответ на React

Самый простой способ получить автозаполнение JSX/HTML в ваших проектах React - добавить его в свои пользовательские настройки или настройки рабочего пространства ( <project-path>/.vscode/settings.json ):

Возможно, вам придется перезапустить VS Code, чтобы изменения вступили в силу.

PS Если вы не делаете это отображение для проекта React.js, то ответ KehkashanFazal, вероятно, должен работать для вас.

ответил(а) 2017-12-07T04:58:00+03:00 3 года, 11 месяцев назад

Код Visual Studio обнаруживает расширения .jsx и добавляет поддержку emmet по умолчанию (я использую VS code 1.8.1)

Но если вы предпочитаете использовать расширение .js для всех ваших реагирующих файлов - вы можете связать режим JavaScript React с файлами .js в правом нижнем углу окна VS Code.

ответил(а) 2017-01-29T15:37:00+03:00 4 года, 9 месяцев назад

Если кто-то все еще борется с этой проблемой:

Я обнаружил, что просто установка

не позволяет завершить HTML. Но, используя:

"emmet.includeLanguages": <>

Включить аббревиатуры emmet на языках, которые по умолчанию не поддерживаются. Добавьте сопоставление между языком и поддерживаемым emmet языком.
Например:

Просто выберите соответствующий Режим языка в правом нижнем углу экрана: установите значение JavaScript React.

2018

Я использую VSCode (ver 1.27.2)

Основывайтесь на моем опыте, хотя я работаю с React . Обнаруженный язык в моем VSCode все еще ванильный JavaScript . И Эммет не работал.

Один из способов заставить его работать снова - изменить VSCode обнаружения VSCode на JavaScript React . Это только для одного файла JS .

Чтобы полностью изменить его, вам нужно связать его.

Нажмите Configure File Association for.js.

И выберите JSX , что в моем случае я уже сделал.

Для настройки рабочего места, и последний, если ни один из них не работает для вас. Перейдите в Предпочтение просто ctrl +, (comma) чтобы открыть его.

Тип и поиск emmet или Emmet . Затем скопируйте настройку, которую вы хотите переопределить. В моем случае:

Примечание: я не пытался использовать jsx только javascriptreact .

Я реализовал второй и третий шаг. И теперь я могу сделать Emmet .

Автоматическое закрытие тегов в .html,.js и .jsx

Работает из коробки. То есть после ввода закрывающей скобки для открывающего тега закрывающий тег будет вставлен автоматически.

Emmet с базовым HTML в .jsx файлах

Работает из коробки.

Emmet с базовым HTML в файлах .js:

Добавьте следующий параметр, необходимый для предложений сокращения Emmet и необходимый для последовательной работы расширения вкладок.

Emmet с пользовательскими тегами (например, React Components) в файлах .js и .jsx

Добавьте следующий параметр:

Обратите внимание, что с этим параметром Emmet будет расширять все слова как пользовательские теги (а не только имена компонентов React).

Также обратите внимание, что при использовании Emmet для расширения компонентов React в качестве пользовательских тегов необходимо фактически выбрать имя компонента из списка предложений и сначала заполнить его (или вручную ввести полное имя и закрыть меню предложений с помощью клавиши escape). После того, как слово развернется, вам придется снова перейти на вкладку, чтобы Эммет развернул пользовательский тег.

Есть запрос активной функции, чтобы потенциально удалить этот дополнительный шаг (автоматически расширяется при выборе предложения, чтобы он работал так же, как и при расширении стандартных тегов html).

ОТВЕТЫ

Ответ 1

Код Visual Studio обнаруживает расширения .jsx и добавляет поддержку emmet по умолчанию (я использую VS code 1.8.1)

Ответ 2

2019: прямой ответ на React

Возможно, вам придется перезапустить VS Code, чтобы изменения вступили в силу.

PS Если вы не делаете это отображение для проекта React.js, то ответ KehkashanFazal, вероятно, должен работать для вас.

Ответ 3

Если кто-то все еще борется с этой проблемой:

Я обнаружил, что просто установка

не позволяет завершить HTML. Но, используя:

"emmet.includeLanguages": <>

Включить аббревиатуры emmet на языках, которые по умолчанию не поддерживаются. Добавьте сопоставление между языком и поддерживаемым emmet языком.
Например:

Ответ 4

Просто выберите соответствующий Режим языка в правом нижнем углу экрана: установите значение JavaScript React.

Ответ 5

Ответ 6

2018

Я использую VSCode (ver 1.27.2)

Один из способов заставить его работать снова - изменить VSCode обнаружения VSCode на JavaScript React . Это только для одного файла JS .

Чтобы полностью изменить его, вам нужно связать его.

Нажмите Configure File Association for.js.

И выберите JSX , что в моем случае я уже сделал.

Для настройки рабочего места, и последний, если ни один из них не работает для вас. Перейдите в Предпочтение просто ctrl +, (comma) чтобы открыть его.

Тип и поиск emmet или Emmet . Затем скопируйте настройку, которую вы хотите переопределить. В моем случае:

Примечание: я не пытался использовать jsx только javascriptreact .

Я реализовал второй и третий шаг. И теперь я могу сделать Emmet .

Ответ 7

Автоматическое закрытие тегов в .html,.js и .jsx

Emmet с базовым HTML в .jsx файлах

Работает из коробки.

Emmet с базовым HTML в файлах .js:

Emmet с пользовательскими тегами (например, React Components) в файлах .js и .jsx

Добавьте следующий параметр:

Поиск проблемы

Убедитесь, что у вас последняя версия VSCode.

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

Ответ 8

Вы можете использовать расширение Auto Close в коде Visual Studio. пс. Когда вы устанавливаете расширение, автозаполнение не будет работать до тех пор, пока вы не перезагрузите VS Code, просто заново откроете VS Code или перейдете к автоматическому закрытию расширения тега и нажмете "Перезагрузить".

Ответ 9

Я решил проблему, просто выполнив следующие действия:

В левом нижнем углу VSCode нажмите на Javascript
Затем в верхней части вы увидите список, нажмите "Настроить настройки на основе языка" Javascript ""

Добавьте эти строки в файл:

Если вы хотите более подробную информацию, вы можете проверить эту ссылку.

Ответ 10

Мне потребовалось два шага, чтобы получить автоматически закрывающиеся теги в JSX.

Следуйте инструкциям Kehkashan Fazal выше по настройке "emmet.includeLanguages"
Загрузите расширение Auto Close Tag из VSCode ( formulahendry.auto-close-tag )

И теперь у вас есть хорошие автоматически закрывающиеся теги JSX!

Ответ 11

Выполните только эти два шага:

В нижней части VSCode, где определяется язык, нажмите на это.

Нажмите "Настроить языковые настройки на основе Javascript (Babel). " или что-либо еще

сначала вставьте этот код отдельно через запятую ',' и сохраните его.

"emmet.includeLanguages": < "javascript": "javascriptreact" >, "emmet.triggerExpansionOnTab": true

Ответ 12

Ответ 13

Автозаполнение для React Babel работало нормально до вчерашнего дня для меня.

Ответ 14

Работают только в файлах JSX. Пусть это не работает с JS.

Ответ 15

Я работал над различными проектами, и у меня есть большой файл настроек.

Я проверил настройки и обнаружил, что эти настройки разрушают все.

Я прокомментировал это. И все прекрасно работает в приложениях React. Спасибо

Фронтенд-разработчик, UX/UI-дизайнер Савио Мартин опубликовал в блоге на dev.to 34 расширения Visual Studio Code (VS Code) для повышения продуктивности.

1. Auto Rename Tag. Автоматически переименовывает парный тег «HTML/XML» так же, как Visual Studio IDE.

2. Better Comments. Помогает создавать в коде более понятные комментарии. Расширение позволяет разбивать аннотации на следующие категории:

Оповещения;
Запросы;
TODO-комментарии;
События.

3. Bootstrap 4, Font Awesome 4, Font Awesome 5 Free & Pro Snippets. Плагин кода Visual Studio, содержащий фрагменты кода Bootstrap 4, Font Awesome 4, Font Awesome 5 Free и Pro Snippets. Плагин работает как в стабильной, так и в инсайдерской сборке.

4. Bracket Pair Colorizer 2. Позволяет идентифицировать совпадающие скобки по цвету. Пользователь может определить, какие токены должны соответствовать и какие цвета использовать.

5. change-case. Позволяет быстро изменить регистр текущего выделенного текста или слова.

6. Code Runner. Запускает фрагмент или файл кода для нескольких языков (полный список доступен здесь ) и пользовательские команды.

7. Code Spell Checker. Цель расширения — проверка распространенных ошибок и уменьшение количества ложных срабатываний. Хорошо работает со стилем написания составных слов CamelCase (верблюжий регистр).

8. CSS Peek. Разрешает просмотр идентификаторов CSS и строк классов как определений из HTML-файлов в соответствующий CSS-файл. Позволяет просматривать и переходить к определению.

9. Debugger for Chrome. Расширение для отладки JavaScript-кода в браузере Google Chrome или других задач, поддерживающих протокол Chrome DevTools Protocol .

10. EJS language support. Подсветка синтаксиса для тегов EJS, JavaScript и HTML. Включает автозаполнение javascript.

11. ES7 React/Redux/GraphQL/React-Native snippets. Расширение для React, Redux и GraphQL в JavaScript/TypeScript с синтаксисом ES7 и функциями плагина Babel для VS Code.

12. GitHub Pull Request and Issue. Позволяет просматривать и управлять запросами на вытягивание GitHub и проблемами в Visual Studio Code.

13. GitLens — Git supercharged. Расширяет возможности Git, встроенные в VS Code. Среди функций:

Визуализация авторства кода с помощью аннотаций Git;
Плавное перемещение и исследование репозитория Git;
Получение необходимой информации с помощью команд сравнения.

14. Google Fonts. Расширение позволяет просматривать список шрифтов Google и вставлять их в HTML или CSS код.

15. Image Preview. Расширение для предварительного просмотр изображений при наведении курсора.

16. GraphQL. Добавляет подсветку синтаксиса, его проверку и языковые функции, такие как:

Переход к определению;
Просмотр информации о наведении и автозаполнение для проектов graphql ;
Работа с запросами, помеченными тегом gql .

17. vscode-styled-components. Подсветка синтаксиса и IntelliSense для стилизованных компонентов . Использует грамматику CSS, построенную на основе language-sass и language-css .

18. Prettify JSON. Расширение Prettify JSON для Visual Studio Code.

19. Import Cost. Позволяет отображать в редакторе размер импортированного пакета. Для этого расширение использует webpack и babili-webpack-plugin .

20. IntelliSense для имен классов CSS в HTML. Обеспечивает завершение имени класса CSS для атрибута HTML class на основе определений, найденных в рабочей области или внешних файлах, на которые ссылается элемент link .

21. JavaScript (ES6) code snippets. Расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора VS CODE. Поддерживает как JavaScript, так и TypeScript.

22. Live Server. Запускает локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц.

23. Live Share. Расширение для совместной разработки, редактирования и отладки в режиме реального времени. Позволяет мгновенно и безопасно делиться проектами. Разработчики, которые подключаются к сеансам, получают необходимые файлы по текущему проекту и могут начать работу без необходимости клонирования репозиториев или SDK.

24. Markdown Preview Enhanced. Расширение для тех, кто знаком с Markdown Preview Plus или RStudio Markdown . Имеет множество полезных функций, среди которых:

Автосинхронизация скролла;
Поддержка языка диаграмм PlantUML,
Экспорт PDF,
Создание презентация.

25. Mongo Snippets for Node-js. Расширение для проектов Node-js. Содержит:

Сниппеты для подключения к документоориентированной системе управления базами данных MongoDB и запросов;
Команду Palette Feature для настройки кода шаблона;
Предложения по доработке для моделей Mongoose Models.

26. npm. Поддерживает выполнение npm-скриптов, определенных в файле package.json , и проверку установленных модулей на соответствие зависимостям, определенным в package.json .

27. npm Intellisense. Плагин Visual Studio Code, который автоматически заполняет модули nmp в операторах импорта.

28. Placeholder Images. Расширение позволяет создавать и вставлять так называемые изображения-заполнители в HTML-код в VS Code с помощью сторонних сервисов, таких как Unsplash, placehold.it и LoremFlickr.

29. Polacode. Позволяет делать скриншоты кода с пользовательскими шрифтами и темами.

30. Prettier — Code formatter. Средство для форматирования кода. Нацелено на использование жестко заданных правил по оформлению программ. Обеспечивает согласованный стиль, анализируя код и повторно воспроизводя его с особыми правилами, которые принимают во внимание максимальную длину строки.

31. Tabnine Autocomplete. Помощник на основе искусственного интеллекта (ИИ). Помогает кодировать быстрее и уменьшить количество ошибок. Изучает общедоступный код и использует алгоритмы глубокого обучения ИИ.

32. Tailwind CSS IntelliSense. Расширяет возможности разработки Tailwind, предоставляя пользователям VS Code больше функций, например, автозаполнение, выделение синтаксиса и линтинг (процесс проверки исходного кода на программные и стилистические ошибки).

33. Luna Paint. Позволяет редактировать растровые изображения из VS Code.

34. Quokka.js. Инструмент повышения производительности разработчика для быстрого прототипирования JavaScript/TypeScript. Значения времени выполнения обновляются и отображаются в IDE-среде рядом с кодом по мере его ввода.

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

Узнайте, как реализовать функцию автозаполнения (упреждающий ввод поисковых запросов и показ предложений), срабатывающую, когда пользователь начинает вводить информацию в поле поиска. В этом руководстве мы покажем автоматически завершенные запросы и результаты предложений по отдельности, а затем вместе. Пользователю может быть достаточно ввести два или три символа, чтобы увидеть все доступные результаты.

В этом руководстве описано следующее:

Добавление предложений
Добавление выделения для предложений
Добавление автозаполнения
Объединение функций автозаполнения и предложений

Обзор

Это руководство добавляет функции автозаполнения и показа предложений в предыдущее руководство по добавлению разбиения на страницы в результаты поиска.

Готовую версию кода для этого руководства можно найти в следующем проекте:

Предварительные требования

Решение 2a-add-paging (GitHub). Это может быть ваш собственный проект, созданный в рамках предыдущего руководства, или копия с GitHub.

Добавление предложений

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

В файле index.cshtml измените значение @id инструкции TextBoxFor на azureautosuggest.

В конце этой инструкции после закрывающего </div> введите приведенный ниже скрипт. В этом скрипте используется мини-приложение Autocomplete из библиотеки с открытым кодом jQuery UI для представления раскрывающегося списка предлагаемых результатов.

Идентификатор "azureautosuggest" используется для подключения указанного выше скрипта к полю поиска. Параметру source мини-приложения присваивается Suggest. Этот метод вызывает API Suggest с двумя параметрами запроса — highlights и fuzzy. Этим параметрам в данном экземпляре присвоено значение false. Кроме того, для активации функции поиска нужно не менее двух символов.

Добавление ссылок на скрипты jQuery в представление

Чтобы получить доступ к библиотеке jQuery, замените код в разделе <head> файла представления на приведенный ниже код.

Так как мы вводим новую ссылку jQuery, также нужно удалить или закомментировать ссылку jQuery по умолчанию в файле _Layout.cshtml (в папке Views/Shared). Найдите указанные ниже строки и закомментируйте первую строку скрипта, как показано ниже. Это изменение позволяет избежать конфликта ссылок на jQuery.

Теперь можно использовать предопределенные функции jQuery мини-приложения Autocomplete.

Добавление действия Suggest в контроллер

Добавьте действие SuggestAsync в контроллер Home, например после действия PageAsync.

Параметр Size указывает количество результатов для возврата (если параметр не задан, значение по умолчанию равно 5). При создании индекса в индексе поиска указывается средство подбора. В примере индекса отелей от корпорации Майкрософт средству подбора задано имя "sg", и оно ищет предлагаемые совпадения исключительно в поле HotelName.

Нечеткое соответствие позволяет также включать в выходные данные "промахи" величиной до одного редакционного расстояния. Если для параметра highlights задано значение true, то в выходные данные добавляются полужирные метки HTML. В следующем разделе мы установим значение true для этих двух параметров.

Могут возникнуть некоторые синтаксические ошибки. Если они возникли, добавьте в начало файла две приведенные ниже инструкции using.

Запустите приложение. Вы видите список предложенных вариантов при вводе, например, "po"? Теперь попробуйте ввести "pa".

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

В скрипте представления задайте для параметра &fuzzy значение true и снова запустите приложение. Теперь введите "po". Обратите внимание: при поиске предполагается, что одна буква неправильная.

Подробные сведения о логике, используемой в поиске по нечетким соответствиям, приведены в статье о синтаксисе запросов Lucene в службе "Когнитивный поиск Azure".

Добавление выделения для предложений

Мы можем улучшить вид предложений для пользователя, задав для параметра highlights значение true. Но сначала необходимо добавить код в представление, чтобы отобразить текст полужирным шрифтом.

В представлении (index.cshtml) добавьте приведенный ниже скрипт после скрипта "azureautosuggest" , описанного выше.

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

Снова запустите приложение. В предложениях отобразится введенный текст, выделенный полужирным. Попробуйте ввести "pa".

Логика, используемая в приведенном выше скрипте выделения, не защищена от случайных ошибок. Если ввести термин, который отображается дважды в одном и том же имени, выделенные полужирным шрифтом результаты будут не совсем такими, как хотелось бы. Попробуйте ввести "mo".

Одним из вопросов, на которые должен ответить разработчик, является следующий: когда скрипт работает "достаточно хорошо", а когда нужно устранять его ошибки. В этом руководстве мы не будем больше касаться темы выделения. Но если оно неэффективно для ваших данных, рекомендуем найти более точный алгоритм. Дополнительные сведения см. в разделе Выделение совпадений.

Добавление автозаполнения

Другим вариантом, который немного отличается от предложений, является автозавершение вводимого запроса (иногда его еще называют "упреждающий ввод"). Здесь мы также начнем с простой реализации, прежде чем улучшать взаимодействие с пользователем.

Введите приведенный ниже скрипт в представление после предыдущих скриптов.

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

Добавьте действие AutocompleteAsync в контроллер Home, например после действия SuggestAsync.

Обратите внимание на то, что при автозаполнении используется та же функция средства подбора с именем "sg", что и для предложений (здесь мы пытаемся автоматически заполнить поле именем отеля).

Есть ряд настроек AutocompleteMode. Здесь мы используем OneTermWithContext. Описание дополнительных параметров см. в разделе об API автозавершения.

Запустите приложение. Обратите внимание на то, что варианты, которые отображаются в раскрывающемся списке, являются отдельными словами. Введите слова, начинающиеся с "re". Обратите внимание на то, что количество предлагаемых вариантов уменьшается по мере набора букв.

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

Объединение функций автозаполнения и предложений

Объединение функций автозаполнения и предложений является самой сложной задачей и, возможно, обеспечивает максимальное удобство для пользователя. Нам необходимо, чтобы по мере набора текста отображался лучший вариант автозавершения из Когнитивного поиска Azure. Кроме того, мы хотим увидеть несколько предложений в виде раскрывающегося списка.

Есть библиотеки с этим функционалом, которые чаще всего называются "встроенное автозаполнение" или имеют подобное название. Но мы собираемся реализовать эту функцию как собственную, чтобы вы могли изучить API-интерфейсы. Сначала мы поработаем над контроллером в этом примере.

Добавьте в контроллер действие, которое возвращает только один результат автозаполнения вместе с указанным количеством предложений. Назовем это действие AutoCompleteAndSuggestAsync. В контроллере Home добавьте указанное ниже действие после других новых действий.

В верхней части списка results отображается один вариант автозаполнения, а затем приведены остальные предложения.

В представлении мы сначала реализуем прием, чтобы светло-серое слово автозаполнения отображалось прямо под полужирным текстом, который вводит пользователь. Для этой цели в HTML предусмотрено относительное размещение. Измените инструкцию TextBoxFor (и окружающие ее инструкции <div>) на приведенные ниже. Обратите внимание на то, что второе поле поиска, обозначенное как underneath, находится прямо под полем обычного поиска, которое сдвинуто на 39 пикселей от своей позиции по умолчанию.

Обратите внимание на то, что мы снова изменяем идентификатор: в этом примере на azureautocomplete.

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

Обратите на использование функции interval. Она позволяет удалять основной текст, когда он больше не соответствует введенному, а также задавать тот же регистр (верхний или нижний), что и в тексте, который вводит пользователь (так как во время поиска "pa" соответствует "PA", "pA", "Pa"). После этого наложенный текст отображается должным образом.

Ознакомьтесь с комментариями в скрипте, чтобы получить полное представление о нем.

В конце нам нужно немного скорректировать два класса HTML, чтобы сделать их прозрачными. Добавьте приведенную ниже строку к классам searchBoxForm и searchBox в файле hotels.css.

Теперь запустите приложение. Введите "pa" в поле поиска. Происходит ли автозаполнение словом "palace" вместе с предложением двух отелей, в названии которых содержится "pa"?

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

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

Общие выводы

По результатам этого проекта можно сделать такие выводы:

Функции автозаполнения (также называется "упреждающий ввод") и предложений позволяют пользователю найти то, что нужно, введя лишь несколько ключевых символов.
Совместное использование функций автозаполнения и предложений обеспечивает улучшенные возможности для пользователя.
Необходимо всегда тестировать функции автозаполнения со всеми формами ввода.
Функция setInterval может оказаться полезной при проверке и корректировке элементов пользовательского интерфейса.

Дальнейшие действия

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

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