Autoprefixer vs code как использовать
Перейти к содержимому

Autoprefixer vs code как использовать

  • автор:

Включение автозаполнения префикса поставщика в файлах CSS в Visual Studio Code

Как я могу сказать VSCode автоматически добавлять свойства стиля с префиксом поставщика при добавлении свойства без добавленных префиксов поставщика в файлы CSS (не SASS или LESS)? css visual-studio-code vendor-prefix

Поделиться Источник 19 июня 2018 в 12:44

4 ответа

Я использовал плагин VS Code Autoprefixer . Он поддерживает CSS, SCSS и SASS. Выберите все CSS, затем нажмите на командную палитру, затем нажмите AutoPrefixer: Run . Если ничего не происходит, то добавьте этот раздел ниже в settings.json для Autoprefixer —

"autoprefixer.options": < "browsers": [ "last 4 versions", "ie >= 9", "> 5%" ] > 

После этого выберите все CSS, затем нажмите на командную палитру, затем нажмите AutoPrefixer: Run и все заработает.

Поделиться 28 октября 2020 в 10:33

  1. Откройте VS Code.
  2. Нажмите Ctrl+Shift+X (на Windows) или нажмите на значок расширений в левой части панели.
  3. Появится поле поиска. Просто введите css-auto-prefix.
  4. Установите и перезагрузите, и вы готовы к работе.

Поделиться 05 декабря 2018 в 06:02

Вы можете установить расширение «Автопрефикс» или «Автопрефикс CSS» в вашем vs-коде, но я не уверен, будет ли нормально написать собственный snippest для префикса, возможно, таким образом будет более настраиваемо.

Но мы также всегда можем установить «Автопрефикс» через NPM в Менеджере пакетов Node.

Поделиться 18 января 2019 в 09:19

Возможно, вам захочется прочитать это, прежде чем использовать плагин/расширение с префиксом поставщика через VScode.

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

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

Если вы не можете перейти к инструменту сборки, вы можете использовать плагины текстового редактора:

Visual Studio Code Editor Atom Sublime Text Brackets

Если вы решите использовать подход @Pinaki, это нормально, но не сможете получить все необходимые обновления.

Как пользоваться автопрефиксером онлайн

Autoprefixer online

В процессе разработки веб сайтов и приложений, разработчик сталкивается с проблемой поддержки всех, нужных для него, браузеров. Но некоторые свойства работают только с вендорными префиксами (в некоторых браузерах). Для это был создан проект Autoprefixer. В идеальном варианте, его нужно встроить в систему сборки проекта (gulp или grunt). Но это не всегда возможно. Иногда нам нужно просто проверить нужны ли префиксы для определенного свойства или просто расставить нужные и убрать ненужные. И для этого, а может и для чего-то еще был написан Autoprefixer online. Сервис очень прост в использовании. В левую колонку вставляете свой CSS код, а в правой получается он-же, но только после расстановки и удаления вендорных префиксов в зависимости от выбранных вами браузеров (по умолчанию последние 2 версии).

Настройка поддерживаемых браузеров

Фильтер браузеров для autoprefixer online

Часто у людей, не знакомых с синтаксисом автопрефиксера, возникают проблемы с фильтром для браузеров. По умолчанию автопрефиксер поддерживает последние 2 версии основных браузеров (таких как google chrome и т.д.). Но вы можете выбрать, какие браузеры вам нужны по имени (к примеру "ff 21" — это Firefox 21 версии) или по шаблонам. Последние 2 версии основных бразуеров — "last 2 versions" . Браузеры с долей пользования больше чем 1% в мире — "> 1%" . Новые версии браузера начиная с определенной версии — "ff > 20" или "ff >= 20" . Или же можно написать просто название и версию браузера — iOS 7 Список браузеров доступных для использования в фильтре:

  1. Android .
  2. BlackBerry или bb для браузера Blackberry.
  3. Chrome для Google Chrome.
  4. Firefox или ff для Mozilla Firefox.
  5. Explorer или ie для Internet Explorer.
  6. iOS или ios_saf для iOS Safari.
  7. Opera для Opera.
  8. Safari для десктопного Safari.
  9. OperaMobile или op_mob для Opera Mobile.
  10. OperaMini или op_mini для Opera Mini.
  11. ChromeAndroid или and_chr для Chrome под Android (очень похож с Chrome ).
  12. FirefoxAndroid или and_ff для Firefox для Android.
  13. ExplorerMobile или ie_mob для Internet Explorer Mobile.

К примеру у вас нет поддержки мобильных браузеров, Internet Explorer версии 8+ и последние 3 версии основных браузеров.

Для этого вы можете написать ie >= 8, last 3 versions, > 2% .

На всякий случай я включил в пример поддержку браузеров с долей выше 2%, на всякий случай.

Дополнения и замечания оставляйте на github.

Актуальных префиксов вам вместе с Autoprefixer online.

#3 — Autoprefixer и Source Maps

#3 - Autoprefixer и Source Maps

Некоторые CSS3 свойства некорректно отображаются в различных браузерах. Чтобы их исправить придумали специальные префиксы для свойств. Gulp обладает плагином Autoprefixer, что позволяет не прописывать префиксы к свойствам каждый раз вручную, а добавлять их в автоматическом режиме. В уроке вы научитесь работать с плагином Autoprefixer, а также познакомитесь с Source Mapping.

Видеоурок

Некоторые CSS3 свойства, например transition , могут некорректно отображаться в не особо популярных браузерах. Для исправления ошибки были придуманы специальные префиксы к свойствам.

Пример:

Прописывать префиксы под каждое CSS3 свойство очень неудобно и это занимает множество времени.

Для решения проблемы придумали плагин Autoprefixer. Подключив плагин и указав какие CSS или SCSS файлы вы отслеживаете, вы можете в автоматическом режиме добавлять все необходимые префиксы к свойствам и ваш сайт всегда будет отображаться корректно.

Source Maps

Source Maps — плагин, позволяющий указать исходный файл со стилями. Указав такой файл, вам намного проще будет отслеживать ошибки и проверять код через консоль разработчика в Google Chrome, Mozilla Firefox и в любых других веб браузерах.

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.

asked Sep 24, 2020 at 10:23
Emmanuel Appiah Emmanuel Appiah
33 2 2 silver badges 6 6 bronze badges

2 Answers 2

You shoud go to visual studio extensions.

Autoprefixer extension

1 — Install Autoprefixer.

enter image description here

2 — Ctrl + Shift + P > Type «Preferences: Open Settings(JSON)».

enter image description here

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.

enter image description here

6 — Ctrl + Shift + P > Type «Autoprefixer: Run».

answered Feb 21, 2021 at 16:06
Bruno Vinícius Bruno Vinícius
86 1 1 silver badge 5 5 bronze badges

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.

answered Sep 24, 2020 at 10:34
68 5 5 bronze badges

  • visual-studio
  • visual-studio-code
  • webkit
  • autoprefixer
    The Overflow Blog

ends in 3 days

Linked
Related
Hot Network Questions

Subscribe to RSS

Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2024 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2024.3.8.5973

Добавить комментарий

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