Не работает css в visual studio code

Обновлено: 05.07.2024

Форматирование кода доступно в Visual Studio Code с помощью следующих ярлыков:

В Windows Shift + Alt + F
На Mac Shift + Option + F
В Ubuntu Ctrl + Shift + I

Кроме того, вы можете найти ярлык, а также другие ярлыки, с помощью функции поиска, предоставленной в редакторе с помощью Ctrl + Shift + P (или Command + Shift + P на Mac), а затем поиск формат документа.

Ответ 2

Ярлык форматирования кода:

Код Visual Studio в Windows - Shift + Alt + F

Код Visual Studio в MacOS - Shift + Option + F

Код Visual Studio в Ubuntu - Ctrl + Shift + I

Вы также можете настроить этот ярлык, используя настройки предпочтений, если это необходимо.

Форматирование кода при сохранении файла:

Visual Studio Code позволяет пользователю настраивать параметры по умолчанию.

Если вы хотите автоматически отформатировать содержимое во время сохранения, добавьте приведенный ниже фрагмент кода в настройках рабочего пространства кода Visual Studio.

Файл меню → Настройки → Настройки рабочего пространства

Примечание: теперь вы можете автоматически форматировать файлы TypeScript. Проверьте мое обновление.

Ответ 3

Вы можете добавить связывание клавиш в меню Файл → Настройки → Сочетания клавиш.

Или Visual Studio, как:

Ответ 4

Щелкните правой кнопкой мыши файл
Выберите "Формат документа" ( Alt + Shift + F или Alt + Shift + I в Linux) из окна меню.

Ответ 5

Правильная комбинация клавиш - Shift + Alt + F .

Ответ 6

Также обратите внимание, что на сегодняшний день форматирование доступно для следующих языков:

Ответ 7

Нажмите File → Preferences → Keyboard shortcuts .
В разделе " Default Keyboard Shortcuts найдите ( Ctrl + F ) editor.action.format .

Мой читал "key": "ctrl+shift+i"

Вы также можете изменить это. Обратитесь к этому ответу о том, как. или если вам немного лень прокручивать вверх:

Вы можете добавить связывание клавиш в "Preferences-> Сочетания клавиш"

Или Visual Studio, как:

Обратите внимание: клавиша cmd предназначена только для компьютеров Mac. Для Windows и Fedora (клавиатура Windows) используйте Ctrl

РЕДАКТИРОВАТЬ:

Согласно Visual Code версии 1.28.2 это то, что я нашел.

editor.action.format больше не существует. Теперь он был заменен editor.action.formatDocument и editor.action.formatSelection .

Введите editor.action.format в поле поиска, чтобы просмотреть существующие ярлыки.

Чтобы изменить комбинации клавиш, выполните следующие действия:

Нажмите editor.action.formatDocument или editor.action.formatSelection
Слева появляется значок, похожий на перо - щелкните по нему.
Появится всплывающее окно. Нажмите нужную комбинацию клавиш и нажмите ввод.

Ответ 8

В Linux это Ctrl + Shift + I .

В Windows это Alt + Shift + F , Протестировано с HTML/CSS/JavaScript и Visual Studio Code 1.18.0.

Для других языков вам может потребоваться установить определенный языковой пакет.

Ответ 9

Visual Studio Code 1.6.1 поддерживает функцию "Форматировать при сохранении", которая автоматически выбирает соответствующие установленные расширения форматирования и форматирует весь документ при каждом сохранении.

Включите "Формат при сохранении", установив

И есть доступные сочетания клавиш (Visual Studio Code 1.7 и выше):

Отформатируйте весь документ: Shift + Alt + F

Только выбор формата: Ctrl + K , Ctrl + F

Ответ 10

На Ubuntu это Ctrl + Shift + I .

Ответ 11

Просто щелкните правой кнопкой мыши по тексту и выберите "Формат кода".

Visual Studio Code использует js-beautify внутри, но ему не хватает возможности изменить стиль, который вы хотите использовать. Расширение "украсить" позволяет добавлять настройки.

Ответ 12

По какой-то причине Alt + Shift + F у меня не работали в Mac Visual Studio Code 1.3.1, и фактически команда "Форматировать документ" вообще не работала. Но команда Formatter сработала очень хорошо.

Таким образом, вы можете использовать Command + Shift + P и набрать Formatter или создать свой собственный ярлык в меню Файл → Настройки → Сочетания клавиш → Command + K Command + S , затем ввести Formatter и Добавьте свой ярлык.

Ответ 13

Shift + Alt + F отлично справляются со своей задачей в 1.17.2 и выше.

Ответ 14

Форматирование кода в Visual Studio.

Я пытался отформатировать в Windows 8.

Просто следуйте скриншотам ниже.

Нажмите "Вид" в верхней строке меню, а затем нажмите "Палитра команд".

Тогда появится текстовое поле, где нам нужно типа Формат

Ответ 15

В коде Visual Studio Shift + Alt + F делает то, что делает Ctrl + K + D в Visual Studio.

Ответ 16

До того, как я установил Mono, ярлык автоформатирования ( Shift + Alt + F ) работал только для файлов .json .

Ответ 17

На Mac у меня работает Shift + Alt + F .

Вы всегда можете проверить привязки клавиш в меню:

Файл меню → Настройки → Сочетания клавиш и фильтр по ключевому слову "формат".

Ответ 18

Файл меню & rarr; Настройки & rarr; Настройки

Когда вы вводите точку с запятой, она будет отформатирована.

В качестве альтернативы вы также можете использовать "editor.formatOnSave": true .

Ответ 19

Уровень рабочего пространства

Выгоды

Не требует расширения
Может быть разделен между командами

Результаты

.vscode/settings.json создается в корневой папке проекта

Как?

Перейдите: Файл меню → Настройки → Настройки рабочего пространства.

Добавьте и сохраните "editor.formatOnType": true в settings.json (который переопределяет поведение по умолчанию для проекта, над которым вы работаете, создавая файл .vscode/settings.json).

Уровень пользовательской среды

Выгоды

Не требует расширения
Личная среда разработки настраивается, чтобы управлять ими всеми (настройки :))

Результаты

Пользователь settings.json изменен (см. Расположение в зависимости от операционной системы ниже)

Как?

Перейдите: меню Файл → Настройки → Настройки пользователя.

Добавьте или измените значение "editor.formatOnType": false на "editor.formatOnType": true в пользовательских настройках .json

Ваше местоположение пользователя settings.json кода Visual Studio:

Расположение файла настроек в зависимости от вашей платформы, файл настроек пользователя находится здесь:

Windows: %APPDATA%\Code\User\settings.json
Mac: $HOME/Library/Application Support/Code/User/settings.json
Linux: $HOME/.config/Code/User/settings.json Файл $HOME/.config/Code/User/settings.json рабочей области находится в папке .vscode в вашем проекте.

Более подробную информацию можно найти здесь.

Ответ 20

В ключевых привязках существует формат Shift + Alt + f
но для С++ он не работает (как и 16 мая), поэтому теперь переключился на net beans.

Ответ 21

По умолчанию этот ключ не работал для меня в документах HTML, CSS и JavaScript.

После поиска я нашел популярный плагин JS-CSS-HTML Formatter с 133 796 установками.

После установки просто перезагрузите окна и нажмите Ctrl + Shift + F , и это сработало!

Ответ 22

Выделите текст, щелкните правой кнопкой мыши на выделении и выберите опцию "Палитра команд":

Откроется новое окно. Ищите "формат" и выберите вариант, форматирование которого соответствует требованию.

Ответ 23

Просто установите Visual Studio Keymap от Microsoft. Задача решена. :п

Ответ 24

В Mac используйте ⌘ + K , а затем ⌘ + F .

Ответ 25

Простейший способ, которым я пользуюсь в Visual Studio Code (Ubuntu):

Выделите текст, который вы хотите отформатировать с помощью мыши.

Щелкните правой кнопкой мыши и выберите "Выбор формата".

Ответ 26

Если вы хотите настроить стиль форматированного документа, вы должны использовать расширение Украсить.

Обратитесь к этому снимку экрана:

Ответ 27

Для тех, кто хочет настроить файлы JavaScript для форматирования, вы можете использовать любое расширение в свойстве JSfiles . То же самое относится и к HTML.

Это включит украшение при сохранении для TypeScript, и вы можете добавить XML в опцию HTML.

Ответ 28

Форматирование не будет доступно, пока вы не установили соответствующий плагин и не сохранили файл с соответствующим расширением.

Ответ 29

Не этот. Использовать этот:

Файл меню → Настройки → Настройки рабочего пространства, "editor.formatOnType": true

Ответ 30

Включает автоматическое форматирование кода при сохранении файла.

Запустите Visual Studio Code и Quick Open ( Ctrl + P ), вставьте следующую команду и нажмите Enter .

Visual Studio Code или просто VS Code – это бесплатный, популярный и имеющий множество дополнений текстовый редактор, который в первую очередь предназначен для создания и отладки современных веб- и облачных приложений.

Разработан он компанией Microsoft и доступен для операционных систем Windows, MacOS и Linux.

Распространяется данная программа бесплатно, исходный код её доступен на GitHub.

VS Code поддерживает большое количество языков программирования, включает в себя отладчик, средства для работы с Git, подсветку синтаксиса, технологию автодополнения IntelliSense, инструменты для рефакторинга, терминал и многое другое.

VS Code является достаточно гибким инструментом, расширяемым с помощью плагинов, доступных на Visual Studio Marketplace. Открыть панель с расширениями в программе можно через комбинацию клавиш Ctrl+Shift+X .

Плагинов для Visual Studio Code очень много, но в рамках этой статьи рассмотрим только наиболее популярные из них. В VS Code уже встроен такой плагин как Emmet. Если вы не знакомы с ним, то он предназначен для быстрого набора кода. Дополнительно его устанавливать не нужно.

Установка VS Code

Для установки VS Code на компьютер необходимо перейти на этот сайт. После этого на странице выбрать вашу операционную систему и нажать на значок "Загрузки". После завершения скачивания программы установить её себе на компьютер.

Чтобы лучше ориентироваться в программе вы можете установить языковый пакет для русского языка. Для этого откройте панель «Расширения» ( Ctrl+Shift+X ) и введите в ней текст «Russian Language Pack for Visual Studio Code». После этого выберите его в результатах поиска и установите его.

В Visual Studio Code имеется огромное количество различных плагинов кроме языковых пакетов. Предназначены они для расширения функциональности этого редактора. Все плагины для этого редактора размещены на Marketplace.

Общая настройка VS Code

VS Code содержит большое количество настроек, с помощью которых вы можете настроить этот редактор под себя.

Изменение настроек в VS Code осуществляется в соответствующем окне. Открыть его можно несколькими способами:

через комбинацию клавиш Ctrl+, ;
через пункт меню «Файл -> Настройки -> Параметры» (в версии на английском языке «File -> Preferences -> Settings»);
нажать на значок шестерёнки и выбрать в открывшемся меню пункт «Параметры» (Settings).

Список параметров, которые пользователи наиболее часто настраивают:

Изменять настройки можно как глобально, так и конкретно для текущего проекта. Изменение глобальных настроек осуществляется в окне «Параметры» на вкладке «Пользователь». Эти настройки сохраняются в файл «settings.json». Открыть его можно нажав на значок «Открыть параметры (JSON)».

Пример файла «settings.json»:

Кстати, изменять настройки также можно просто посредством редактирования этого файла.

Сохранение настроек для рабочей директории выполняется в специальный файл «settings.json», который будет добавлен в папку «.vscode». Настройка параметров для рабочей директории (проекта) можно также выполнить просто посредством редактирования этого файла.

Настройка VS Code для HTML и CSS

Visual Studio Code обеспечивает базовую поддержку при написании HTML и CSS из коробки. Имеется подсветка синтаксиса, умные дополнения с IntelliSense и настраиваемое форматирование. VS Code также имеет отличную поддержку Emmet.

Зачем нужен Emmet? Он позволяет очень быстро писать код.

Например, Emmet аббревиатура ul>li*3>span.item-$ после нажатии клавиши Tab создаст следующий код:

В CSS аббревиатура Emmet как dn создаст код display: none .

VS Code имеет встроенные средства для форматирования кода. Настроить параметры форматирования можно в настройках. Находятся они в разделах «Расширения -> HTML» и «Расширения -> CSS».

Комбинация клавиш для выполнения форматирования в VS Code: Shift+Alt+F .

Функциональность VS Code при работе с HTML и CSS можно улучшить с помощью расширений.

Вот перечень некоторых из них:

Auto Rename Tag – автоматически изменяет имя закрывающего тега при переименовывании открывающегося;
Auto Close Tag – автоматически добавляет закрывающий HTML/XML тег при вводе закрывающей скобки открывающегося тега (кроме HTML, это дополнение добавляет эту возможность в JavaScript и многие другие языки);
HTMLHint – плагин для статического анализа HTML кода;
HTML CSS Support - поддержка CSS для документов HTML;
IntelliSense for CSS class names in HTML - плагин для предложения вариантов завершения имени CSS класса в HTML на основе определений, найденных им в вашем рабочем пространстве;
Autoprefixer - для автоматического добавления CSS свойств с префиксами;
CSS Peek - позволяет посмотреть свойства, прикреплённые к классу или идентификатору без переключения на CSS файл, в котором они описаны;
Prettier - Code formatter - для форматирования кода (HTML, CSS, JavaScript и др.);

Настройка VS Code для разработки на JavaScript

Разработку веб-проекта в Windows 10 можно ввести не только с использованием программ, предназначенных только для этой операционной системы, но и посредством WSL (Linux). Если вам нравится Linux и вы хотите его использовать, то Windows 10 позволяет вам это сделать из коробки (то есть непосредственно из дистрибутива). В следующем разделе приведена инструкция по установке WSL в Windows 10 и настройке Visual Studio Code для её использования в качестве среды разработки.

Кроме этого, ОС Linux в большинстве случаев - это система, которая затем у вас будет установлена на продакшене. А это значит, что вы получите окружение как на сервере или более близкое к этому.

Если вы не хотите использовать WSL в качестве среды разработки или работаете в другой операционной системе, то в этом случае можете сразу же перейти к разделу «Установка и настройка ES Lint».

Как в Windows 10 установить WSL и использовать её в VS Code

Коротко о подсистеме Windows для Linux (WSL). В Windows 10 появилась возможность осуществлять веб-разработку прямо в среде на основе Linux. Для этого вам необходимо просто включить компонент Windows 10 «Подсистема Windows для Linux (WSL)» и установить из Microsoft Store «любимый» дистрибутив Linux (например, Ubuntu 18.04). Подсистема WSL появилась в Windows 10, начиная с обновления «Anniversary Update» (1607), а версия 2004 этой ОС уже включает WSL 2.

Более подробно процесс установки WSL описан в этой статье, а именно в разделах «Включение подсистемы Windows для Linux» и «Установка приложения «Ubuntu». Если вы ещё не читали эту статью, то можете это сделать, перейдя по представленной выше ссылке.

Установка расширения «Remote – WSL» в VS Code. Для использования WSL в качестве среды для полной разработки прямо из VS Code необходимо установить расширение «Remote – WSL».

Это позволит вам ввести веб-разработку прямо в среде на основе Linux, использовать специфичные для неё наборы инструментов и утилит, а также запускать и отлаживать свои приложения в Linux, не выходя при этом из Windows.

Это расширение позволит выполнять команды непосредственно в WSL, а также редактировать файлы, расположенные в WSL или в смонтированной файловой системе Windows (локальные диски находятся в /mnt ) не беспокоясь о проблемах с совместимостью.

После установки расширения и перезагрузки редактора VS Code у вас появится индикатор WSL в нижнем левом углу окна программы.

При нажатии на него вам будут показаны команды Remote-WSL. Используя их, вы можете открыть новое окно VS Code, в котором в качестве среды будет использоваться WSL. При этом команда «Remote-WSL: New Window» выполнит это с использованием дистрибутива Linux, который у вас назначен по умолчанию, а команда «Remote-WSL: New Window using Distro. » - используя конкретный дистрибутив Linux из установленных.

Версия дистрибутива Linux, которая сейчас используется в WSL отображается в индикаторе следующим образом:

Установка и настройка ESLint

ESLint – это инструмент, который крайне желательно установить в систему, если вы разрабатываете код на JavaScript. Он будет показывать вам ошибки в коде, а также направлять вас при его написании так, чтобы он был выдержан в едином стиле.

Перед тем как переходить к установке ESLint сначала инсталлируем в ОС «Node.js v12.x».

В Ubuntu это осуществляется следующим образом:

Проверить номер установленной версии «Node.js» можно так:

После установки «Node.js» создадим папку для проекта в файловой системе ОС, а затем откроем её с помощью VS Code.

Создание проекта обычно начинается с его инициализации посредством npm. Этот процесс можно выполнить посредством следующей команды:

В результате выполнения этой команды у вас появится файл «package.json». Этот файл кроме информации о проекте и других вещей, ещё будет содержать набор зависимостей для данного проекта. Имея этот файл, мы сможем при необходимости очень быстро развернуть проект на любом другом компьютере.

Теперь перейдём к установке ESLint и некоторых других npm пакетов в проект:

Ключ --save-dev используется для того чтобы сделать запись об этих пакетах в «package.json». Данный ключ добавит их в секцию devDependencies .

Установка npm пакетов осуществляется в папку «node_modules» этого проекта.

В качестве стиля кода мы будем использовать Airbnb . Это руководство используется многими известными организациями и имеет очень большое количество звёзд на GitHub.

Для того, чтобы можно было использовать Airbnb для расширения базовой конфигурации ESLint мы установили пакеты eslint-config-airbnb-base (без зависимостей от React) и eslint-plugin-import (для поддержки синтаксиса импорта/экспорта ES6+ и предотвращения проблем с неправильным написанием путей к файлам и имен импорта).

После окончания загрузки пакетов приступим к интегрированию ESLint в Visual Studio Code. Осуществляется это посредством установки расширения с одноимённым названием.

Конфигурационный файл необходим для задания настроек, в соответствии с которыми ESLint будет осуществлять проверку JavaScript кода.

Чтобы сделать это самостоятельно нам необходимо в корне проекта создать файл .eslintrc и добавить в него, например, следующие данные:

Эти данные будут определять следующие настройки для ESLint:

env - это свойство, которое определяет среды, в которых JavaScript должен работать. Для фронтенда средой выступает браузер, поэтому добавим в env свойство "browser": true . Свойство "es6": true предназначено для автоматического включения синтаксиса ES6.
extends - предназначен для указания конфигурации, с помощью которой мы хотим расширить общую конфигурацию ESLint. В качестве значения extends укажем конфигурацию airbnb-base (без React). При необходимости можно указать не одну, а несколько конфигурации. В этом случае каждая следующая конфигурация будет расширять предыдущую. Т.е. если мы укажем какую-то конфигурацию после airbnb-base , то она будет уже расширять не общую конфигурацию ESLint, а airbnb-base ;
parserOptions - позволяет задать параметры языку JavaScript, которые мы хотим поддерживать. В настоящее время рекомендуется использовать при разработке проектов синтаксис ECMAScript 6. Указание поддержки этой версии осуществляется посредством задания ключу ecmaVersion значения 6. При необходимости вы можете указать вместо этой другую версию.

Если вам необходимо дополнительно линтить ошибки кода, размещенного в теге <script>, то установите плагин eslint-plugin-html :

Форматирование кода JavaScript будем выполнять с помощью Prettier. Для правильной совместной работы Prettier и ESLint установим следующие npm пакеты:

Для того чтобы ESLint не просматривал определённые папки и не выдавал по ним ошибки следует создать файл .eslintignore и прописать их в нём:

Если у вас включено стандартное форматирование кода в VS Code при сохранении, то чтобы в качестве плагина для форматирования js файлов применялся ESLint, следует в конфигурационный файл «settings.json» добавить следующее:

Теперь, ESlint будет проверять JavaScript код и показывать в нём ошибки и предупреждения. Они будут помечаться с использованием волнистых линий.

Результат проверки JavaScript кода ESLint:

Дополнительная настройка VS Code

Вот ещё некоторый список плагинов для VS Code, которые могут расширить возможности Visual Studio Code для фронтенд разработки и не только:

Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.

При написании мы использовали Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

В этом мануале вы узнаете, как создать все папки и файлы, необходимые для сборки вашего тестового веб-сайта CSS.

С помощью редактора кода вы создадите каталог проекта, каталог и файл для кода CSS, файл для кода HTML и папку для изображений. В этой серии мануалов используется Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux, но вы можете использовать редактор кода, который вам нравится больше. Обратите внимание: если вы используете другой редактор, вам нужно будет откорректировать некоторые инструкции мануалов.

Создание файлов и папок HTML и CSS

Запустив текстовый редактор, откройте новую папку для нашего проекта и назовите ее css-practice. Мы будем использовать эту папку для хранения всех файлов и папок, созданных в ходе выполнения этой серии мануалов.

Чтобы создать новую папку проекта в редакторе Visual Studio Code, перейдите к пункту File в верхнем меню и выберите Add Folder to Workspace. В новом окне нажмите кнопку New Folder и создайте новую папку по имени css-practice.

Затем создайте новую папку внутри css-practice и назовите ее css. Внутри этой папки откройте новый файл и сохраните его как styles.css – это файл, который вы будете использовать для хранения правил стилей CSS. Если вы используете Visual Studio Code, вы можете создать новую папку, щелкнув правой кнопкой мыши (в Windows) или нажав CTRL+левая кнопка мыши (на Mac) в папке css-practice, затем выберите New File и создайте папку css. Затем кликните правой кнопкой мыши (в Windows) или нажмите CTRL+левая кнопка (в Mac) в папке css, выберите New File и создайте файл styles.css.

Сохраните файл и оставьте его открытым.

Вам также необходимо создать файл для добавления контента HTML – текста, изображений и HTML-элементов, которые будут отображаться в браузере. В каталоге проекта css-practice откройте еще один новый файл и сохраните его как index.html (так же, как вы создали файл styles.css ранее). Обязательно сохраните этот файл index.html в папке css-practice, а не в папке css.

Затем вам нужно добавить в файл index.html строку кода, которая скажет браузеру использовать файл styles.css в качестве таблицы стилей сайта. Для этого вам понадобится HTML-тег <link> и ссылка на файл styles.css. Добавьте следующий фрагмент кода в свой HTML-документ:

Благодаря этому фрагменту кода браузер будет интерпретировать HTML-код в соответствии с таблицей стилей, расположенной в css/styles.css. На протяжении всей этой серии мануалов будьте внимательны, чтобы случайно не удалить эту строку при изменении кода в файле index.html. Сохраните файл index.html и оставьте его открытым.

Теперь создайте дополнительную папку внутри css-practice и назовите ее images. В этой папке вы сохраните все изображения, которые будете использовать при выполнении этой серии мануалов.

Теперь у вас должна быть папка проекта css-practice, содержащая папки и файлы, необходимые для нашего сайта CSS:

Папка по имени css содержит файл styles.css.
Пустая папка images.
Файл index.html

Если вы используете Visual Studio Code, ваш редактор должен теперь отображать следующее дерево файлов:

Обратите внимание, что имена файлов включают расширения (.html и .css), которые указывают на тип их содержимого. В следующих мануалах этой серии мы добавим контент в эти файлы.

Отладка и устранение неполадок CSS и HTML

При работе с HTML и CSS важна точность. Даже лишний пробел или неправильно введенный символ могут помешать вашему коду работать должным образом.

Если ваш код HTML или CSS не отображается в браузере так, как вы ожидаете, убедитесь, что вы написали код в точности так, как показано в мануале. В целом мы рекомендуем вам вводить код в файлы вручную – так он лучше запоминается, но иногда полезно скопировать и вставить его, чтобы убедиться, что в не мнет ошибки.

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

Краткое примечание по автоматической поддержке HTML

Некоторые редакторы кода (к ним относится и Visual Studio Code который мы используем в этой серии) предоставляют автоматическую поддержку написания HTML. В Visual Studio Code эта поддержка подразумевает умные подсказки и автозавершение кода. Эта функция бывает полезной, но будьте с ней осторожны: если вы не привыкли работать с ней, вы можете сгенерировать дополнительный код, который вызовет ошибки. Если эти подсказки вас отвлекают, вы можете отключить их в настройках редактора кода.

Заключение

Теперь вы готовы приступить к разработке вашего тестового сайта. В следующем мануале мы покажем, как использовать правила CSS для управления стилем и макетом 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 и запустите его снова.

Установка

Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.

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

Давайте создадим тестовый проект для нашей страницы.

Допустим, все проекты у нас будут храниться в папке d:\html

Откроем консоль cmd.exe и введем команды:

Откроется новое окно 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

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

Давайте добавим текст на страницу:

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

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

Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server

Я расположил окна рядом, для большей наглядности.

Давайте добавим еще одну строку в html-файл:

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

Заключение

Сегодня мы рассмотрели настройку среды разработки VSCode для разработки HTML-страниц.

Мы установили расширения Browser Preview и Live Server.

Создали тестовую страницу.

Настроили профиль для запуска нашей страницы в Browser Preview.

Открыли нашу страницу во вкладке Browser Preview и протестировали автоматическое обновление содержимого вкладки при обновлении содержимого HTML-страницы.

Протестировали обновление страницы в Google Chrome при обновлении содержимого файла.

В следующей статье мы рассмотрим настройку VSCode для разработки на языке программирования PHP.

Читайте также: