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

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

Я не мог понять, как просто открыть мои файлы index.js или html из моих проектов в браузере, чтобы увидеть мой проект! Что является основной причиной этого? Обычно это связано с тем, что вы работаете на ПК, параметры которого отличаются от параметров работы на Mac. Сегодня мы собираемся работать над этой проблемой, если бы мы использовали код Virtual Studio (отличный от Virtual Studio!) в качестве нашего текстового редактора.

Командные задачи

Обычный способ для программистов научиться писать код — использовать Notepad или Notepad++ для Windows. Это чрезвычайно просто, бесплатно и позволяет пользователю быстро просматривать свой HTML-код в браузере. Хотя можно добавить JavaScript в тег ‹script›, чтобы создать полноценную программу в Notepad++, это может привести к беспорядку, и все должно быть в одном файле. Чтобы работать с профессиональными программами и привыкнуть к текстовому редактору кодирования, лучше всего закончить эти простые программы и использовать что-то вроде VS Code. Хотя поначалу это может немного сбивать с толку, оно чрезвычайно удобно для пользователя и дает вам гораздо больше возможностей; включая отдельные файлы/папки для работы.

Хотя я проповедую, что все должны использовать VS Code, я также знаю, что есть некоторые проблемы с пользовательским интерфейсом, которые делают жизнь новичка-программиста довольно раздражающей. Хотя поначалу они могут показаться скрытыми, одной из насущных проблем, с которыми я столкнулся при переходе на Windows, была возможность использовать команду терминала для открытия моих файлов index.js или index.html. Стандартная и простая команда, она позволяет пользователю открывать свои файлы в браузере, чтобы увидеть свою программу на данный момент.

При попытке сделать это терминал скажет «нет такой команды». Это почему? Это связано с файлом JSON в VS Code для Windows и изначально настроенным кодом. Как мы можем это проверить?

Исходный файл JSON

Вот как будет выглядеть ваш исходный файл JSON; включены комментарии. Как нам туда добраться? Сначала мы нажимаем cntrl+shift+p или просто F1, чтобы открыть палитру команд. Палитра команд показывает нам все сочетания клавиш, доступные пользователю, а также дает список всех потенциальных функций в VS Code. Это выпадающее меню для любых действий в VS Code!

Оказавшись здесь, мы можем выполнить поиск, введя Tasks: Configure Task, чтобы добраться туда, куда нам нужно.

Примечание. В более старых версиях введите «Настроить средство выполнения задач».

Когда мы выберем это, откроется наш файл tasks.json. Это именно то, к чему мы стремимся; Право на! Это будет выглядеть примерно так:

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

И я серьезно.

Удалите все в файле (но не сам файл!), чтобы у нас был пустой файл tasks.json. Теперь мы можем вставить код, который мы хотим открыть в браузере. Это код для копирования:

{
«версия»: «0.1.0»,
«команда»: «explorer»,
«windows»: {
«команда»: «explorer.exe»< br /> },
«аргументы»: [«${файл}»]
}

И бум! Мы исправлены! Небольшое примечание: посмотрите на раздел «args» этого нового кода. Внутри него мы можем просто поместить файл, который хотим показать, в скобки и кавычки. Допустим, мы хотели показать наш файл index.html в браузере; это означает, что мы должны изменить значение «args» на [«index.html»]. Здесь у меня есть это как [“${file}”] по какой-то причине.

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

Наконец мы можем видеть!

Теперь все исправлено! Та-дааааа! Чтобы открыть наш текущий файл или файл, который мы жестко закодировали в «args», мы набираем команду ctrl+shift+b, чтобы открыть наш файл в браузере.

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

Оказавшись здесь, нам не нужно запускать эту команду снова и снова, чтобы увидеть нашу страницу. Мы можем просто обновить браузер после обновления нашего кода, чтобы увидеть разницу! Некоторые фреймворки выполняют горячую визуализацию, например ReactJS, но если мы просто используем HTML и/или JS для этих программ, достаточно будет обновить страницу.

Хорошо сделано!