Fast CSS Selector
Description in Ukrainian. Description in English below
Це розширення допоможе вам швидко створювати селектори із html файлу або переходити до вже створених.
Як воно працює?
Наведіть курсор миші на ім'я класу, тегу чи ідентифікатор.
У спливаючому вікні з'явиться підказка з назвою цього розширення, іменем тегу, класу чи ідентифікатором і двома можливими діями
Виберіть "Перейти до селектора": розширення шукатиме селектор спочатку у файлі html у тегові <style>. Якщо такого немає, то шукатиме у підключених файлах стилів CSS.
Якщо селектор знайдено, то у знайденому селекторі додасться пустий рядок, і курсор буде стояти в цьому рядку.
Виберіть "Додати селектор". Селектор буде додано у тегові <style>, або вкінці останнього підключеного файлу CSS.
Для створення файлів компоненту React напишіть ім'я компоненту у файлі (наприклад, <Component />), наведіть курсор миші на ім'я цього компонента і у підказці, яка з'явиться, натисніть на команду "Create component". В результаті буде створено файл компонента у папці src/components/%Component_name%/. Буде створено файл .jsx з шаблоном компонента, .module.css, а також додані необхідні імпорти.
usage
Як додати селектор:
Як перейти до селектора:
Як створити компонент:
version history
0.1.23 - Додана функція створення компонентів бібліотеки React
0.1.16 - 1. виправлена помилка при додаванні селектора для id (раніше додавався селектор з іменем undefined); 2. Додано опис англійською
0.1.15 - виправлено пошук селектора у тегові <style>;
in future
- пошук селекторів у файлах стилів, підключених через <load> (bundler)
- Перехід до наступного селектора з таким іменем тегу, класу чи id при виборі команди Перейти до тегу
- редагування сніппетів, які додаються у файл .jsx, вибір: ванільний css або css модуль, вибір папки для компонентів
donate
- PayPall: r.taras.t.1@gmail.com
Fast CSS Selector (English)
This extension will help you quickly create selectors from an html file or jump to already created ones.
How does it work?
Hover your mouse over a class, tag, or ID name.
A tooltip will appear in a pop-up window with the name of this extension, the name of the tag, class, or ID, and two possible actions
Select "Go to selector": the extension will first look for the selector in the html file in the <style> tag. If it is not found, it will look in the linked CSS style files.
If the selector is found, an empty line will be added to the found selector, and the cursor will be on this line.
Select "Add selector". The selector will be added in the <style> tag, or at the end of the last linked CSS file.
To create React component files, type the name of the component in the file (for example, <Component />), hover over the component name, and click the "Create component" command in the tooltip that appears. This will create the component file in the src/components/%Component_name%/ folder. This will create a .jsx file with the component template, .module.css, and add the necessary imports.
usage
How to add a selector:
How to go to the selector:
How to create React component:
version history
0.1.23 - Added React library component creation feature
0.1.16 - 1. fixed an error when adding a selector for id (previously a selector with the name undefined was added); 2. Added description in English
0.1.15 - fixed the search for a selector in the <style> tag;
in future
- search for selectors in style files connected via <load> (bundler)
- jump to the next selector with that tag name, class, or id when selecting the Go to Tag command
- editing snippets that are added to the .jsx file, choosing: vanilla css or css module, choosing a folder for components
donate
- PayPall: r.taras.t.1@gmail.com
| |
