Включить автозаполнение префикса поставщика в файлах CSS в Visual Studio Code
Как я могу указать VSCode автоматически добавлять свойства стиля с префиксом поставщика при добавлении свойства без префиксов поставщика, добавленных в файлы CSS (не файлы SASS или LESS)?
Для VS Code есть плагин Autoprefixer: marketplace.visualstudio.com/…
Ответы 3
Я использовал плагин css-auto-prefix. Для большинства свойств CSS3 он работает нормально. Хотя все еще находится в стадии бета-версии, улучшения продолжаются. Вы должны попробовать эту, она экономит время и силы.
Выполните следующие шаги, чтобы установить плагин css-auto-prefix в vscode.
- Откройте VS Code.
- Нажмите Ctrl + Shift + X (в Windows) или щелкните значок расширений на самой левой панели.
- Появится окно поиска. Просто введите css-auto-prefix.
- Установите и перезагрузите, и все готово.
Imran Rafiq Rather
Вы можете установить расширение «Автоматический префикс» или «Автоматический префикс CSS» в свой код vs, но я не совсем уверен, можно ли было бы написать наш собственный фрагмент для префикса, возможно, таким образом он будет более настраиваемым.
Но мы также всегда можем установить «auto prefix» через НПМ или Диспетчер пакетов узлов.
Я использовал Плагин VS Code Autoprefixer. Он поддерживает CSS, SCSS и SASS.
Выберите весь CSS, затем нажмите палитру команд, затем нажмите AutoPrefixer: Run .
Если ничего не происходит, добавьте этот раздел ниже в settings.json для Autoprefixer —
После этого выберите весь CSS, затем нажмите палитру команд, затем нажмите AutoPrefixer: Run , и все заработает.
ТОП-10 плагинов VS Сode для верстки
Для популярного редактора VS Code существует огромное количество плагинов для разных задач. Цель данной статьи — составить чек лист самых нужных плагинов для верстальщика, исходя из моего личного опыта.
1. Live Server
Плагин Live Server — мой самый любимый и является бестселлером, который необходим каждому разработчику. Смысл его работы заключается в автообновление браузера, после того как вы сохранили свои действия в редакторе. Вам даже уже не нужно сохранять изменения в коде ручками, проследите за тем, чтобы в пункте меню Файл -> Автосохранение, напротив стояла галочка. Это невероятно удобно, когда не нужно каждый раз нажимать на кнопки Сохранить (в редакторе) и Обновить (в браузере) или клавиши CTRL+S (в редакторе) и F5 (в браузере). Вы просто пишите код, не занимаясь кнопкодавством и сразу видите в браузере какой-то результат, в реальном времени.
2. Sass
Этот плагин помогает комфортно писать код с использованием препроцессоров, подсвечивая синтаксис Sass/Scss, автоматически расставляя отступы и давая нужные подсказки.
3. Live Sass Compiler
Live Sass Compiler является логическим продолжением плагина Sass. Для компиляции Sass кода больше не нужно переключаться на сторонние онлайн-компиляторы. Вы просто пишите код на Sass/Scss, а за кулисами происходит автоматическая компиляция Sass кода в готовые CSS файлы. При совместном использовании Live Server + Live Sass Compiler, можно в реальном времени сразу видеть в браузере готовый результат верстки.
4. All Autocomplete
Как работает плагин All Autocomplete? Вы начинаете писать код и сразу появляются всплывающие подсказки. Выбираете нужный вам вариант из предлагаемых подсказок и нажимаете ENTER. Это здорово помогает избежать глупых ошибок (опечаток). Даже когда вы работаете в нескольких открытых вкладках, например присвоили элементу класс, то начиная прописывать название этого класса в CSS коде, вам уже дается подсказка. Таким образом вероятность ошибки минимизируется, сколько же нервов мне стоили такие тупые ошибки в свое время.
5. Bootstrap v4 Snippets
Вставляет готовые кусочки кода (сниппеты) из Bootstrap. Например вы хотите использовать в своем проекте какой-нибудь Bootstrap компонент, установив плагин со сниппетами, больше не надо идти на сайт getbootstrap.com, открывать документацию и копировать оттуда код. Вы можете нужный код развернуть прямо из редактора, введя несколько символов.
Допустим вам нужно взять код карточки товаров из готовых компонентов Bootstrap и вставить в проект. Для этого набираете в редакторе ключевые символы b-c, выбираете в всплывающем окне нужный класс и плагин моментом развернет код карточки.
6. Jquery Code Snippets
Плагин Jquery Code Snippets упрощает написание кода с использованием библиотеки Jquery. Результат получается просто супер! Только представьте, достаточно написать первые две буквы jq, название метода/класса и плагин сам развернет конструкцию с готовым сниппетом. На странице плагина есть список более 130 сниппетов. Давайте попробуем добавить метод append к элементу. Между тегами <script></script>, введем символ j и выберем нужный вариант.
Подставим в развернутом коде вместо selector и content, нужные нам значения.
7. WordPress Snippet
Данный плагин работает по аналогии с Bootstrap — добавляет сниппеты WordPress.
8. Polacode
Данный плагин умеет делать красивые скриншоты кода. Через комбинацию клавиш CTRL+SHIFT+P вызываем палитру команд, выбираем в списке Polacode, выделяете нужный кусок кода, сохраняете его и сразу можно им поделиться на веб мастерских форумах, чатах или на своем блоге.
9. Autoprefixer
Автоматически добавляет префиксы в CSS код для разных браузеров. Больше не нужно делать копипаст кода для сторонних сервисов, что экономит время. Вызываем данный плагин через палитру команд и необходимые префиксы автоматически добавятся к CSS свойствам.
header <
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
>
10. SFTP
Данное расширение позволяет больше не устанавливать специальную FTP программу, теперь работать с файлами на сервере можно не покидая редактора VS Code. После выбора в палитре команд SFTP config (CTRL+SHIFT+P), в проводнике появится файл sftp.json, где вы пропишите данные вашего сервера (предоставляются хостером) для соединения по FTP.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
How do I enable auto prefix in visual studio code?
I’ve been trying to make my website more responsive but I’m having trouble enabling auto prefixer in visual studio code. I installed the extension but it doesn’t seem to work. Any help would be appreciated.
2 Answers 2
You shoud go to visual studio extensions.
1 — Install Autoprefixer. 
2 — Ctrl + Shift + P > Type "Preferences: Open Settings(JSON)". 
3 — Add this code snippet : "autoprefixer.options": < "browsers": [ "last 4 versions", "ie >= 9", "> 5%" ] >
4- Restart Visual Studio Code.
5 — Select the css code you want to prefix.
6 — Ctrl + Shift + P > Type "Autoprefixer: Run". 
You can go to setting and search for auto prefixer in search bar at the top you will be able to enable and customize any extension. Moreover, you can check the detail of the extension to know how to use it, Or You check out this answer also Enable vendor prefix autocomplete in CSS files in Visual Studio Code.