Как исправить Tailwind CSS IntelliSense в коде Visual Studio

TailwindCSS IntelliSense не работает в VS Code? Следуйте инструкциям в статье, чтобы исправить это.

Проблема

Недавно я начал переходить с традиционных CSS/SCSS на более современные варианты, такие как TailwindCSS. Поиграв в их онлайн-площадке, я решил попробовать локально и построить небольшой проект.

Однако я столкнулся с этой небольшой, но очень неприятной проблемой. Я знал, что в VSCode marketplace у TailwindCSS есть какой-то IntelliSense, после его установки я быстро понял, что он вообще не работает. Поэтому я решил перезагрузить VSCode, но все равно безрезультатно.

Решение

Покопавшись в документации, я наконец нашел этот фрагмент кода:

"editor.quickSuggestions": {
   "strings": true
},
"css.validate": false,
"editor.inlineSuggest.enabled": true

Поместил его в файл settings.json моего VSCode, и он заработал так, как и ожидалось. Чтобы открыть редактор настроек, используйте следующую команду меню VS Code:

В Windows/Linux — Файл › Настройки › Настройки
В macOS — Код › Настройки › Настройки

Вы также можете открыть редактор настроек из палитры команд (⇧⌘P) с помощью Preferences: Open Settings или использовать сочетание клавиш (⌘,). Вы можете разместить фрагмент в любом месте вашего settings.json, и он должен работать нормально. Если не даст просто 1-2 минуты или перезагрузить окно VSCode.

БОНУС

Если вы хотите использовать Emmet с TailwindCSS, обязательно добавьте эту строку "tailwindCSS.emmetCompletions": true в тот же файл settings.json.

Вкратце

Ваш окончательный фрагмент кода должен выглядеть примерно так:

"tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
   "strings": true
},
"css.validate": false,

Ура! Теперь вы можете программировать в TailwindCSS, не пытаясь запомнить все классы. 🎉

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

И если вам интересно, какую тему я использую, это One Monokai.🙃

Присоединяйтесь к Medium по моей реферальной ссылке — Кен Нерсисян
Раскройте свой потенциал с Medium. Присоединяйтесь, читайте мои статьи и статьи других популярных авторов. Читайте, учитесь и становитесь лучше…medium.com