New portal
Портал VSC може бути зроблений на веб-сайті https://portal.vsc.edu/. edu/get, або scan це QR code для завантаження app on your device.
Щоб log in the portal, current students, faculty, and staff will select Student/Faculty/Staff.
Там, вибрати профіль для коледжу, в якому ви збираєтеся або працювали.
Налаштування Visual Studio Code для JavaScript, HTML та CSS
Visual Studio Code – це кросплатформовий редактор коду для розробки web проектів, випущений Microsoft під Windows, Linux та macOS. основних можливостей варто відзначити: відладчик, робота з Git, підсвічування синтаксису, вбудований термінал пакетний менеджер.
Після встановлення Visual Studio Code, яка не повинна викликати жодних проблем, користувач отримує повноцінну платформу для написання коду. на іконку Extensions розташовану в бічній панелі або натиснувши клавіші Ctrl+Shift+X
Розширення для Frontend розробки
Emmet
Полегшує процес написання коду, дозволяючи за допомогою коротких команд формувати великі структури коду.Короткий приклад, який дозволяє проілюструвати роботу Emmet: вам необхідно створити 20 елементів нумерованого списку, ви набираєте ol>li*20 і натискаєте Tab або Enter – список із 20 елементів готовий.
Live Server
Просте, але корисне розширення, що дозволяє відстежувати на сторінці, без її перезавантаження, зміни JavaScript, HTML і CSS Плагін не є повноцінним сервером, але його функціонал можна розширити в цьому напрямку за допомогою інших доповнень.
ESLint
Утиліта для перевірки стандарту написання коду на JavaScript. Додаток відноситься до програм, які називаються лінтери, які перевіряють код на правильність написання та відповідності сучасним практикам кодування.
Auto Rename Tag
Автоматично перейменовує парні теги HTML/XML – таким чином залишається поміняти лише один із двох тегів, що закриває або відкриває.
Bracket Pair Colorizer 2
Розширення розфарбовує код, тим самим дозволяючи краще розумітися на вкладеності елементів. Код стає більш зрозумілим, а ризик зробити помилку зменшується.
Path Autocomplete
Плагін підказує шляхи до файлів, показуючи можливі варіанти, що дозволяє шукати папки вручну.
Prettier - Code formatter
Дозволяє автоматично упорядковувати код відповідно до внутрішніх правил плагіна та індивідуальних налаштувань користувача.
CSS Peek
Дозволяє дивитися і редагувати стилі прямо в html-файлі.Після цих маніпуляцій з'являється спливаюче вікно – відповідний файл CSS, куди можна вносити зміни.
Debugger for Chrome
Розширення для налагодження JavaScript коду. Цей плагін дозволяє працювати в браузерах на базі Chromium, для Firefox доведеться встановити Debugger for Firefox.
Налаштовуємо VS Code під себе
Для більш комфортної роботи над проектами редактор містить масу налаштувань користувача від можливості збільшити або зменшити шрифт до включення автоматичного збереження файлів. Потрапити в панель можна двома способами:
- File – Preferences – Settings;
- Ctrl+Shift+p – відкриється пошуковий рядок, де спочатку ви побачите Preferences: Open User Settings
Розглянемо деякі корисні налаштування
Auto Save – можна вибрати автоматичне збереження, не зберігати автоматично, зберігати під час зміни або втрати фокусу.
Font Size - Розмір шрифту в пікселях.
Line Height - Висота рядка.
Console: Font Size - Розмір шрифту для терміналу.
Font Family - Вибір шрифту.
Tab Size – можна задати кількість прогалин у табуляції.
Open Files in New Window – дозволяє налаштовувати створення файлів у новому вікні чи табі.
Word Wrap – керуванням тим, як слід переносити рядки – по ширині вікна, не переносити тощо.
Format On Paste – визначає, чи редактор автоматично форматуватиме вставлений код.
Minimap – увімкнути або вимкнути мінікарту.
Confirm Delete – видалити або залишити вікно з підтвердженням видалення файлу.
Format On Save – налаштування, яке відповідає за автоматичне форматування коду після збереження файлу. Модуль форматування повинен бути встановлений окремо, наприклад, Prettier - Code formatter, описаний вище.
Semi – увімкнути/вимкнути автоматичне додавання; в кінці строю - налаштування від "Prettier - Code formatter".
Це далеко не всі налаштування доступні в VS code і навіть пробігтися по всіх побіжно буде не так швидко. Для того, щоб краще орієнтуватися в цьому різноманітті, можна скористатися лівим меню, яке ділить весь список на категорії. Налаштування чиї дефолтні значення були змінені можна побачити у форматі JSON, клацнувши на відповідну іконку.
Гарячі клавіші для швидкої роботи
У VS Code відразу після встановлення доступна велика кількість гарячих клавіш. Для того, щоб відкрити весь список, необхідно натиснути Ctrl+K Ctrl+S, також потрапити сюди можна через File – Preferences – Keyboard Shortcuts. На цій сторінці можна не тільки знайти потрібну команду, але й змінити комбінацію гарячої клавіші на зручнішу.
Розглянемо деякі популярні хоткеї:
Ctrl+F (⌘+F) – викликати пошук
Ctrl + / (⌘/) – закоментувати один або кілька рядків
Shift + Alt + ↓ / ↑ ( ⇧⌥↓ / ⇧⌥↑) – дублює рядок на якому встановлено курсор
Ctrl+Shift+\(⇧⌘\) – перейти до парної дужки
F2 – дає можливість перейменувати змінну у всьому документі
Shift+Alt+F (⇧⌥F) – відформатувати документ – працює спільно з Prettier – Code formatter або іншими подібними розширеннями
F12 – перекине до оголошення змінної навіть якщо це в іншому файлі
Alt+Z (⌥Z) – увімкнути/вимкнути перенесення слів
Alt + ↑ / ↓ (⌥Option + ↑ / ↓) – змінює місцями виділену ділянку коду або рядок із сусіднім рядком
Ctrl+D (⌘+D) – множинної редагування однакових структур коду, щоразу натискаючи команду ви приєднуєте до редагування ще одну схожу структуру
Сніпетети
Сніппети у VS Code – це шаблони коду, які можна розгортати в документі за допомогою короткої команди. Принцип роботи схожий з вищезгаданим Emmet-ом, тільки тут ви створюєте заготовки самостійно. Функціонал може бути не дуже затребуваним у новачків, але в процесі підвищення рівня СНІП можуть допомогти прискорити розробку і скоротити кількість помилок.
Для того, щоб приступити до створення сніпетів, введіть у командній панелі (Ctrl + Shift + p) snippet і виберіть із запропонованого Configure User Snippets. Після цього оберіть мову програмування, у нашому випадку шукаємо JavaScript або New Global (працює з усіма типами файлів). Далі відкриється документ, який буде сховищем наших шаблонів. Тут одразу ж можна побачити приклад.
"Print to console" – назва сніпету
"prefix" – команда для активації шаблону
"body" – що виводитиметься
$1 – де буде курсор після створення сніпету
$2 – де буде курсор якщо натиснути Tab
Якщо ви створите глобальний файл, тоді ще буде "scope", де прописується підтримувана мова для цього сніпета.
Насамкінець
Ми розповіли про основні налаштування Visual Studio Code для Frontend розробки, але в арсеналі редактора ще багато сюрпризів і вирішуючи різні завдання ви дізнаватиметеся про нього все нове та нове.
