Path autocomplete for visual studio code как пользоваться
Есть ли способ использовать компоненты или HTML-код в Visual Studio Code? Поскольку ввод каждой буквы вручную не является хорошей идеей, когда у нас есть классы, такие как Bootstrap и т.д. Например, завершение как в Emmet: ul>li*2>a
ОТВЕТЫ
Ответ 1
Код Visual Studio обнаруживает расширения .jsx и добавляет поддержку emmet по умолчанию (я использую VS code 1.8.1)
Но если вы предпочитаете использовать расширение .js для всех ваших реагирующих файлов - вы можете связать режим JavaScript React с файлами .js в правом нижнем углу окна VS Code.
Ответ 2
2019: прямой ответ на React
Самый простой способ получить автозаполнение JSX/HTML в ваших проектах React - добавить его в свои пользовательские настройки или настройки рабочего пространства ( <project-path>/.vscode/settings.json ):
Возможно, вам придется перезапустить VS Code, чтобы изменения вступили в силу.
PS Если вы не делаете это отображение для проекта React.js, то ответ KehkashanFazal, вероятно, должен работать для вас.
Ответ 3
Если кто-то все еще борется с этой проблемой:
Я обнаружил, что просто установка
не позволяет завершить HTML. Но, используя:
"emmet.includeLanguages": <>
Включить аббревиатуры emmet на языках, которые по умолчанию не поддерживаются. Добавьте сопоставление между языком и поддерживаемым emmet языком.
Например:
Ответ 4
Просто выберите соответствующий Режим языка в правом нижнем углу экрана: установите значение JavaScript React.
Ответ 5
Ответ 6
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 .
Ответ 7
Автоматическое закрытие тегов в .html,.js и .jsx
Работает из коробки. То есть после ввода закрывающей скобки для открывающего тега закрывающий тег будет вставлен автоматически.
Emmet с базовым HTML в .jsx файлах
Работает из коробки.
Emmet с базовым HTML в файлах .js:
Добавьте следующий параметр, необходимый для предложений сокращения Emmet и необходимый для последовательной работы расширения вкладок.
Emmet с пользовательскими тегами (например, React Components) в файлах .js и .jsx
Добавьте следующий параметр:
Обратите внимание, что с этим параметром Emmet будет расширять все слова как пользовательские теги (а не только имена компонентов React).
Также обратите внимание, что при использовании Emmet для расширения компонентов React в качестве пользовательских тегов необходимо фактически выбрать имя компонента из списка предложений и сначала заполнить его (или вручную ввести полное имя и закрыть меню предложений с помощью клавиши escape). После того, как слово развернется, вам придется снова перейти на вкладку, чтобы Эммет развернул пользовательский тег.
Есть запрос активной функции, чтобы потенциально удалить этот дополнительный шаг (автоматически расширяется при выборе предложения, чтобы он работал так же, как и при расширении стандартных тегов html).
Поиск проблемы
Убедитесь, что у вас последняя версия 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
Я пошел бросить все ответы, и этот конфиг работал для меня. пришлось включить язык, а также добавить синтаксисProfile. без расширения триггера ничего не получалось, но теперь я нажимаю только клавишу Tab, чтобы получить результат.
Ответ 13
Автозаполнение для React Babel работало нормально до вчерашнего дня для меня.
Ответ 14
Работают только в файлах JSX. Пусть это не работает с JS.
Ответ 15
Я работал над различными проектами, и у меня есть большой файл настроек.
Я проверил настройки и обнаружил, что эти настройки разрушают все.
Я прокомментировал это. И все прекрасно работает в приложениях React. Спасибо
Сделайте максимально комфортной свою работу в редакторе Visual Studio Code при помощи дополнительных расширений. Подборка лучших расширений для VSCode.
Основной редактор которым я пользуюсь для написания кода стал Visual Studio Code (сокращённо VSCode). До этого я работал в редакторе Sublime Text, который полностью удалил через две недели после того как начал юзать VSCode, просто потому что VSCode гораздо круче и быстрее.
В этой статье я хочу рассказать вам о лучших расширениях для редактора VSCode, которыми сам пользуюсь и советую обратить на них ваше внимание.
В VSCode реализованы поиск и установка расширений прямо из редактора - достаточно открыть панель расширений и в поиске расширений в Marketplace ввести название расширения или ключевое слово (тег), и редактор тут же сделает поиск и предложит вам варианты доступные по вашему поисковому запросу.
По умолчанию в VSCode уже установлен плагин Emmet, а вот какие расширения стоит установить, чтобы сделать вашу работу быстрее и комфортнее, читайте дальше.
Расширения для Visual Studio Code
Project Manager - Менеджер проектов
Project Manager - это то расширение которое стоит установить в редактор VSCode первым делом. Автор данного расширения Alessandro Fragnani - опытный разработчик, в копилке которого больше десятка расширений для VSCode.
Расширение Project Manager поможет вам легко получать доступ к вашим проектам, независимо от того где они находятся. Вы можете определить свои собственные избранные проекты или выбрать для автоматического обнаружения проектов VSCode, Git, Mercurial и SVN-репозиториев или любой папки.
В общем, любую папку на компьютере вы можете сделать проектом и при помощи этого расширения сможете быстро переключаться между вашими проектами или открывать их в новом редакторе.
Я лично сделал свой вклад в разработку расширения Project Manager - сделал его мультиязычным и добавил русский язык, так что теперь оно доступно на русском языке.
Bookmarks - Закладки
Bookmarks - ещё одно расширение для VSCode от Alessandro Fragnani.
Расширение позволяет вам делать закладки на строки файла, о чём сигнализирует метка на полях.
Закладки имеют собственную панель проводника и иконку на левой панели меню, что обеспечивает быстрый доступ к закладкам. Их можно добавлять неограниченное количество.
Для удобства, чтобы легче ориентироваться в закладках, я часто ставлю закладку на комментарий. Ниже на скрине пример - закладка стоит на строке с комментарием Кнопки и в проводнике закладок она обозначена Кнопки. Думаю так удобно:
Так же как и для Project Manager, я сделал свой вклад в разработку и этого расширения - сделал мультиязычным и добавил в него русский язык.
open in browser
Расширение Open in Browser добавляет возможность быстро открывать в браузере файлы html.
С этим расширением не нужно долго возиться чтобы открыть файл в браузере.
Если файл открыт в редакторе и находится в активном состоянии - достаточно нажать комбинацию клавиш Alt + B и файл откроется в браузере по умолчанию.
Если нажать комбинацию клавиш Shift + Alt + B - то в командной строке редактора появится список браузеров где можно выбрать в каком конкретно браузере нужно открыть файл.
Запоминать упомянутые выше комбинации клавиш вам не нужно - достаточно нажать правую кнопку мыши и в контекстном меню есть соответствующие пункты, чтобы открыть файл в браузере по умолчанию или выбрать браузер из списка. При чём можно открывать не только активные файлы (открытые в редакторе), но и файлы из панели проводника.
Path Intellisense
Path Intellisense - данный плагин для Visual Studio Code, который автоматически заполняет имена файлов.
Аналогичное расширение Path Autocomplete.
Path Autocomplete
Выполняет тот же функционал что и Path Intellisense, добавляя путь и имена файлов.
В настоящее время у меня отключен Path Intellisense, а включен Path Autocomplete. Я тестирую какое из этих двух расширений быстрее реагирует и даёт подсказки в интелесенс. Пока мне больше нравится Path Autocomplete, впечатление что он быстрее.
file-size
Это расширение показывает в статус баре редактора размер активного файла.
Я искал настройку в параметрах VSCode, чтобы отображать размер файла, но не нашёл. Зато данная небольшая утилита решает эту проблему и выводит в статус-баре редактора информацию о размере файла.
htmltagwrap
Это расширение делает обёртку выделенного фрагмента тэгами HTML.
Всё просто - выделяем фрагмент или строку и команда сочетанием клавиш Alt + W
Если привыкнуть и запомнить команду, то очень круто.
Active File In Status Bar
Выводит в статус-баре редактора путь к файлу. При клике - копирует путь к файлу в буфер обмена.
Bracket Pair Colorizer
Данный плагин позволяет задать цвет для каждой пары скобок, что позволяет визуально контролировать вложенность или правила условий в коде. Работает для круглых (), фигурных <> и квадратных скобок [].
До установки этого плагина у меня были проблемы с закрытием скобок, теперь я по цвету вижу вложенность скобок.
Иконки файлов и папок
VSCode simpler Icons with Angular
Это коллекция иконок для файлов. Я много пересмотрел иконок, но остановился на данной сборке, т.к. здесь стилизованы папки только для node_modules и bower. В других же сборках разные папки (например: images, js, css и т.д.) имеют свои красивые иконки, но при этом трудно быстро отличить папку от файла, а здесь всё просто - в дереве папок и файлов я чётко вижу где открытая папка, а где закрытая.
Подобных наборов очень много на Marketplace, так что можете сами посмотреть и подобрать подходящие для вас стили иконок. Можно поставить сразу много коллекций. Изменить иконки легко - настройка для смены иконок находится в меню на шестерёнке расположенной внизу в тулбаре:
Выбираете пункт Тема значков файлов и в командной строке редактора появятся установленные у вас темы значков файлов. Три темы дефолтных от VSCode и то что вы добавите. В списке просто стрелками вверх-вниз листайте темы и иконки тут же будут применяться и отображается в проводнике на файлах. Так быстро подберёте ту тему которая вам нравится.
Повторюсь, что мне понравилась тема VSCode simpler Icons with Angular
Live Server
Запускает локальный сервер разработки с функцией активной перезагрузки для статических и динамических страниц.
Для этого в статус баре редактора расположена кнопка для запуска. После клика по ней - открывает файл в браузере и следит за изменениями в файлах. При изменении файлов автоматически перезагружает страницу в браузере.
Лично я предпочитаю работать с Browsersync через Gulp, который шустрее, функциональней и создаёт меньше нагрузок, но так как не всегда и не в каждый проект устанавливается Gulp, то находится работа и для расширения Live Server.
Профилированные расширения для VSCode
А теперь предложу список расширений для VSCode для специфических направлений.
Работа с Git и Github
Помимо того что VSCode по умолчанию работает с гитом, на Marketplace есть очень много расширений на самый любой вкус для работы с Git и Github. Я меня стоят такие:
Git History, GitLens, Git Merger, GitHub Pull Requests
RemoteFS
Это расширение позволяет подключаться к серверу по FTP и SFTP протоколам.
Всё что нужно для того чтобы открыть сайт или проект находящийся на сервере - это в файле settings.json добавить следующую настройку:
Данные для подключения можно получить на вашем хостинге в разделе Пользователи FTP. Я специально показал макет подключение для двух сайтов - по такой схеме можно подключать сколько угодно сайтов по разным протоколам (FTP или SFTP).
Это расширения достаточно молодое (опубликовано в мае 2018 г) и я ожидаю, что оно будет развиваться и обрастать полезным функционалом.
Для командной разработки
В редакторе VSCode можно вести совместную разработку. Для этого есть расширение VS Live Share
Можно расширить функционал совместной разработки и дополнительно накатить звуковой чат и Slack. Для этого Microsoft специально сделал сборку VS Live Share Extension Pack, который установит VS Live Share и все необходимые пакеты
cdnjs
vscode-pdf
Просмотр файлов PDF в редакторе VSCode
Это далеко не все расширения которые которыми я пользуюсь и хотел бы порекомендовать. При появлении времени я обязательно буду дополнять данный список расширений для Visual Studio Code. Если вы тоже знаете какие крутые расширения для VSCode, поделитесь пожалуйста в комментариях. Желательно по возможности и ссылку на него. Всё таки поиск достойных расширений отнимает много времени и можно легко пропустить что то интересное.
Есть ли способ использовать компоненты или 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).
Давайте поговорим о Code — Visual Studio Code.
Наш VSC будет пятирогим лазеростреляющим единорогом —после того как мы снабдим его самыми полезными расширения, которыми я пользуюсь каждый день.
О, а если вы еще не используете замечательный редактор VSC, под картинкой выше есть ссылка на официальный сайт, с которого его можно загрузить.
Самая эпичная тема для Visual Studio Code:
Автома т ически находит, парсит и дополняет названия методов и событий для всех доступных файлов. Поддерживает Typescript и TSX.
Это расширение отобразит в редакторе размер импортируемого пакета в одной строчке с соответствующим методом. Расширение использует Webpack с babili-webpack-plugin для обнаружения импортируемого объекта и оценки его размера.
Простое расширение, которое делает отступы более читабельными.
Расширение VSCode, которое автоматически дополняет название CSS-класса для HTML-атрибута class на основе определений, найденных в вашей рабочей области или внешних файлов, на которые ссылается элемент link .
Простой способ предпросмотра SVG.
Не могу жить без него — пакет VSCode для форматирования JavaScript / TypeScript / CSS с использованием Prettier.
Подсказки, отладка и встроенные команды для React Native.
Это расширение позволяет в VSCode использовать горячие клавиши Sublime Text 3. Попробуйте потестировать его, открыв консоль сочетанием клавиш:
cmd ⌘ + P — Mac
ctrl + P — Windows
В этой консоли можно быстро перейти к файлам, а также, если добавить символ > перед поисковой строкой, можно искать действия, такие как переключение встроенного терминал, установку расширения и так далее.
Очень удобная штука для тех из нас, кто привык к ST3. 🎉
Плагин VSCode, который автоматически дополняет имена модулей npm в операциях импорта.
Добавляет подсветку синтаксиса и поддержку разметки HTML внутри строк JavaScript и TypeScript, как это используется в lit-html и других фреймворках.
Это расширение предназначено для подсветки парных открывающих или закрывающих тегов — функциональности, отсутствующей в VSCode, но которая должна бы быть встроена в редактор из коробки.
Это расширение перезагружает встроенные возможности Visual Studio Code по работе с Git. Оно в наглядном виде предоставляет информацию об авторстве изменений в Git, а также облегчает перемещение по репозиториям и позволяет отслеживать историю изменений файлов или веток, использовать команды сравнения кода и многое другое.
Git Project Manager (GPM) — это расширение Microsoft VSCode, которое позволяет вам открыть новое окно на основе git-репозитория непосредственно из VSCode.
Просмотр логов git и истории изменения файлов и сравнение веток или коммитов.
Удобный способ создания, дублирования, перемещения, переименования и удаления файлов и каталогов.
Настраиваемое расширение для раскрашивания парных скобок. Крайне полезно при работе с большим количеством обратных вызовов.
Это расширение подсвечивает CSS / веб-цвета, найденные в вашем документе.
Переход к CSS-свойствам идентификаторов (id) и классов непосредственно из файлов HTML. Поддерживает переключение и между файлами и быстрый переход из одного в другой.
Инструмент для отладки JavaScript-кода или любого другого кода в браузере Chrome.
Выполняет JavaScript-код в консоли параллельно с тем, как вы его пишете. (Полезно для быстрых демонстраций).
Мгновенно выделяет и удаляет конечные пробелы.
Это расширение пригодится всем, кто пишет на TypeScript и хочет, чтобы VSC организовал импорты за него.
Метрики, инсайты и отслеживание времени, автоматически генерируемые на основании статистики вашей работы по программированию.
Поддержка Vue для VSCode
Запустите фрагмент кода или целый файл сразу в нескольких языках.
Расширенная поддержка автозаполнения и рефакторинга кода на PHP.
Иконки для редактора VSCode.
Пользуйтесь Jest от Facebook с удовольствием.
Сниппеты кода для разработки на React.js в синтаксисе ES6.
Благодарю вас за то, что прочитали эту статью! Переходите по ссылке в твиттере, чтобы узнать о других расширениях VSCode. Знаете еще какие-то полезные плагины, которые не упомянуты здесь? Пожалуйста, пишите их в комментариях❤
Если статья оказалась полезной для вас, не забудьте поаплодировать оригиналу и переводу. Вы также можете подписаться на твиттер автора , где он часто публикует другие полезные подборки.
Читайте также: