Тестовый проект 1

Настройка VS Code для верстки

Сегодня мы рассмотрим установку и настройку Visual Studio Code для верстки. В результате мы получим удобную, лаконичную рабочую среду с необходимыми плагинами, которые я использую в своей работе. VS Code в настоящее время является самым популярным редактором кода благодаря широкому функционалу, кроссплатформенности, огромному сообществу разработчиков как самого редактора, так и расширений для него и открытой лицензии. Этот редактор я могу смело рекомендовать к использованию.

Материалы урока и полезное

• Visual Studio Code: Страница редактора
• Simple Starter: Ознакомиться и скачать
• Урок по GitHub Gist: Ознакомиться с уроком
• Архив с настройками: Скачать
• Верстка с Emmet: Смотреть урок

Рекомендуемые расширения

• CSS Peek
• eCSStractor for VSCode
• Gist
• Sass
• HTML to CSS autocompletion
• IntelliSense for CSS class names in HTML
• Live Server
• One Dark Pro

Пресет настроек settings.json

< "emmet.extensionsPath": [ "~/AppData/Roaming/Code/User/emmet" ], // "php.validate.executablePath": "D:/OSPanel/modules/php/PHP_8.1/php.exe", // "terminal.integrated.defaultProfile.windows": "Git Bash", // "terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)", "workbench.startupEditor": "none", "editor.smoothScrolling": true, "editor.fontSize": 16, "editor.minimap.enabled": false, "breadcrumbs.enabled": false, "editor.renderControlCharacters": true, "editor.tabSize": 2, "workbench.activityBar.visible": false, "files.defaultLanguage": "html", "git.ignoreMissingGitWarning": true, "editor.detectIndentation": false, "editor.folding": false, "editor.glyphMargin": false, "editor.parameterHints.enabled": false, "editor.hover.enabled": false, "terminal.integrated.fontSize": 16, "editor.renderWhitespace": "boundary", "editor.lineHeight": 23, "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.donotVerifyTags": true, "security.workspace.trust.enabled": false, "editor.linkedEditing": true, "editor.bracketPairColorization.enabled": true, "editor.wordSeparators": "`~!@#$%^&*()=+[\\|;:'\",.<>/?", "emmet.triggerExpansionOnTab": true, "editor.insertSpaces": false, "git.openRepositoryInParentFolders": "never", "editor.cursorSmoothCaretAnimation": "on", "explorer.confirmDelete": false, "workbench.colorTheme": "One Dark Pro Darker", "ecsstractor_port.add_comment": false, "ecsstractor_port.empty_line_before_nested_selector": false >

Источник

Настройка Visual Studio Code для JavaScript, HTML и CSS

Visual Studio Code – это кроссплатформенный редактор кода для разработки web проектов, выпущенный Microsoft под Windows, Linux и macOS. VS Code распространяется бесплатно, постоянно развивается, а функционал расширяется плагинами. Платформа особенно популярна среди Frontend разработчиков, но также используется и другими программистами. Среди основных возможностей стоит отметить: отладчик, работа с Git, подсветка синтаксиса, встроенный терминал и пакетный менеджер.

После установки Visual Studio Code, которая не должна вызвать никаких проблем, пользователь получает полноценную платформу для написания кода. Без дополнительных манипуляций здесь доступен Emmet, а функционал легко дополняется расширениями через Visual Studio Marketplace, доступный также через интерфейс редактора. В магазин можно попасть, кликнув на иконку Extensions расположенную в боковой панели или нажав сочетание клавиш Ctrl + Shift + X

Расширения для Frontend разработки

Emmet

Упрощает процесс написания кода, позволяя с помощью коротких команд формировать большие структуры кода. Плагин уже встроен в VS code, а полный список возможностей можно посмотреть на официальном сайте расширения. Короткий пример позволяющий проиллюстрировать работу Emmet: вам необходимо создать 20 элементов нумерованного списка, вы набираете ol>li*20 и нажимаете Tab или Enter – список из 20 элементов готов.

Live Server

Простое, но полезное расширение, позволяющее отслеживать на странице, без ее перезагрузки, изменения в JavaScript, HTML и CSS. Плагин не является полноценным сервером, но его функционал можно расширить в этом направлении с помощью других дополнений.

ESLint

Утилита для проверки стандарта написания кода на JavaScript. Дополнение относится к программам, называемые линтеры, которые проверяют код на правильность написания и соответствия современным практикам кодирования. После анализа ESLint выделяет ошибки и неточности, которые теперь легко увидеть и исправить.

Auto Rename Tag

Автоматически переименовывает парные теги HTML/XML – таким образом остается поменять только один из двух тегов закрывающий или открывающий.

Bracket Pair Colorizer 2

Расширение раскрашивает код, тем самым позволяя лучше разбираться во вложенности элементов. Код становится более понятным, а риск совершить ошибку уменьшается.

Path Autocomplete

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

Prettier — Code formatter

Позволяет автоматически приводить код в порядок согласно внутренним правилам плагина и индивидуальным настройкам пользователя. Проще говоря – расставит пробелы и переносы, заменит одинарные кавычки на двойные или наоборот и так далее.

CSS Peek

Позволяет смотреть и редактировать стили прямо в html файле. Просто зажимаете Ctrl далее наводите на класс и кликаете. После этих манипуляций появляется всплывающее окно – соответствующий файл 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 разработки, но в арсенале редактора еще много сюрпризов и решая различные задачи вы будете узнавать о нем все новое и новое.

Skypro — научим с нуля

Источник

Настройка VSCode для работы с HTML

В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++. VSCode является универсальной IDE, благодаря наличию онлайн каталога с множеством расширений, позволяющих настроить среду как вам удобней. При этом её можно использовать для разработки на разных языках программирования. Данная среда может использоваться и для разработки HTML-страниц. Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!

Установка расширения Browser Preview

чтобы открыть окно Расширения. Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg. Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок. Также нам понадобится расширение – Live Server от Ritwick Dey.

Установка расширения Live Server

Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку! После установки Live Server обязательно закройте VSCode и запустите его снова.

Установка

Создание проекта

Давайте создадим тестовый проект для нашей страницы. Допустим, все проекты у нас будут храниться в папке d:\html Откроем консоль cmd.exe и введем команды:

d: mkdir d:\html\test1 cd d:\html\test1 code .

Откроется новое окно VSCode, в котором уже открыта папка проекта test1: Добавим в нее новый файл index.html Для этого нажмите на указанную кнопку и введите имя файла: Щелкните на файл, чтобы открыть его в редакторе. Давайте создадим простейшую страницу:

    
Это тест!
  

Проверка HTML-страницы

У нас есть проект и web-страница, пришло время её проверить. Сначала запустим Live Server, для этого просто нажмите кнопку Go Live: Откроется новое окно браузера и сервер будет запущен на порту

Закройте вкладку браузера, мы будем использовать Browser Preview

Создание конфигурации для запуска Browser Preview

Выберите меню Run -> Add configuration… Выберите пункт Browser Preview Будет создан файл launch.json замените его содержимое на:

Сохраните и закройте вкладку. Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации: Откроется окно: . Нажмите на «Запустить test1…» Откроется вкладка с нашей страницей:

Работа с Browser Preview

Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы. Давайте добавим текст на страницу:

    
Это тест!
 1234 
А это новый текст. 
 

Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview

Отладка сайта в браузере

Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server Запустите Google Chrome и откройте в нем ссылку http://localhost:5500 Я расположил окна рядом, для большей наглядности. Давайте добавим еще одну строку в html-файл:

    
Это тест!
 1234 
А это новый текст.
 
А этот текст еще новее. 
 

Сохраним файл – содержимое обновится и в браузере, и во вкладке Browser Preview.

Источник