как добавить Intellisense в код Visual Studio для начальной загрузки

Я бы хотел иметь intellisense специально для начальной загрузки, но даже для стилей css, которые я пишу в своем проекте. У меня есть ссылки в project.json и bower.json, но они, похоже, не делают ссылки доступными.


118

Вы можете установить расширение поддержки HTML CSS.

ext install vscode-html-css

Это добавит Intellisense в ваши HTML-файлы:

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

  «css.remoteStyleSheets»: [«https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.  6/css/bootstrap.min.css "]  

в settings.json

Улучшите этот ответ
отредактировал 4 февраля ’20 в 07:17
SeinopSys
7,84999 золотых знаков5353 серебряных знака100100 бронзовых знаков
ответил 20 ноября ’16 в 14:16
  • можно ли увидеть значки в intellisense? например, для font awesome — Pyrejkee 01 окт., 12:48
  • Это интересно — мухаммад тайяб 2 мая ’19 в 10:50
  • Действительно нужно расширение для VSC, чтобы обеспечить css intellisense ?! И откуда, черт возьми, вы узнаете, что вам это нужно, а css intellisense — это не просто параметр конфигурации? И как тогда узнать, какое расширение использовать? Кажется совершенно непонятным и непригодным для использования, если вы не дружите с разработчиками VSC. В наши дни та же проблема, кажется, относится ко всему в сфере разработки программного обеспечения. — Йенс Мандер, 21 мая ’19 в 22:20
  • Вероятно, это больше не работает после обновления VScode — user1034912, 16 сентября 2019 г., 18:41
  • Могу подтвердить, что он все еще работает на момент написания этого комментария. — NotAPro 16 ноя. ’20 в 3:42
| показать 2 дополнительных комментария

Вы можете установить расширение поддержки HTML CSS.

ext install vscode-html-css

Это добавит Intellisense в ваши HTML-файлы:

Для локальных файлов ничего настраивать не нужно, просто закройте и снова откройте vscode после установки. Для удаленных файлов css вы можете добавить следующие

  "css.remoteStyleSheets": ["https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"]  

в settings.json


49

Вот общие шаги (не только для Bootstrap) для включения css IntelliSense в VS Code:

Шаг 1. Перейдите на https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

или https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion

( Шаги по установке уже есть)

Шаг 2: Нажмите кнопку «Установить», которая появляется в верхней части веб-сайта (снимок экрана t ниже)

Шаг 3: После нажатия в браузере откроется всплывающее окно для доступа к VS Code. Откройте его с помощью кода VS.

Шаг 4: Еще раз нажмите кнопку «установить», которая появляется внутри кода VS.

Шаг 5: После перезапуска программного обеспечения щелкните нижний левый значок, показанный на изображении ниже:

Нажмите «ctrl + [пробел]» внутри кавычек класса, вы получите полные имена классов из прикрепленные таблицы стилей.

Улучшите этот ответ
отредактировал 19 сен ’18 в 9:54
Johan Maes
30033 серебряных знака1010 бронзовых знаков
ответил 08 марта 2018 в 07:43
  • 2
    Сработало как шарм. Спасибо, Вишну! — это интересно 25 июля ’18 в 13:49
  • Как всегда, ничего не вышло. Я установил расширение, перезапустил VSC, щелкнул флеш-память, она сказала: «CSS/SCSS классы кэшированы». В редакторе html-файла я отредактировал тег ‘

    ‘ на ‘

    ‘, поместив курсор между «, удерживая Ctrl и нажимая пробел. И все VSC можно было найти «class», «h1» и «title». Ни один из них, кстати, не имеет смысла. Никаких реальных классов не было. Это настолько утомительно, что сегодня ничего не работает, и 99% вашего времени уходит на настройку вещей или понимание инструментов, которые вы больше никогда не будете использовать. — Йенс Мандер, 21 мая ’19 в 22:46

  • Также code.visualstudio.com/docs/editor/intellisense говорит, что VSC будет поддерживать Intellisense для css из коробки. Но это не так. Насколько все это астрономически глупо? — Йенс Мандер, 21 мая ’19 в 22:58
  • Лучшее решение. Спасибо, Вишну — Абдулхаким Зейну 3 сен ’19 в 7:33
  • не работает все время, если я выберу форму и список предложений кода ‘class’, тогда я получу class = «», затем я помещаю курсор внутрь «» и набираю нет предложения css, только если я нажимаю Ctrl + пробел или нажимаю пробел. Если я удаляю имя класса и снова оставляю «», при первом вводе оно работает — mrapi 21 апр. ’20 в 15:56
добавить комментарий |

Вот общие шаги (не только для Bootstrap) для включения css IntelliSense в VS Code:

Шаг 1: Перейдите на https://marketplace.visualstudio.com/items?itemName=Zignd.html- css-class-completion

или https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion

(шаги по установке уже есть)

Шаг 2: Нажмите кнопку «Установить», которая появляется в верхней части веб-сайта ( снимок экрана ниже)

Шаг 3: После нажатия в браузере появится всплывающее окно для доступа к VS Code. Откройте его с помощью кода VS.

Шаг 4: Еще раз нажмите кнопку «установить», которая появляется внутри кода VS.

Шаг 5: После перезапуска программного обеспечения щелкните нижний левый значок, показанный на изображении ниже:

Нажмите «ctrl + [пробел]» внутри кавычек класса, вы получите полные имена классов из прикрепленные таблицы стилей.


28

В последней версии VS Code IntelliSense в комментариях и строках по умолчанию отключен. Ниже приведены два варианта восстановления функциональности «24/7 IntelliSense» или настройки ее по своему вкусу.

Сначала убедитесь, что вы установили расширение поддержки HTML CSS, упомянутое dwonisch выше.

Control + ‘,’, чтобы перейти к настройкам, или щелкните Файл -> Настройки -> Настройки.

Щелкните вкладку настроек рабочего пространства и введите следующий код JSON:

  {"редактор. quickSuggestions ": {" comments ": false,// 

Другой вариант — нажать ctrl + пробел в кавычках CSS, чтобы активировать intelliSense. Пример:

  

Улучшить этот ответ
ответил 22 мая ’17 в 3:33
  • 3
    Это лучшее решение, которое я нашел. Я не понимаю, почему команда vs code не включает css intellisense, встроенный в установку vs code. — Дэвид 5 июня ’19 в 07:38
  • На самом деле это не было известно для меня хороший совет для современных пользователей VSC, в дополнение к указанному выше расширению — kabuto178 25 окт.2020 г., 19:14
  • Спасибо, парень, ты молодец 🙂 — R7G, 28 дек., 20:13
добавить комментарий |

В последней версии VS Code функция IntelliSense в комментариях и строках по умолчанию отключена. Ниже приведены два варианта восстановления функциональности «24/7 IntelliSense» или настройки ее по своему вкусу.

Сначала убедитесь, что вы установили расширение поддержки HTML CSS, упомянутое dwonisch выше.

Control + ‘,’, чтобы перейти к настройкам, или щелкните Файл -> Настройки -> Настройки.

Щелкните вкладку настроек рабочего пространства и введите следующий код JSON:

  {"editor.quickSuggestions": {"comments": false,// 

Другой вариант — нажать ctrl + пробел в кавычках CSS, чтобы активировать intelliSense. Пример:

  

1

К сожалению, эта функция в настоящее время недоступна в VS Code. Однако он был добавлен как запрос функции для предстоящих обновлений. Вы можете отслеживать проблему на Github.

Улучшите этот ответ
ответил 21 февраля 2016, в 9:17
добавить комментарий |

К сожалению, эта функция в настоящее время недоступна в VS Code. Однако она был добавлен в качестве запроса функции для предстоящих обновлений. Вы можете отслеживать проблему на Github.


0

Просто установите это расширение в VS Code.IntelliSense для имен классов CSS в HTML

Улучшите этот ответ
ответил 1 января в 14:24
добавить комментарий |

Просто установите это расширение в VS Code.IntelliSense для имен классов CSS в HTML


-1
  1. Откройте код Visual Studio.
  2. Используйте CTRL +, , чтобы перейти к настройкам рабочего пространства.
  3. В правом боковом окне вы увидите что-то вроде этого:
  4. Другими словами, вставьте этот URL
  {"папки": [{"путь": "D: \ Visual Studio \ AndreyCourse \ the-complete-web-developer-in-2018 \ DocumentObjectModel"}], "settings": {"css.  remoteStyleSheets ": [" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css "]}}  
  1. Наслаждайтесь Bootstrap Intellisense 🙂
Улучшите этот ответ

отредактировано 7 января в 6:33
Kolappan N
2,05222 золотых знака2626 серебряных знаков3030 бронзовых знаков
ответил 03 августа 2018 в 12:03
  • 3
    это не работает, так как нет настройки под названием css.remoteStyleSheets используете ли вы расширение, которое предоставляет такую ​​настройку? — Даниэль Хабенихт, 13 сен. ’18 в 13:52
  • @DanielHabenicht справа: marketplace.visualstudio. com/… — dovid 05 июл.2020 в 13:24
добавить комментарий |

  1. Откройте код Visual Studio.
  2. Используйте CTRL +, , чтобы перейти к настройкам рабочего пространства.
  3. В правом боковом окне вы увидите что-то вроде этого:
  4. Еще слова вставьте этот URL
  {"папки": [{"путь": "D: \ Visual  Studio \ AndreyCourse \ the-complete-web-developer-in-2018 \ DocumentObjectModel "}]," settings ": {" css.remoteStyleSheets ": [" https://maxcdn.bootstrapcdn.com/bootstrap/4.0  .0-alpha.6/css/bootstrap.min.css "]}}  
  1. Наслаждайтесь Bootstrap Intellisense 🙂


/bootstrap-snippets-vscode

Набор фрагментов начальной загрузки 4 для кода Visual Studio.

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

Для всех фрагментов, доступных ниже, требуется файл css начальной загрузки 4.2.1.

Чтобы использовать фрагменты начальной загрузки, нажмите Ctrl + Пробел . Появится список фрагментов начальной загрузки.

Инструкции по установке

  • Откройте код Visual Studio, нажмите Расширения , который присутствует на левой боковой панели, или просто нажмите ctrl + shift + x .
  • Здесь вы можете найти все расширения которые уже были установлены. Теперь выполните поиск в строке поиска с помощью bootstrap-snippets-vscode и нажмите «Установить».
  • Теперь перезапустите код vs. Нажав ctrl + пробел , вы можете найти все доступные фрагменты.

Доступные фрагменты

    • Введите media в вашем документе, тогда редактор отобразит фрагмент, разделенный на категории с фрагментами пользователя вместе с описанием — «медиа-объект».
  1. card

    • Введите card в свой документ, после чего появится редактор фрагмент, содержащий пользовательские фрагменты вместе с описанием — «карточка с изображением, текстом, рейтингом и кнопкой».
    • Для этого фрагмента требуется font-awesome.
  2. аккордеон

    • Введите аккордеон в документе, тогда редактор покажет фрагмент кода дополнен пользовательскими фрагментами вместе с описанием — «аккордеон с переключаемыми значками плюс и минус».
    • Для этого фрагмента требуется font-awesome и bootstrap 4.2.1 js.
    • Для этого фрагмента также требуется собственный стиль в css. Итак, откройте файл css и введите «аккордеон», это отобразит фрагмент пользователя, а затем добавьте этот фрагмент..
  3. header-tf

    • Введите header-tf в свой документ, тогда редактор отобразит фрагмент, разделенный на категории с пользовательскими фрагментами вместе с описанием — «основной заголовок с фиксированным сверху».
    • Этот фрагмент требует начальной загрузки 4.2.1 js.
  4. tabs

    • Введите tabs в свой документ, и редактор отобразит фрагмент, разделенный на категории с пользовательскими фрагментами вместе с описание — «Динамические табуляторы».
    • Для этого фрагмента требуется bootstrap 4.2.1 js.
  5. table-r

    • Введите table-r в свой документ , тогда редактор отобразит фрагмент, разделенный на категории с пользовательскими фрагментами, вместе с описанием — «базовая таблица с адаптивностью».
    • Для этого фрагмента требуется bootstrap 4.2.1 js.
    • Тип carousel-slider в вашем документе, тогда редактор отобразит фрагмент, разделенный на категории с пользовательскими фрагментами вместе с описанием — «карусель с индикаторами, элементами управления и подписями».
    • Этот фрагмент требует начальной загрузки 4.2.1 js.
    • Для этого фрагмента также требуется собственный стиль в css. Итак, откройте файл css и введите ‘carousel-slider’, это отобразит пользовательский фрагмент, а затем добавит этот фрагмент.
  6. timeline-r

    • Введите timeline-r в свой документ, тогда редактор отобразит фрагмент, разделенный на категории с пользовательскими фрагментами вместе с описанием — «временная шкала с адаптивностью».
    • Для этого фрагмента требуется font-awesome.
    • Этот фрагмент также требуется собственный стиль в css. Итак, откройте файл css и введите ‘timeline-r’, это покажет пользовательский фрагмент, а затем добавит этот фрагмент.
  7. нижний колонтитул

    • Введите нижний колонтитул в свой документ, тогда редактор отобразит вверх фрагмент, разделенный на категории пользовательскими фрагментами вместе с описанием — «базовый нижний колонтитул с четырьмя столбцами».
    • Для этого фрагмента также требуется настраиваемый стиль в css. Итак, откройте файл css и введите «нижний колонтитул», это отобразит пользовательский фрагмент, а затем добавит этот фрагмент..
  8. флип-карта

    • Введите flip-card в свой документ, после чего редактор отобразит фрагмент, разделенный на категории с пользовательскими фрагментами вместе с описанием — «Перевернуть карту при наведении».
    • Для этого фрагмента также требуется собственный стиль в CSS. Итак, откройте файл css и введите ‘flip-card’, это отобразит пользовательский фрагмент, а затем добавит этот фрагмент.

  9. значки боковой панели

    • Введите значки боковой панели в свой документ, тогда редактор отобразит вверх фрагмент, категоризированный пользовательскими фрагментами вместе с описанием — ‘липкое сворачивание боковой панели до значков с адаптивностью’.
    • Для этого фрагмента требуется font-awesome.
    • Этот фрагмент также требуется собственный стиль в css и пользовательский скрипт в javascript. Итак, откройте файл css и файл js, затем введите ‘sidebar-icons’, это отобразит фрагмент пользователя в обоих файлах, а затем добавит этот фрагмент.
    • Тип login-signup в вашем документе, тогда редактор отобразит фрагмент, разделенный на пользовательские фрагменты вместе с описанием — ‘базовая форма входа/регистрации с использованием модального окна’.
    • Этот фрагмент требует начальной загрузки 4.2.1 js.
  10. breadcrumb

    • Введите breadcrumb в свой документ, и появится редактор. фрагмент, отнесенный к категории пользовательских фрагментов вместе с описанием — ‘базовая навигационная цепочка’.
    • Для этого фрагмента требуется font-awesome.
  11. icon-блоки

    • Введите icon-block в вашем документе, то редактор отобразит фрагмент, разделенный на категории с пользовательскими фрагментами вместе с описанием — «значок с блоками».
    • Для этого фрагмента требуется font-awesome.

Резюме

Ключевое слово Описание Css Javascript Font-awesome
media медиа-объект
карта с изображением, текстом, рейтингом и кнопкой yes
аккордеон аккордеон со значками «плюс» и «минус», который переключает требуемый настраиваемый css в файле css требуется js-загрузчик yes
header-tf базовый заголовок с фиксированным верхом необходимые js-файлы начальной загрузки
вкладки Динамические табуляторы требуются js-файлы начальной загрузки
table-r базовая таблица с res понсиве
карусель-слайдер карусель с индикаторами, элементами управления и заголовками требуемый пользовательский CSS в файле css требуется загрузочный js
timeline-r временная шкала с адаптивным обязательным настраиваемым CSS в файле css yes
нижний колонтитул базовый нижний колонтитул с четырьмя столбцами требуемый пользовательский CSS в файле CSS
флип-карта Переворачивает карточку при наведении требуется настраиваемый CSS в файле css
Сворачивание липкой боковой панели до значков с адаптивным требуется настраиваемый css в файле css требуется настраиваемый код javascript в файле javascript да
базовый вход/подпись форма nup с использованием модального необходимого загрузочного js
хлебные крошки базовые хлебные крошки да
icon-блоки значок с блоками требуемый настраиваемый CSS в файле css да

Примечание.

  1. Для обязательного настраиваемого CSS и пользовательского JavaScript вам необходимо открыть свой CSS/JavaScript и ввести то же ключевое слово в добавить соответствующий css/javascript.
  2. Для всех доступных фрагментов требуется bootstrap 4 css.
  3. Требуемая версия font-awesome — 4.7.0.

Наслаждайтесь!

Оцените статью
logicle.ru
Добавить комментарий