Список і швидке налаштування (якщо треба) необхідних мені плагінів у VSCode для фронтенду.

Для пошуку й встановлення  використовується окрема вкладка VSCode, що також викликається по Command + Shift + X на Mac, чи Ctrl + Shift + X на інших ОС.

Live Server (by Ritwick DeyRitwick Dey)

Плагін запускає локальний http сервер на 5500 порту й автоматично перезавантажує редаговану сторінку після кожної її зміни.

Після встановлення додадкових налаштувань не потребує. Запускається натисканням Go Live у нижньому правому кутку вікна VSCode.

Prettier – Code formatter (by Prettier)

Плагін згідно за правилами мови чи налаштувань форматує код (робить відступи, перенесення й т.п.).

Після встановлення, Prettier необхідно зробити дефолтним форматором:

• Відкрити налаштування (Command + , Mac, чи Ctrl + , на Windows);
• В полі пошуку написати Formatter;
• У розділі Editor: Default Formatter вибрати Prettier – Code formatter;

Для автоматичної роботи необхідно відмітити чекбокс у розділі Editor: Format On Save.

vscode-icons (by VSCode Icons Team)

Додає іконки для папок та розширень файлів. Додаткових налаштувань не потребує.

eCSStractor (by diz)

Плагін витягує (копіює) з HTML коду назви класів, котрі одразу можна вставляти у CSS файл.

Після встановлення плагіна необхідно додати комбінацію клавіш для більш зручного копіювання та вставлення класів:

• Відкрити список гарячих клавіш (почергово натиснути Command + K Command + S на Mac, чи Ctrl + K Ctrl + S Windows/Linux);
• Справа натиснути JSON – Keyboard Shortcuts;
• Між квадратних дужок вставити:

    {
      "key": "ctrl+shift+c",
      "command": "extension.ecsstractor_port_run",
      "when": "editorTextFocus"
    }

  Комбінацію клавіш “key” можна змінити на будь-яку іншу.

Класи копіюються або з виділеної ділянки, або усі – якщо нічого не виділено.