Ваш новый лучший друг.

Ух! Мы добились хороших успехов с начала этой серии. На нашей странице теперь есть текст, несколько ссылок, изображение, может быть, даже несколько GIF-файлов, если вы немного поэкспериментировали в предыдущем посте!

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

Редактор кода?

Подожди ... зачем мне еще один?

Мы скоро к этому вернемся. Помните код с прошлого раза?

<html>
  <body>
    <h1>Awesome blog!</h1>
    <p>Hello, reader. This is my first post on this great blog. I hope you'll like it!</p>
    <p>And since you like paragraphs so much, here's another one!</p>
    <h2>List of badass comics characters</h2>
    <ul>
      <li>Batman</li>
      <li>Batman</li>
      <li>Batman</li>
      <li>Bruce Wayne</li>
      <li>Batman</li>
    </ul>
    <a href="http://www.medium.com">This is a link to the Medium homepage</a>
    <p>
      <img src="images/great_photo.jpg">
    </p>
  </body>
</html>

Это начинает выглядеть немного неаккуратно, не так ли? На этом этапе даже не так много строк, и его уже трудно читать. Если вы кодируете с помощью Блокнота с начала серии, он выглядит примерно так же. За исключением того, что он черный на белом, а не на сером.

Что, если бы я сказал вам, что ваш код может выглядеть так:

Выглядит намного яснее, а? Теги имеют зеленый цвет, что помогает вашим глазам легко отличить их от содержимого, которое отображается черным цветом. Имена атрибутов (например, href и src) выделены фиолетовым цветом, а их значения - темно-синим.

В качестве бонуса ваши линии даже пронумерованы! Это пригодится в будущем. Прямо сейчас не так уж и много. Но все равно! ЧИСЛА!

ЧТО ЭТО И КАК ЭТО ПОЛУЧИТЬ?

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

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

Есть много редакторов, которые вы можете скачать. Некоторыми известными из них являются Vim, Emacs, Notepad ++, Sublime Text, Atom и Visual Studio Code. Есть много других. Между разработчиками также ведутся бесконечные споры о том, какой из них лучший. Дело в том, что в Википедии есть настоящая страница под названием Война редакторов. Речь идет о Emacs vs. Vim.

Я сам использую Visual Studio Code (VS Code). Это от Microsoft, и это действительно здорово. Хороший компромисс между количеством функций и скоростью. С этого момента в этом посте я буду использовать VS Code. Я проведу вас через его установку, и мы начнем использовать его вместе.

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

Введение в код Visual Studio (редакторы кода 101)

Установка

Хорошо, ты готов? Вот так.

Перейдите на https://code.visualstudio.com/.

Нажмите большую кнопку «Загрузить для Windows» (если вы используете macOS или Linux, на кнопке, вероятно, будет написано что-то вроде «Загрузить для Mac» или «Загрузить для Linux»).

Через несколько секунд вы сможете сохранить файл на свой диск. После завершения загрузки откройте файл. Нажмите «Далее», примите условия лицензии, которую вы, конечно же, полностью прочитали, а затем вы можете нажимать «Далее» на каждом шаге. Если вы не изменили ни один из параметров во время установки, после ее завершения должен открыться VS Code.

Ваши первые шаги

Вероятно, вы сейчас видите этот экран:

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

Не надо! Я проведу вас через это! Прежде всего, давайте избавимся от беспорядка.

В верхней части окна отображается предупреждение желтого цвета («Предупреждение»). VS Code достаточно хорош, чтобы сказать нам, что Git не был найден. Это нормально, поскольку мы еще не установили Git и еще некоторое время не будем устанавливать. Это еще один хороший друг для разработчика, но мы немного подождем, прежде чем встретиться с ним. Нажмите «Больше не показывать». По тем же причинам нажмите кнопку закрытия в правом нижнем углу (см. Следующий рисунок).

Ваш первый файл

Теперь самое лучшее. Мы собираемся создать новый файл в VS Code.

Два варианта:

  • В меню вверху окна нажмите Файл / Новый файл.
  • Или просто нажмите Ctrl + N (Cmd + N на Mac) на клавиатуре, если сегодня чувствуете себя Нео.

Только что открылась новая вкладка с именем Untitled-1. На данный момент он пуст, потому что мы еще не набрали код.

Давайте немедленно сохраним его, чтобы сообщить VS Code, что мы хотим рассматривать файл как файл HTML.

И вам еще раз очень повезло, у вас есть два варианта:

  • В меню вверху окна нажмите Файл / Сохранить.
  • Или просто нажмите Ctrl + S (Cmd + S на Mac), потому что теперь вы хакер.

Выберите папку, в которой вы хотите сохранить файл, и переименуйте файл в index.html. Часть .html важна, так мы сообщаем VS Code, что кодируем в HTML. Фактически вы можете заменить часть index любым именем, которое хотите! Затем нажмите кнопку сохранения.

И теперь VS Code знает, что мы пишем код на языке HTML. Который в основном читается как язык гипертекстовой разметки, но поскольку все уже говорят номер PIN и банкомат, нам не придется тратить на это много времени.

И последнее, что нужно сделать: скопируйте и вставьте следующий код (из последней статьи) в новый файл в VS Code.

<html>
  <body>
    <h1>Awesome blog!</h1>
    <p>Hello, reader. This is my first post on this great blog. I hope you'll like it!</p>
    <p>And since you like paragraphs so much, here's another one!</p>
    <h2>List of badass comics characters</h2>
    <ul>
      <li>Batman</li>
      <li>Batman</li>
      <li>Batman</li>
      <li>Bruce Wayne</li>
      <li>Batman</li>
    </ul>
    <a href="http://www.medium.com">This is a link to the Medium homepage</a>
    <p>
      <img src="images/great_photo.jpg">
    </p>
  </body>
</html>

И вот оно! Подсветка синтаксиса!

Не стесняйтесь добавлять столько тегов и атрибутов, сколько хотите, и наблюдайте, как VS Code автоматически окрашивает ваш код. Чистая крутизна.

Не забудьте сохранить файл с помощью Ctrl + S (или нажмите Файл / Сохранить)!

Подведем итоги

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

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

А пока почему бы не ознакомиться с функциями VS Code? Сегодня мы, вероятно, охватили менее 1% того, что может предложить это программное обеспечение. Если вам интересно, вы можете попробовать другие редакторы кода!

Увидимся в следующий раз!

Следующая статья доступна здесь!

Примечание. Этот пост является частью серии.

Как обычно, не стесняйтесь поделиться этой статьей, если она вам понравилась!