Настройка 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 или VSCode Browser Sync
- 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, "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, // "liveServer.settings.donotShowInfoMsg": true, // При использовании Live Server // "liveServer.settings.donotVerifyTags": true, // При использовании Live Server // "browserSync.config": < "notify": false, "files": "./" >// При использовании VSCode Browser Sync >
7 расширений для VS Code, установив которые, вы не захотите выходить из редактора
Одно из различий между очень хорошими и хорошими программистами заключается в том, какие инструменты они используют. Подбор правильных инструментов способен значительно облегчить разработчику жизнь. Это относится к тонкой настройке интегрированных сред разработки, используемых при написании кода.
Многие программисты используют в наши дни Visual Studio Code. Этот редактор кода поддерживает установку расширений. Существует столько подобных расширений, что можно говорить о том, что возможности настройки VS Code практически безграничны.
Но на Visual Studio Marketplace, на площадке, где публикуются расширения для VS Code, опубликовано просто невероятное количество расширений. А это значит, что программистам сложно находить именно то, что им действительно пригодится. Если некое расширение показалось кому-то полезным, то оно, вполне возможно, принесёт пользу и другим людям. Поэтому я расскажу здесь о 7 расширениях для VS Code, которые способны значительно облегчить работу программиста. Всё это — бесплатные расширения. Любой может свободно их загружать и использовать.
1. REST Client
Расширение REST Client позволяет, прямо из VS Code, отправлять HTTP-запросы, и тут же просматривать ответы на них. Это расширение позволяет попрощаться с внешними приложениями, которые иначе пришлось бы использовать для выполнения запросов к серверам.
Это расширение, учитывая то, что у него более миллиона загрузок, весьма популярно. Им пользуется множество программистов. Я уже довольно давно пользуюсь REST Client и полагаю, что это — замечательный инструмент.
С его помощью очень просто и удобно создавать и отправлять запросы. При работе с ним используются чёткие синтаксические конструкции, облегчающие его применение в самых разных ситуациях. Например, для отправки простого GET-запроса достаточно одной строки кода, в которой имеется ключевое слово GET и присутствует URL.
В общем, рекомендую испытать это расширение всем, кому нужен функционал REST-клиента.
Работа с REST Client
2. CSS Peek
Если вы занимаетесь веб-разработкой, то CSS Peek — это расширение, которое обязательно должно присутствовать в вашем наборе инструментов. Данное расширение позволяет быстро просматривать CSS-правила, применяемые к различным HTML-элементам. Для того чтобы увидеть соответствующий CSS-код, достаточно навести указатель мыши на имя класса элемента или на его ID.
Ниже показан процесс работы с CSS Peek.
Работа с CSS Peek
Но возможности этого расширения идут дальше просмотра стилей. Оно, кроме прочего, позволяет быстро переходить к коду CSS-правил, используемых для стилизации элементов. Это позволяет экономить массу времени при поиске соответствующих селекторов.
3. Beautify
Если вам нравится чистый код, то вам, определённо, придётся по душе расширение Beautify. Оно позволяет форматировать код. Beautify поддерживает JavaScript, HTML, CSS, Sass и JSON.
Самое приятное в этом расширении то, что оно поддаётся глубокой настройке. Например, сюда входит настройка размеров отступов и указание того, должны ли файлы завершаться переводом строки. Beautify подойдёт тем, кто пишет код на разных языках программирования, для каждого из которых можно задавать собственные настройки.
Beautify, с более чем 5 миллионами загрузок, входит в топ-20 самых популярных расширений.
4. Auto Rename Tag
Расширение Auto Rename Tag решает весьма простую задачу, но, несмотря на это, оно способно занять достойное место в наборе инструментов программиста. А именно, оно автоматизирует задачу переименования HTML-тегов. В частности, если переименовывают открывающий тег, меняется и закрывающий тег. То же самое происходит и при переименовании закрывающего тега.
Если вам нужно, чтобы после ввода скобки, завершающей открывающий тег, автоматически вводился бы закрывающий тег, взгляните на расширение Auto Close Tag. Если у вас есть оба эти расширения, это хорошо поможет вам в написании HTML-кода, сделав ваш труд эффективнее, а результаты вашей работы — единообразнее.
Работа с Auto Rename Tag
5. Quokka.js
Расширение Quokka.js — это нечто вроде «песочницы» для экспериментов с кодом, встроенной прямо в редактор. Она позволяет работать с файлами, выводя соответствующие подсказки непосредственно в коде. Эти подсказки появляются в процессе ввода текста программы, что очень удобно.
Работа с Quokka.js
6. Night Owl
Чего стоит оптимизация VS Code без использования изумительной темы? Программисты проводят очень много времени, работая в редакторе, поэтому — чем привлекательнее выглядит редактор — тем лучше.
Night Owl — это одна из замечательных тем, используемых многими программистами. В описании к ней сказано, что она рассчитана на тех, кто засиживается за компьютером до поздней ночи.
Тема Night Owl
Но если вам эта тема не нравится — ничего страшного. Существует ещё очень много хороших тем, одна из которых вам точно подойдёт.
7. JavaScript (ES6) code snippets
Расширение JavaScript (ES6) code snippets, завершающее этот материал, предлагает разработчику набор сниппетов, которые позволяют быстро создавать современные JavaScript-конструкции.
Например, если, пользуясь этим расширением, ввести clg и нажать Enter — в код попадёт console.log . Для того чтобы освоить все имеющиеся в этом расширении сниппеты может понадобиться некоторое время. Но тот, кто внедрил в работу JavaScript (ES6) code snippets, сможет по-настоящему быстро писать современный JS-код. Это окупает время, потраченное на изучение данного расширения.
Какими расширениями для VS Code пользуетесь вы?
- Блог компании RUVDS.com
- Веб-разработка
- Visual Studio
10 полезных плагинов VS Code для вёрстки
Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.
Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.
HTML Preview
Когда вы готовите разметку по макету, приходится часто переключаться на браузер и проверять, что вы сверстали. Плагин HTML Preview решает эту проблему и экономит массу времени — размеченную страницу видно прямо в окне VS Code, а превью меняется сразу после сохранения HTML-файла.
Чтобы включить предпросмотр, нажмите CTR+K V в Windows или Cmd+K V в OS X.
Live Server
Автоматически перезагружает страницу после изменений в JavaScript-коде, CSS и HTML-разметке. Чтобы запустить, наведите на строчку кода, нажмите на правую кнопку мыши, выберите «Open with Live Server».
Не забывайте отключать плагин с помощью «Stop Live Server».
CSS Peek
Позволяет быстро просматривать CSS-правила, применяемые к различным HTML-элементам. Достаточно кликнуть правой кнопкой мыши на селектор в вашем HTML файле и воспользоваться функцией «Перейти к определению» или «Подсмотреть определение».
Prettier — code formatter
Приводит любой код в нормальный вид за считанные секунды: выставит отступы, перенесёт скобки и сделает другие чудеса, которые помогут коду выглядеть хорошо и единообразно. Комбинация Ctrl+Shift+P отформатирует документ и задаст структуру коду.
Colorize
Показывает цвета в CSS-файлах. Поддерживает CSS-переменные, HSL, RGB/RGBA и HEX-цвета.
Auto rename tag
Автоматически переименовывает парные теги в HTML и JSX. Меняете открывающий тег — меняется и закрывающий. Вся магия на гифке:
Path autocomplete
Показывает возможный путь к файлу в кавычках. Не нужно искать папку вручную, путь будет предложен автоматически.
HTML CSS Support
Когда вы используете много классов и тегов, легко ошибиться и неправильно их написать. Плагин автоматически дополняет название ID или HTML-атрибута для определений, найденных в рабочей области, на которые ссылается link .
Icon Fonts
Фрагменты популярных иконочных шрифтов. Например: Font Awesome, Ionicons, Glyphicons, Octicons, значки Material Design.
Code Time
Отслеживайте прямо в редакторе время написания кода, время встреч, добавив свои данные из Outlook или Google-календаря и тогда всё будет в одном календаре. Наглядно увидите границу между работой и личной жизнью — возможно, стоит уделять работе поменьше времени и отдыхать.
Материалы по теме
- 7 лучших шрифтов для разработчика
- 17 плагинов для JavaScript в VS Code
- 10 библиотек для CSS и JS анимации
- Знакомство с терминалом: 8 главных команд
- Топ-20 лучших плагинов для Figma
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Figma Dev Mode становится платным. Всё пропало?
Если вы всё пропустили, то на днях в Фигме появилась такая плашка:
Коротко: Dev Mode, скоро выходит из бета-версии и станет платным. Dev Mode — это тот новый режим, который умеет удобно сразу показывать весь нужный CSS и свойства в одном месте. Мы уже рассказывали о нём в «Доктайпе».
Но прошло полгода и лавочка закрылась. Отвечаем на самые распространенные вопросы, которые могли у вас появиться (потому что они появились и у нас).
- 30 января 2024
Dev Mode в Figma. Быстрый обзор бета-версии
Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.
Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.
Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.
- 10 августа 2023
Горячие клавиши Figma для быстрой работы
Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.
Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)
Эта комбинация клавиш позволяет вам быстро убрать все лишнее с экрана, чтобы вы могли сосредоточиться на своем дизайне. Или, наоборот, показать все элементы интерфейса, если вам нужно что-то найти или изменить.
Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)
Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.
А если не пользуетесь — попробуйте.
- 7 августа 2023
Старт в Figma для верстальщика
Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.
Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.
- 2 августа 2023
Инструменты для работы со шрифтами
Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.
Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.
- 29 июня 2023
10 горячих клавиш VS Code, которые ускорят вашу работу
Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.
- 13 июня 2023
10 лучших тем для VS Code
VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.
- 11 июня 2023
17 полезных плагинов JavaScript в VS Code
Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.
Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.
- 6 июня 2023
Подборка микроанимаций для фронтенда с CodePen в 2023
⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.
Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.
- 12 апреля 2023
Как собрать проект на Webpack
Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.
Подробнее о Webpack мы писали в другой статье, а пока давайте создадим простой проект, который складывает два числа, а заодно научимся пользоваться Webpack.
- 7 апреля 2023
Настройка 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":
«Print to console» – название сниппета
«prefix» – команда для активации шаблона
«body» – что будет выводиться
$1 – где будет курсор после создания сниппета
$2 – где будет курсор если нажать Tab
Если вы создадите глобальный файл, тогда еще будет «scope», где прописывается поддерживаемый язык для этого сниппета.
Напоследок
Мы рассказали про основные настройки Visual Studio Code для Frontend разработки, но в арсенале редактора еще много сюрпризов и решая различные задачи вы будете узнавать о нем все новое и новое.
Skypro — научим с нуля