Настройка кода Visual Studio для JavaScript

Обновлено: 02.07.2024

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

Я. Введение

Что такое «текстовые редакторы»?

Текстовые редакторы, также называемые редакторами кода, представляют собой приложения, используемые разработчиками для написания кода. Они могут выделить и отформатировать ваш код, чтобы его было легче читать и понимать. Если вы использовали Codecademy, вы уже знакомы с текстовым редактором. Это область, в которой вы пишете свой код.

Использование текстового редактора является частью создания вашей "среды разработки", набора инструментов, которые вы используете для работы над проектами кодирования. Это позволит вам взять то, чему вы научились на Codecademy, и применить это на практике, когда вы работаете над проектами на своем компьютере. Это не только познакомит вас с инструментами, которые обычно используются профессиональными разработчиками, но также означает, что вы выросли как разработчик и готовы начать работать самостоятельно — отличная работа!

Текстовые редакторы, предназначенные для написания кода, имеют ряд преимуществ:

Подсветка синтаксиса для конкретного языка
Автоматический отступ кода
Цветовые схемы в соответствии с вашими предпочтениями и облегчают чтение кода.
Подключаемые модули или дополнительные программы для обнаружения ошибок в коде.
Древовидное представление или визуальное представление папок и файлов проекта для удобной навигации по проекту.
Сочетания клавиш или их комбинации для ускорения разработки

Возможно, вы также читали или слышали об интегрированных средах разработки или «интегрированных редакторах разработки». IDE позволяет не только редактировать, но также компилировать и отлаживать код с помощью одного приложения или интерфейса. Хотя текстовый редактор, который мы рекомендуем, не считается IDE, он имеет множество функций, подобных IDE, которые упрощают жизнь разработчика, не требуя большого количества ресурсов, которые обычно требуются для IDE. Лучшее из обоих миров!

Выбор текстового редактора

На выбор предлагается несколько текстовых редакторов. Например, Visual Studio Code — один из самых популярных текстовых редакторов, используемых разработчиками. (Это Visual Studio Code, а не Visual Studio, который немного отличается. Нам нужен первый, тот, в названии которого есть «Code».) Другими популярными текстовыми редакторами, о которых вы, возможно, слышали, являются Atom и Sublime Text.

Бесплатно
Открытый исходный код (это означает, что код программы можно просматривать, изменять и публиковать)
Функции, подобные IDE
Поддерживается большим сообществом пользователей и Microsoft

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

II. Установка кода Visual Studio

Итак, мы выбрали наш текстовый редактор, теперь нам просто нужно установить его на наш компьютер!

Видеоинструкции

В этом видео показано, как загрузить и установить Visual Studio Code. Письменные инструкции приведены ниже.

Этапы установки

Процесс установки для компьютеров под управлением macOS, Windows и Linux (в частности, Ubuntu и Debian) будет очень похожим, и использование Visual Studio Code на всех них будет одинаковым.

Посетите веб-сайт Visual Studio Code, чтобы загрузить последнюю версию Visual Studio Code.

Вы должны увидеть, что отображается операционная система вашего компьютера, но если она неверна, нажмите стрелку вниз и найдите параметр, соответствующий вашей операционной системе, в раскрывающемся меню, а затем щелкните значок стрелки вниз в разделе «Стабильная».< /p>

Пользователи Windows: будет загружена последняя версия Visual Studio Code в виде файла .exe.

Пользователи Mac: будет загружена последняя версия Visual Studio Code для Mac в виде ZIP-файла.

Пользователи Linux: .deb и .rpm — это разные типы файлов для хранения данных. Мы предлагаем вам скачать файл .deb, чтобы автоматические обновления работали так, как предлагает документация Visual Studio Code.

После завершения загрузки файла Visual Studio Code его необходимо установить. Найдите файл Visual Studio Code в файловом менеджере — программе, позволяющей просматривать файлы и папки на вашем компьютере.

Пользователи Windows: откройте файл .exe, щелкнув его, и запустите программу установки. Продолжайте нажимать «Далее», а затем «Готово».

Пользователям Mac: загруженный ZIP-файл должен находиться в папке «Загрузки». Откройте файл. Если вы видите это сообщение, выберите «Открыть».

Пользователям Linux: загруженный файл должен находиться в папке «Загрузки».

Найдите его в файловом менеджере, дважды щелкните и выберите «Установить» в центре программного обеспечения с графическим интерфейсом или выполните следующие команды по одной в терминале:

Убедитесь, что ваше приложение Visual Studio Code сохранено в месте, где, как вы знаете, вы легко сможете его найти.

Пользователи Windows: он будет автоматически помещен в меню "Пуск".

Пользователи Mac: нажмите и перетащите значок Visual Studio Code из папки "Загрузки" в папку "Приложения".

Пользователи Linux: он должен появиться на панели задач программ.

Вот и все, вы успешно установили текстовый редактор и готовы приступить к написанию кода!

III. Практика: используйте Visual Studio Code для запуска проекта вне платформы

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

Для этого нам понадобится текстовый редактор, который мы установили выше. Давайте на минутку попробуем Visual Studio Code.

Что такое «папки разработки»?

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

Большинство разработчиков хранят свои проекты в удобном для поиска каталоге (который вы, возможно, привыкли называть «папкой»). Здесь, в Codecademy, мы рекомендуем называть этот каталог проектами. Он будет хранить все ваши проекты кодирования. Всякий раз, когда вы создаете новый проект, независимо от того, насколько он мал, вы всегда должны создавать новую папку внутри каталога ваших проектов. Вы обнаружите, что проекты из одного файла могут быстро превратиться в большие проекты с несколькими папками.

Практика: создадим проект

Ниже приведены шаги, которые необходимо выполнить, чтобы создать новую папку для всех ваших программных проектов. Вы также узнаете, как загрузить новую папку проекта в Visual Studio Code и создать свой первый HTML-проект «Hello World».

Мы рекомендуем вам просмотреть приведенное выше видео, а затем выполнить описанные ниже действия.

1. Создайте папку разработки.

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

Пользователи Mac: это может быть ваша учетная запись пользователя или папка «Домашняя».

Пользователи Windows: вы можете сохранить это на диск C.

Пользователям Linux: вы можете сохранить это в папке пользователя в папке «Домашняя».

В папке проектов создайте новую папку с именем HelloWorld. Все, что вы добавите в эту папку, станет частью вашего проекта HelloWorld.

2. Откройте код Visual Studio

3. Откройте папку разработки

Нажмите значок «Проводник» в меню слева, затем нажмите кнопку «Открыть папку» и выберите папку разработки. Это запустит ваш файловый менеджер.

Перейдите к папке HelloWorld и выберите Открыть. Папка откроется на боковой панели Visual Studio Code. На данный момент в папке не должно быть содержимого. Мы добавим файл на следующем шаге.

4. Добавьте файл.

Прежде чем вы научитесь добавлять файлы в папку проекта, важно понять назначение расширений файлов. Расширение файла — это суффикс имени файла (последние 3 или 4 символа в имени файла, которым предшествует точка) и описывает тип содержимого, содержащегося в файле. Например, расширение HTML-файла — .html, и оно указывает браузеру (и другим приложениям) интерпретировать содержимое файла как HTML-документ. После того как Visual Studio Code загрузит папку проекта, вы можете добавлять файлы. Шаги ниже описывают, как добавить файлы. Не беспокойтесь о том, чтобы сделать это на своем собственном компьютере. Мы вернемся к этому позже.

На панели проводника Visual Studio Code щелкните имя папки разработки. Вы увидите четыре значка справа от имени папки. Щелкните значок «Новый файл». Введите имя нового файла с соответствующим расширением (например, .html, .css, .csv). Крайне важно указать правильное расширение файла, чтобы такие программы, как линтеры, знали, как интерпретировать его содержимое. Когда закончите, нажмите Enter.

5. Начинайте программировать!

Скопируйте и вставьте следующий стандартный HTML-код:

Почаще сохраняйте файл с помощью функции автоматического сохранения и отслеживайте изменения с помощью системы контроля версий, если вы знаете, как ею пользоваться. (Чтобы включить автосохранение, нажмите «Файл», а затем «Автосохранение». Когда оно включено, вы увидите галочку рядом с «Автосохранение».) Это уменьшит вероятность потери несохраненной работы.

Расширения файлов и подсветка синтаксиса

Синтаксис – это набор правил, которые говорят нам, как создавать правильно написанный код. Visual Studio Code и другие текстовые редакторы могут интерпретировать расширения файлов и обеспечивать подсветку синтаксиса для конкретного языка. Подсветка синтаксиса — это инструмент, облегчающий чтение кода.Взгляните на свой файл index.html. Текст и теги разного цвета. Вот как Visual Studio Code выделяет синтаксис .html. С каждым новым языком, который вы изучаете, Visual Studio Code будет выделять текст таким образом, чтобы ваш код было легко читать. Это может отличаться от других текстовых редакторов, а также отличаться от того, как ваш код выделяется в Codecademy.

Необязательно: измените цветовую схему

Хотя Visual Studio Code поставляется с подсветкой синтаксиса по умолчанию, вы можете изменить используемые цвета. Хорошие цветовые темы сделают чтение всех этих строк кода легким для ваших глаз. (Попробуйте низкоконтрастные темные темы, такие как «Solarized Dark» или «Dracula Dark».)

Для этого выберите «Цветовая тема» на странице приветствия при первом открытии Visual Studio Code или нажмите «Код» в строке меню в верхней части окна рабочего стола, затем нажмите «Настройки», а затем «Цветовая тема». Вы также можете искать цветовые темы для установки с помощью меню «Расширения».

6. Просмотрите свой HTML-файл в браузере

На этом этапе ваш файл готов для просмотра в веб-браузере. Следующие шаги следует предпринять вне Visual Studio Code:

Перейдите к файлу index.html в папке Hello World с помощью файлового менеджера или терминала.

Дважды щелкните или откройте index.html. Страница должна открыться в веб-браузере по умолчанию. Восхищайтесь своей работой на втором месте — вы создали свой первый проект с помощью Visual Studio Code.

Расширьте возможности Visual Studio Code

Если вы уже освоились с предыдущими шагами, изучите следующие функции для дальнейшей настройки среды разработки. Вам не нужно использовать эти предложения для завершения проектов на Codecademy, но они могут помочь вам повысить эффективность при написании кода, и именно это делает Visual Studio Code таким полезным редактором!

Отладка кода в редакторе: правильно, вы можете запускать и тестировать код из редактора!

Контроль версий: вам не нужно переключаться на терминал на вашем компьютере, чтобы отслеживать изменения с помощью Git.

Встроенный терминал: вы можете запускать команды командной строки из своего редактора с помощью Visual Studio Code.

IV. Подведение итогов

Поздравляем! Вы успешно настроили текстовый редактор и готовы создавать веб-сайты на своем компьютере.

JavaScript – это объектно-ориентированный веб-язык программирования, который используется в веб-браузерах для создания интерактивных эффектов, заставляя нашу веб-страницу действовать и думать. Полная форма IDE представляет собой интегрированную среду разработки и позволяет программистам объединять различные части создания компьютерной программы в одном удобном месте. Он обеспечивает автоматизацию локальной сборки, редактор исходного кода и отладчик. Visual Studio Code — одна из лучших IDE, используемых почти каждым разработчиком JavaScript.

Visual Studio Code поддерживает более 40 языков программирования и представляет собой бесплатный кроссплатформенный текстовый редактор, который в основном используется для клиентской разработки. Это продукт Microsoft, который можно использовать практически во всех основных операционных системах, таких как Linux, Windows и macOS. Visual Studio Code широко используется для разработки JavaScript, так как он легкий, но имеет мощные встроенные функции, такие как IntelliSense (код быстрее, поскольку показывает интеллектуальное завершение кода), форматирование, рефакторинг, навигация по коду, отладка и многое другое.

В этом посте мы рассмотрим, как настроить Visual Studio Code для JavaScript. Давайте сделаем первый шаг — установим Visual Studio Code в Windows.

Установка кода Visual Studio

Чтобы установить Visual Studio Code, сначала нам нужно загрузить его по указанной ниже ссылке:

Посетив указанный выше URL, вы увидите синюю кнопку с надписью «Загрузить для Windows». Нажмите на эту кнопку.

Когда вы нажмете синюю кнопку, начнется загрузка:

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

После этого вы увидите всплывающее окно с лицензионным соглашением для Visual Studio Code. Выберите вариант «Я принимаю соглашение» и нажмите кнопку «Далее»:

Следующее всплывающее окно предназначено для выбора дополнительных задач. Выберите все необходимые параметры и нажмите кнопку «Далее»:

После того, как вы нажмете кнопку "Далее", появится окно "Готово к установке", где вам нужно будет нажать кнопку "Установить":

Начнется установка:

После завершения установки нажмите кнопку "Готово", и ваш код Visual Studio запустится.

Настройка кода Visual Studio

Теперь, когда мы закончили загрузку и установку Visual Studio Code, давайте настроим наш редактор для JavaScript. Первым шагом в настройке кода Visual Studio является установка необходимых расширений, которые помогут нам писать код эффективно и быстро. Значок расширения присутствует слева, как показано на снимке экрана ниже:

Нажав на значок расширения, найдите нужное расширение, которое хотите установить.

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

Найдите Live Server на вкладке расширений и нажмите на указанный ниже значок:

После того, как вы нажмете Live Server, вы увидите вариант установки с правой стороны. Нажмите кнопку установки, чтобы установить Live Server:

Как только вы нажмете кнопку установки, ваш Live Server будет установлен:

Еще одно расширение, которое мы можем установить в Visual Studio Code, — это фрагмент кода JavaScript (ES6), который очень полезен, поскольку это расширение входит в состав многочисленных встроенных фрагментов кода. Процедура установки фрагментов кода ES6 аналогична установке расширения Live Server.

Заключение

JavaScript – это язык веб-программирования, который делает наши веб-приложения и веб-страницы динамичными и интерактивными, давая им возможность думать и действовать. Чтобы кодировать эффективно и быстро, разработчику нужна IDE. IDE — это программное обеспечение, в котором общие инструменты разработчика объединены и доступны в едином графическом интерфейсе. Visual Studio Code — одна из лучших IDE, используемых для JavaScript, которая предлагает мощные инструменты и функции разработки, такие как завершение кода, IntelliSense, отладчик и многое другое.

В этом посте мы настроим Visual Studio Code для JavaScript, сначала загрузив и установив его, а затем установив расширения в Visual Studio Code IDE.

Прежде чем мы начнем, если вы хотите узнать больше о JavaScript или других темах, вам действительно следует проверить SkillShare, вам действительно следует проверить SkillShare. Skillshare — это платформа онлайн-обучения с курсами практически по всему, чему вы хотите научиться. Чтобы узнать больше о Skillshare и его обширной библиотеке курсов и получить скидку 30 %, нажмите на ссылку ниже:

Если вы хотите узнать, как максимально полно использовать массивы в JavaScript, ознакомьтесь с нашим Полным руководством по массивам в JavaScript здесь. Он научит вас всему, что вам нужно знать об эффективном создании, использовании и управлении массивами в JavaScript.

А теперь приступим к обучению!

Можете ли вы кодировать JavaScript на VS Code?

Да, можно! JavaScript — это один из многих языков, которые можно кодировать, отлаживать и запускать в IDE VS Code. В отличие от таких языков, как Python, VS Code имеет встроенный интерпретатор JavaScript, отладчик и расширенные функции, поддерживающие язык. Вы также можете добавить расширения, чтобы расширить возможности или даже изменить их.

Если вы впервые пробуете VS Code для написания программ на JavaScript, вот все, что вам нужно знать о процессе установки и преимуществах кодирования в этой IDE.

Как настроить VS Code для JavaScript?

Поскольку в VS Code уже есть встроенные функции JavaScript, вам не нужно много расширений или пакетов. Однако вы можете улучшить свои навыки кодирования, загрузив и установив пару пакетов, которые вам пригодятся.

Давайте быстро рассмотрим каждый из них, их назначение и конфигурацию (если они есть).

Фрагменты кода JavaScript (ES6)

Хотя JavaScript поставляется со многими встроенными фрагментами кода, это расширение предоставит вам фрагменты для синтаксиса ECMAScript 6 (ES 6). Помимо этого, вы также можете получить фрагменты для Angular 1, Angular 2, JQuery и ReactJ, если они вам нужны для вашей программы.

Вы можете найти расширение ES6 по ссылке ниже:

Кроме того, вы также можете нажать кнопку «Расширения» на левой панели, найти имя и установить его.

ESLint

ESLint позволяет проверять синтаксис, форматировать код и даже видеть проблемы с ним. Это расширение удобно для написания кода, так как вы будете знать ошибки во время написания программы.

Во-первых, вам необходимо загрузить и установить ESLint в вашей системе. Для этого откройте терминал в VSCode и используйте следующую команду:

Это загрузит и установит ESLint в вашей системе, и теперь вам нужно выполнить настройку. Используйте команду ниже:

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

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

Теперь вам нужно установить расширение ESLint из VS Code. Вы можете перейти по ссылке ниже или использовать вкладку «Расширения» на левой панели в VS Code.

Другие рекомендуемые расширения для написания JavaScript в VSCode

Помимо этого, есть несколько других расширений, которые могут быть полезны при написании кода.

Красивее

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

GitLens

Если вы работаете над репозиторием или проектом с несколькими людьми, это расширение позволяет вам сотрудничать и одновременно писать код. Он имеет ряд функций, таких как Авторство кода, Обвинение, Недавние изменения, История и т. д., которые упрощают работу.

REST-клиент

Npm IntelliSense

Это расширение позволяет автоматически заполнять команды импорта npm. Это хорошая функция. Однако обратите внимание, что для этого в вашей системе должен быть установлен NodeJ, чтобы он считывал и интерпретировал эти команды.

Как запустить код JavaScript в VS Code?

Хотя вы можете запускать файлы кода внутри VS Code, лучше иметь расширение Code Runner, поскольку оно помогает запускать файлы кода или активный текст кода непосредственно в редакторе VS Code.

Вы можете перейти по ссылке ниже, скачать и установить расширение:

При запуске программы конфигурация должна знать, где искать исполняющую программу. Для этого выберите Файл -> Настройки -> Настройки -> Настройки рабочей области

Здесь убедитесь, что вы ввели PATH исполнителя в переменную среды, добавив его в блок code-runner.executorMap.

Запуск файла JavaScript внутри VS Code

Создайте новый файл и сохраните его как файл .js
Введите код JavaScript
Сохраните файл
Нажмите кнопку воспроизведения в правом верхнем углу окна VSCode.

Подходит ли код Visual Studio для JavaScript?

Да, это так! Учитывая, что в Visual Studio Code есть почти все встроенные функции и функции JavaScript, вам намного проще писать JavaScript. Кроме того, установка и настройка не занимают много времени, поскольку большая часть этого уже встроена в VSCode.

Однако это не ограничивает вас только этими функциями. Вы можете дополнить их дополнительными расширениями и использовать все возможности редактора кода.

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

В целом VS Code — один из лучших редакторов кода для JavaScript.

VS Code или Atom: какой редактор кода лучше для JavaScript?

Сравнивая два редактора с точки зрения общего опыта кодирования, VS Code лучше, чем Atom, по следующим причинам.

Электронные приложения печально известны своей медленностью, и Atom не является исключением. К сожалению, это не так быстро, как VS Code.

Хотя структура VS Code сочетает в себе встроенные функции и расширения, Atom работает в основном за счет расширений. Для небольших программ идеально подходит Atom, так как вам нужно всего несколько расширений и пакетов, но Atom будет работать медленнее для больших программ, так как вам придется устанавливать слишком много расширений.
Однако с точки зрения дизайна Atom определенно более привлекателен для пользователей. Его пользовательский интерфейс чистый, удобный и нарушает монотонность слишком большого количества кода на экране.

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

Если вы хотите узнать, как настроить Atom для разработки JavaScript, ознакомьтесь с моим Полным руководством по настройке Atom для JavaScript.

Хотите больше советов и рекомендаций? Подпишитесь на нашу рассылку!

Если вы еще не подписались, подпишитесь на информационный бюллетень The Productive Engineer.Он наполнен советами и рекомендациями о том, как получить максимальную отдачу от приложений для повышения производительности, которые вы используете каждый день. Мы ненавидим спам так же сильно, как и вы, и обещаем присылать вам только то, что, по нашему мнению, поможет вам добиться цели.

Посетите наш канал на YouTube!

Теперь у нас есть канал на YouTube, и мы прилагаем все усилия, чтобы наполнить его советами, рекомендациями, инструкциями и учебными пособиями. Нажмите на ссылку ниже, чтобы проверить это!

Используете ли вы один и тот же пароль для нескольких сайтов? У вас есть проблемы с запоминанием всех ваших паролей? Вы должны попробовать 1Password! 1Password безопасен и позволяет безопасно входить на сайты и заполнять формы одним щелчком мыши. Я использую 1Password для всех своих паролей, и это действительно упрощает управление всеми моими паролями.

Чтобы получить дополнительную информацию о 1Password и получить 30-дневную бесплатную пробную версию, перейдите на страницу 1Password по ссылке ниже:

Посетите нашу страницу ресурсов

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

Хотите начать вести блог или на YouTube?

Начало работы может показаться сложным и пугающим (я знаю, что это было для меня), но это не обязательно так. Мне очень повезло найти программу, которая помогла мне увеличить количество просмотров страниц моего блога до более чем 35 000, а также канал YouTube, который растет с каждым месяцем.

Project 24 от Income School — это программа, которую я использовал. Я являюсь участником уже больше года и только что обновил свое членство. Я не могу рекомендовать Project 24 достаточно! Для получения дополнительной информации о Income School нажмите на ссылку ниже:

Чт Нгхием

Visual Studio Code стал самым популярным редактором исходного кода. Он легкий, но мощный и, без сомнения, мой фаворит.

В этой статье я расскажу вам, как начать работу и настроить VS Code для веб-разработчиков.

Вот видео, которое вы можете посмотреть, если хотите дополнить эту статью:

Видео по настройке кода VS

Введение в VS Code

Загрузить код Visual Studio

Вкладка приветствия VS Code

После того как вы установите и откроете его, первое, что вы увидите, — это вкладка «Добро пожаловать». Здесь вы найдете 5 разделов:

Вкладка "Приветствие"

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

Недавние: вы можете найти все недавно открытые папки

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

Настройка. Вы видите, что можете устанавливать настройки и сочетания клавиш из других редакторов кода, таких как Vim или Atom. Так что, если вы уже привыкли использовать эти редакторы, вы можете проверить их.

Но что мы хотим изучить, так это цветовую тему. Если вы выберете его, вы увидите, что есть список тем на выбор. Вы также можете использовать клавиши со стрелками вверх и вниз для предварительного просмотра тем. Но моя любимая тема — это тема по умолчанию, поэтому я ее и оставлю.

Цветовая тема

Обучение: здесь вы найдете 3 варианта. Первым пунктом в списке является «Найти и выполнить все команды». При этом мы можем найти и запустить все доступные команды. Мы будем использовать это часто, поэтому я рекомендую вам запомнить сочетание клавиш, а именно Command/Control + Shift + P .

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

Обзор интерфейса

Последний вариант — это игровая площадка интерактивного редактора. Здесь вы можете найти основные функции VS Code с инструкциями и примерами.

Давайте выберем, например, Эммета. С помощью Emmet мы можем писать ярлыки, а затем превращать их в фрагмент кода.

Скажем, например, что мы хотим создать элемент неупорядоченного списка с 3 элементами внутри, и каждый элемент имеет имя класса "фрукты". Мы можем ввести ul>li.fruit*3 и нажать Tab .

Эммет в интерактивном редакторе Playground

Вы также можете видеть, что в существующем примере ( ul>li.item$*5 ) они попытались создать элемент неупорядоченного списка и 5 элементов с именем класса элемента внутри. Но имя класса также имеет нумерацию:

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

Хорошо, я рекомендую вам проверить все эти функции. Их очень много, и ничего страшного, если вы сейчас не все понимаете. Вы всегда можете вернуться в будущем.

Проводник файлов VS Code

Затем перейдите в Проводник, выбрав первую вкладку на боковой панели навигации или нажав Command/Control + Shift + E .

Здесь вы можете открыть существующую папку, но давайте создадим новую папку и новый файл. Вместо открытия нового окна давайте откроем терминал в VS Code. Вы можете выбрать кнопку ошибки и предупреждения в строке состояния, а затем выбрать вкладку «Терминал» или использовать сочетание клавиш Control + ` .

Сейчас я нахожусь в своем домашнем каталоге. Давайте создадим новую папку, набрав mkdir vscode-tutorials и зайдем в нее с помощью cd vscode-tutorials .

Теперь мы хотим открыть эту папку, поэтому мы можем нажать кнопку открытия папки и перейти к каталогу папки, но это много работы. Поэтому вместо этого в терминале мы можем сказать code . . Теперь вы можете столкнуться с ошибкой: bash: code: command not found .

Терминал в VS Code

Чтобы исправить это, мы можем открыть палитру команд и найти команду Shell Command: Install code в пути и выбрать ее. Теперь, если мы вернемся к терминалу и наберем код. , откроется новое окно VS Code с созданной папкой.

Хорошо, теперь мы хотим создать новый файл. В разделе папки мы можем щелкнуть значок нового файла или щелкнуть правой кнопкой мыши и выбрать новый файл. Назовем файл index.html, внутри него напечатаем восклицательный знак (!) и нажмем tab или enter. С Emmet он создаст HTML-шаблон.

Генерация HTML с помощью Emmet в VS Code

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

Это очень полезная функция VS Code. Но мы не хотим постоянно искать Format Document и хотим, чтобы он форматировался всякий раз, когда мы сохраняем файл.

Вы также заметили, что отступ теперь равен 4 пробелам, что, на мой взгляд, многовато. Итак, давайте изменим его на 2. А для этого мы можем перейти в настройки или использовать сочетание клавиш Command/Control + , .

На вкладке «Часто используемые» мы можем изменить размер вкладки на 2, а в разделе «Текстовый редактор/форматирование» мы можем выбрать «Форматировать при сохранении». Теперь при каждом сохранении файлы будут правильно отформатированы.

Расширения кода VS

Последнее, что я хочу показать вам, это расширения. Вы можете выбрать вкладку расширений на боковой панели навигации или с помощью сочетания клавиш: Command/Control + Shift + X .

Здесь мы можем отфильтровать расширения, например, по самым популярным или рекомендуемым.

Есть множество расширений на выбор. Но первое расширение, которое нам нужно установить, это Live Server. При этом у нас может быть локальный сервер, который перезагружает статические веб-страницы.

Live Server Extension

Например, если мы перейдем к нашему index.html, откроем палитру команд и найдем Live Server: Open with Live Server, вы увидите, что открывается новая вкладка в браузере.

И если мы создадим новый элемент в нашем HTML, например

Заключение

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

Я уверен, что теперь, благодаря этому введению и руководству по установке, вы готовы начать свой путь веб-разработки.

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

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