27 супер плагинов VS Code для JavaScript разработчика


Оглавление (нажмите, чтобы открыть):

Лучшие плагины для Visual Studio Code

В этой статье мы рассмотрим лучшие для верстки в Visual Studio Code

Settings Sync

Settings Sync — итак, начнем с плагина синхронизации, этот плагин позволяет синхронизировать Visual Studio Code между несколькими компьютерами, например домашний компьютер и рабочий ноутбук.
Синхронизируются: настройки, клавиатурные сочетания, открытые файлы, установленные плагины и настройки плагинов, работает синхронизация через GitHubGit.

Auto Close Tag — как видно из названия этот плагин автозакрытия тегов.

Auto Rename Tag

Auto Rename Tag — тоже тэг с говорящим названием, переименовывает парные теги.

Bookmarks — добавляет закладки в ваш код для быстрого перехода.

Bracket Pair Colorizer

Bracket Pair Colorizer — подсвечивает парные скобки, поможет определить все ли скобки закрыты если их много.

change-case — позволяет менять кейсы именования переменных, camelCase, snake_case, kebab-case, PascalCase

Color Info

Color Info — детальная информация о цвете в css

Import Cost

Import Cost — указывает размер импортируемых модулей.

Indenticator — визуализация отступов, очень удобно при программировании на Python и для SASS.

IntelliSense for CSS class names in HTML

IntelliSense for CSS class names in HTML — подсказки по классам CSS, незаменимый плагин для верстальщика.

Live Server

Live Server — сервер динамической перезагрузки страницы при изменении.

Path Intellisense

Path Intellisense — плагин автодополнения пути файла.

Project Manager — менеджер проектов для Visual Studio Code

REST Client — Rest клиент для VS Code

Spell Right — плагин для проверки орфографии, в том числе поддерживает русский язык.

TODO Highlight — важные комментарии выделяем цветом, чтобы не забыть доделать, переделать часть кода, пишем «// TODO: Переделать эту часть»

vscode-icons — новые иконки, автоматически назначаются иконки на папки с учетом содержимого.

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

Полезные расширения для VS Code

by Andrej — Category Обзоры on 11/09/2020

Visual Studio Code (VS Code) — редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга. Имеет широкие возможности для кастомизации: пользовательские темы, сочетания клавиш и файлы конфигурации.

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

Plugin | Marketplace Author Ctrl + P & Enter
Apache Conf mrmlnc
Apache Conf Snippets eiminsasete
Autoprefixer mrmlnc
Auto Rename Tag Jun Han
Beautify HookyQR
Better Comments Aaron Bond
Bookmarks Alessandro Fragnani
cdnjs Jake Wilson
Color Info Matt Bierner
CSS Peek Pranay Prakash
ESLint Dirk Baeumer
file-size zhcode
CSSComb mrmlnc
GitHub Pull Requests GitHub
GitLens — Git supercharged Eric Amodio
Gulp Tasks Nick Dodd
Import Cost Wix
Indenticator SirTori
JSFiddle Like Syntax Theme davidmart
language-stylus sysoev
Live Sass Compiler Ritwick Dey
Live Server Ritwick Dey
markdownlint David Anson
minify HookyQR
npm egamma
npm Intellisense Christian Kohler
PHP Getters & Setters Ben Mewburn
phpfmt — PHP formatter kokororin
Pug beautify mrmlnc
Pug to HTML ginie
Prettier — Code formatter Esben Petersen
Quokka.js Wallaby.js
Russian Language Pack for VS Code Microsoft
Sass Robin Bentley
Sort JSON objects richie5um2
SVG jock
SVG Viewer cssho

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

6 редакторов и >

Разбираем на примерах, как выбрать редактор кода для JavaScript.

Написать код JavaScript можно и в обычном «Блокноте» — достаточно сохранить результат с расширением .js, и он не только подключится к сайту, но даже заработает. Однако использование такого ограниченного редактора сильно замедлит разработку. Поэтому лучше взять что-то специализированное. Есть несколько основных критериев, по которым нужно выбирать редактор для работы с кодом на JavaScript.

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

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

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

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

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

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

Существует большое количество редакторов, которые соответствуют этим требованиям и подойдут для работы с JavaScript. На чём писать код — личное дело каждого, но у многих возникают проблемы с выбором подходящей программы, поэтому мы составили список из 6 хороших инструментов.

Notepad++

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

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

Notepad++ регулярно обновляется, поэтому в нём быстро исправляют баги и добавляют новые возможности. К сожалению, работает он только на Windows.

Редактор Vim уже давно стал классикой. Многие говорят, что в нём тяжело разобраться, но если уделить этому достаточно времени, пользоваться чем-то другим уже не захочется.

Помимо того, что он соответствует всем выбранным нами критериям, Vim ещё и полностью настраиваемый, поэтому вы можете:

  • устанавливать плагины;
  • менять темы;
  • назначать горячие клавиши и так далее.

Vim полностью бесплатный и работает на всех платформах, начиная с Windows, MacOS и Linux и заканчивая MS DOS и OS/2.

Microsoft Visual Studio

Microsoft Visual Studio — это IDE, в которой есть всё необходимое для работы с JS. Помимо обычной подсветки синтаксиса и автодополнения, можно также пользоваться дебагером и создавать Unit-тесты.

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

Месячная подписка может стоить от 45 до 250 долларов в месяц, но есть и бесплатная версия для начинающих разработчиков и тех, кто создаёт программы с открытым исходным кодом. IDE доступна для Windows и MacOS, а на Linux её можно установить с помощью Wine.

Visual Studio Code

170 МБ против 30 ГБ), кроссплатформенная и бесплатная версия Visual Studio. В этом редакторе предустановлена поддержка JavaScript, TypeScript и Node.JS.

Расширения с другими языками можно скачать прямо из Visual Studio Code.

Встроенные дебагер и Git-команды для работы с системой управления версий GitHub позволяют ускорить тестирование и публикацию приложений.

Sublime Text

Sublime Text — это простой кроссплатформенный редактор. Его интерфейс настраивается, а выполнять некоторые действия можно с помощью горячих клавиш.

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

Главный минус Sublime Text в том, что полная версия стоит 80 долларов (лицензия выдаётся на одного пользователя, который может использовать редактор на любом компьютере). В остальном он хорошо подходит
JS-разработчикам.

Золотой фонд веб-разработчика. Самые полезные плагины для Atom и VS Code

Содержание статьи

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

На вкус автора

Ваш покорный слуга использовал все перечисленные редакторы и в итоге остановился на VS Code. Причин тут несколько, но главная — производительность. В Microsoft отлично постарались и, несмотря на поздний выход (VS Code появился на сцене последним), успели собрать вокруг себя огромное сообщество. Это положительно отразилось на плагинах: некоторые из них, на мой взгляд, на голову выше альтернатив для Atom. В связи с этим в тексте обзора будут мелькать названия расширений именно для VS Code. Ссылка на приближенный по функциональности вариант для Atom будет приведена ниже. Не удивляйся, если, скопировав название плагина и запустив поиск по репозиторию Atom, ты ничего не найдешь. Используй ссылки из описания.

Причины популярности

Редакторы, построенные на веб-технологиях, имеют приблизительно одни и те же проблемы. Одна из основных — производительность. Разработчики трудятся над скоростью работы редакторов, но будем честными — с этой проблемой вряд ли удастся справиться на 100%. Нативные решения по-прежнему обгоняют в быстродействии, и это стоит учитывать при выборе редактора.

Ну хорошо, производительность нативных решений вне конкуренции. За счет чего тогда новоиспеченные «легковесные» редакторы покорили столько сердец разработчиков? Главный аргумент «за» — технологический стек. Что значит разработать плагин для какого-нибудь Sublime или Notepad ? Правильно, придется разобраться с C , Python (здесь может быть любой другой язык программирования), SDK редактора и другими не нужными по основной работе вещами.

Какой веб-разработчик согласится на этот подвиг? У него своих забот и технологий хватает (во фронтенде происходит настоящая революция решений). Вот и получилось, что экосистема плагинов для веб-разработчиков у нативных редакторов всегда страдала нехваткой профильных решений.

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

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

Сниппеты

Плагины-сниппеты — отдельный класс расширений для редакторов. Они пользуются дикой популярностью, и практически под каждый современный фреймворк или библиотеку в репозиториях есть индивидуальное предложение. Сниппеты экономят время. Требуется описать заготовку класса? Нет проблем, вводим пару символов и получаем несколько строк готового кода. Подробно разбирать плагины-сниппеты смысла нет — их слишком много. Приведем несколько ссылок на плагины-сниппеты по популярным технологиям. Недостающие найдешь сам.

VS Code:

  • jQuery Snippets
  • CSS Snippets
  • Angular 2 TypeScript Snippets
  • Javascript-snippets
  • Laravel-5-snippets

Наборы сниппетов на любой вкус и цвет

Обертка для HTML

При описании разметки страницы постоянно приходится оборачивать блоки, то есть вкладывать один блок в другой. Написал разметку блока, а потом понял, что для удобства стилизации лучше обернуть его в дополнительный блок. Сделать несложно: пишем открывающий тег в самом начале, проматываем блок до конца и ставим закрывающий тег. Есть только одна проблема — на больших блоках это делать неудобно. Есть все шансы поставить «закрывашку» не туда и поломать разметку. Аналогичная проблема появляется при стилизации отдельных кусков текста. Попробуй быстро вставить многочисленные открывающие и закрывающие теги и не сойти с ума. Справиться с трудностями помогут плагины htmltagWrap и Atom wrap in tag. С их помощью решение сведется к выделению куска кода/строки и нажатию комбинации горячих клавиш.

Привыкаем к горячим клавишам

При переходе на новый редактор/IDE всегда сталкиваешься с одной и той же проблемой — надо учить новые горячие клавиши. Только привык к одним комбинациям, как бац — и все по-другому. На привычные действия начинаешь тратить больше времени, чем обычно, и лишний раз задумываешься, целесообразно ли вообще переходить на что-то новое. Уверен, разработчики, кто начинал свою карьеру 10–15 лет назад, неоднократно сталкивались с подобным, поэтому они однозначно оценят мощь плагинов с биндингами клавиш популярных редакторов. Суть проста: привык к раскладке горячих клавиш Visual Studio — качаешь соответствующий плагин, и новый редактор начинает отзываться на привычные команды.

VS Code:

Автокомплит для файлов


По умолчанию ни один из редакторов не предоставляет функции автозавершения имен файлов во время их подключения. Часто это бывает причиной ошибок. Приходится помнить полный путь к месторасположению файла. Если проект сложней, чем Hello world, то файлы сгруппированы по нескольким директориям, и для указания пути придется пользоваться услугами менеджера файлов. Не очень удобно. Проще подключить автокомплит с помощью плагинов AutoFileName и autocomplete+. Затем останется только набирать первые буквы имени файла/директории, после чего плагин предложит варианты для подстановки.

  • VS Code:AutoFileName
  • Atom:autocomplete+ paths suggestions

Автокомплит для файлов в VS Code

Линтеры

Современный процесс разработки немыслим без автоматизации. Если что-то можно автоматизировать и переложить на инструменты — это стоит сделать. Без всевозможных линтеров во фронтенде никуда, поэтому при работе над очередным проектом надо сразу позаботиться о подключении решений вроде ESLint, HTMLHint, CSSLint, . Линтеры контролируют стиль написания кода и в случае несоответствия конфигу моментально укажут на ошибки.

Особенно полезны линтеры в командной разработке, когда шансы получить «разношерстный» код увеличиваются в разы. Нужны примеры? Пожалуйста! Между JS-разработчиками постоянно идет спор о выборе кавычек. Одни — приверженцы одинарных, другие — двойных, а третьи поддерживают идею обратных. Линтеры помогут добиться единообразия и вовремя оповестить разработчика, сбившегося с пути.

Продолжение доступно только участникам

Вариант 1. Присоединись к сообществу «Xakep.ru», чтобы читать все материалы на сайте

Членство в сообществе в течение указанного срока откроет тебе доступ ко ВСЕМ материалам «Хакера», увеличит личную накопительную скидку и позволит накапливать профессиональный рейтинг Xakep Score! Подробнее

Вариант 2. Открой один материал

Заинтересовала статья, но нет возможности стать членом клуба «Xakep.ru»? Тогда этот вариант для тебя! Обрати внимание: этот способ подходит только для статей, опубликованных более двух месяцев назад.

Игорь Антонов

Автор журнала «Хакер» с более чем десятилетним стажем. Основное место работы — АО «ДальЖАСО», team-lead. Наставник в HTML Academy

Разработка приложений Node.js с помощью Visual Studio Code и Azure Node.js development with Visual Studio Code and Azure

В этом руководстве объясняется, как контейнезировать существующее приложение Node.js (с помощью Docker) и развернуть его в Azure с помощью Visual Studio Code. This tutorial illustrates taking an existing Node.js app, «containerizing» it (with Docker), and then deploying the app to Azure using Visual Studio Code.

В руководстве используется простое приложение со списком задач, созданное и опубликованное Scotch.io. The tutorial makes use of a simple todo app created by and published by Scotch.io. Это одностраничное приложение MEAN, которое использует MongoDB в качестве базы данных, Node/Express для API REST/веб-сервера и Angular.js 1.x для внешнего пользовательского интерфейса. It is a single-page MEAN app, and therefore, uses MongoDB as its database, Node/Express for the REST API/web server, and Angular.js 1.x for the front-end UI.

Предварительные требования Prerequisites

Чтобы продолжить работу с примером, подготовьте следующие компоненты: In order to follow along with the demo, you’ll need to have the following software installed:

  • Visual Studio Code Visual Studio Code
  • Docker Docker
  • Учетная запись DockerHub DockerHub account
  • Azure CLI 2.0 Azure CLI 2.0
  • Учетная запись Azure Azure account
  • Yarn Yarn
  • Chrome — требуется для отладки интерфейса примера приложения. Chrome — Used for debugging the demo app’s front-end.
  • MongoDB — так как пример приложения использует MongoDB, требуется выполняющийся в локальной среде экземпляр MongoDB, который прослушивает стандартный порт 27017 . MongoDB — Since the demo app uses MongoDB, you need to have a locally running MongoDB instance that is listening on the standard 27017 port. Чтобы получить этот экземпляр, после установки Docker выполните две команды: сначала docker pull mongo , а затем docker run -it -p 27017:27017 mongo . The simplest way to achieve this is by running the following two commands after Docker is installed: docker pull mongo followed by docker run -it -p 27017:27017 mongo .

Настройка проекта Project setup

Чтобы приступить к работе, скачайте пример проекта, как описано ниже. To get started, download the sample project using the following steps:

Откройте Visual Studio Code. Open Visual Studio Code.

Нажмите клавишу , чтобы отобразить палитру команд. Press to display the command palette.

В строке палитры команд введите gitcl , выберите команду Git: Clone и нажмите клавишу . At the command palette prompt, enter gitcl , select the Git: Clone command, and press .

Если появится запрос ввести URL-адрес репозитория, введите https://github.com/scotch-io/node-todo , затем нажмите клавишу . When prompted for the Repository URL, enter https://github.com/scotch-io/node-todo , then press .

Выберите (или создайте) локальный каталог, в который нужно клонировать проект. Select (or create) the local directory into which you want to clone the project.

Встроенный терминал Integrated terminal

Так как это проект Node.js, сначала необходимо установить все зависимости проекта из npm. Since this is a Node.js project, the first thing you need to do is ensure that all of the project’s dependencies are installed from npm.

Нажмите клавишу , чтобы отобразить встроенный терминал Visual Studio Code. Press ` to display the Visual Studio Code integrated terminal.

Введите yarn и нажмите клавишу . Enter yarn , and press .

Встроенная система управления версиями Git Integrated Git version control

После установки зависимостей приложения с помощью Yarn создается файл yarn.lock , который позволяет повторно запрашивать эти же зависимости в будущем без сюрпризов со стороны сборок непрерывной интеграции, рабочих развертываний или компьютеров других разработчиков. After installing the app’s dependencies via Yarn, a yarn.lock file is created that provides a predictable way to reacquire the exact same dependencies in the future, without any surprises in either CI (continuous integration) builds, production deployments, or other developer machines.

Ниже показано, как добавить файл yarn.lock в систему управления версиями: The following steps illustrate how to check the yarn.lock file into source control:

В Visual Studio Code откройте вкладку встроенной системы Git (вкладка с эмблемой Git). Within Visual Studio Code, switch to the integrated Git tab (the tab with the Git logo).

В поле Сообщение введите сообщение фиксации и нажмите клавиши . In the Message box, enter a commit message, and press .

Навигация по проекту и коду Project and code navigation

Чтобы ориентироваться в базе кода, поэкспериментируем с возможностями навигации в среде Visual Studio Code. In order to orient ourselves within the codebase, let’s play around with some examples of some of the navigation capabilities that Visual Studio Code provides.

Нажмите клавиши P. Press P.

Введите .js , чтобы отобразить файлы JavaScript/JSON рядом с родительской папкой каждого файла. Enter .js to display all the JavaScript/JSON files in the project along with each file’s parent directory

Выберите файл server.js , который является скриптом запуска приложения. Select server.js , which is the startup script for the app.

Наведите указатель мыши на переменную database (импортирована в строку 6), чтобы просмотреть ее тип. Hover your mouse over the database variable (imported on line 6) to see its type. Эта возможность быстро проверять переменные, модули и типы в файле очень удобна при разработке проектов. This ability to quickly inspect variables/modules/types within a file is very useful during the development of your projects.

Нажмите кнопку мыши в пределах диапазона переменной, например database, чтобы просмотреть все ссылки на эту переменную в том же файле. Clicking your mouse within the span of a variable — such as database — allows you to see all references to that variable within the same file. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки. To view all references to a variable within the project, right-click the variable, and from the context menu, and select Find All References.

Вы также можете просмотреть определение переменной, даже если оно находится в другом файле. In addition to being to hover your mouse over a variable to discover its type, you can also inspect the definition of a variable, even if it’s in another file. Для этого щелкните правой кнопкой мыши database.localUrl (строка 12) и в контекстном меню выберите Показать определение. To see this in action, right-click database.localUrl (line 12), and, from the context menu, select Peek Definition.

Изменение кода и использование автозаполнения Modifying the code and using autocompletion

Строка подключения MongoDB программно задана в объявлении database.localUrl. The MongoDB connection string is hard-coded in declaration of the database.localUrl. Выполнив инструкции из этого раздела, вы измените код, чтобы получить строку подключения из переменной среды. Вы также узнаете о функции автозаполнения Visual Studio Code. In this section, you’ll modify the code to retrieve the connection string from an environment variable, and learn about Visual Studio Code’s autocompetion feature.

Откройте файл server.js . Open the server.js file

Замените код Replace the following code:

следующим: with this code:

Обратите внимание: если при вводе кода вручную (вместо копирования и вставки) поставить точку после process , Visual Studio Code отобразит список доступных элементов глобального API process Node.js. Note that if you type the code in manually (instead of copy and paste), when you type the period after process , Visual Studio Code displays the available members of the Node.js process global API.

Автозаполнение работает, потому что Visual Studio Code использует TypeScript в фоновом режиме (даже для JavaScript), чтобы передавать информацию о вводе, которая может передаваться в список завершения при вводе. Autocompetion works because Visual Studio Code uses TypeScript behind the scenes — even for JavaScript — to provide type information that can then be used to inform the completion list as you type. Visual Studio Code может определить, что проект является проектом Node.js, и автоматически скачать файл вводимых элементов TypeScript для Node.js из NPM. Visual Studio Code is able to detect that this is a Node.js project, and as a result, automatically downloaded the TypeScript typings file for Node.js from NPM. Файл вводимых элементов позволяет получить автозаполнение для других глобальных значений Node.js, например Buffer и setTimeout, а также все встроенные модули, такие как fs и http. The typings file allows you to get autocompletion for other Node.js globals — such as Buffer and setTimeout — as well as all of the built-in modules such as fs and http.

Кроме встроенных API-интерфейсов Node.js, функция автоматического получения значений также поддерживает более 2000 модулей сторонних производителей, таких как React, Underscore и Express. In addition to the built-in Node.js APIs, this auto-acquisition of typings also works for over 2,000 3rd party modules, such as React, Underscore and Express. Например, чтобы не позволить Mongoose аварийно завершать работу приложения, если оно не может подключиться к настроенному экземпляру базы данных MongoDB, вставьте следующую строку кода в строку 13: For example, in order to disable Mongoose from crashing the sample app if it can’t connect to the configured MongoDB database instance, insert the following line of code at line 13:

Как и при использовании предыдущего кода, вы получите автозаполнение автоматически. As with the previous code, you’ll notice that you get autocompletion without any work on your part.

Модули, которые поддерживает эта функция автозаполнения, можно увидеть в созданном сообществом проекте DefinitelyTyped, который является источником для всех определений типов TypeScript. You can see which modules support this auto-complete capability by browsing the DefinitelyTyped project, which is the community-driven source of all TypeScript type definitions.

Выполнение приложения Running the app

Теперь, когда вы познакомились с кодом, пришло время запустить приложение. Once you’ve explored the code a bit, it’s time to run the app. Чтобы запустить приложение из Visual Studio Code, нажмите клавишу . To run the app from Visual Studio Code, press . При запуске кода с помощью (режим отладки) Visual Studio Code запускает приложение и показывает окно консоли отладки, отображающее StdOut для приложения. When running the code via (debug mode), Visual Studio Code launches the app and displays the Debug Console window that displays stdout for the app.

Кроме того, консоль отладки подключается к только что запущенному приложению, чтобы вы могли вводить выражения JavaScript, которые будут обрабатываться в приложении. В этой консоли также есть функция автоматического заполнения. Additionally, the Debug Console is attached to the newly running app so you can type JavaScript expressions, which will be evaluated in the app, and also includes auto-completion. Чтобы увидеть, как это работает, введите в консоли process.env : To see this in action, type process.env in the console:

Вы смогли запустить приложение нажатием клавиши , так как открытый сейчас файл является файлом JavaScript ( server.js ). You were able to press to run the app because the currently open file is a JavaScript file ( server.js ). Поэтому Visual Studio Code предполагает, что проект является приложением Node.js. As a result, Visual Studio Code assumes that the project is a Node.js app. Закройте все файлы JavaScript в Visual Studio Code и нажмите клавишу . В Visual Studio Code появится запрос на выбор среды: If you close all JavaScript files in Visual Studio Code, and then press , Visual Studio Code will query you as the environment:

Откройте браузер и перейдите к http://localhost:8080 , чтобы просмотреть запущенное приложение. Open a browser, and navigate to http://localhost:8080 to see the running app. Введите сообщение в текстовое поле и добавьте или удалите несколько задач, чтобы понять, как работает приложение. Type a message into the textbox and add/remove a few todos to get a feel for how the app works.

Отладка Debugging

Кроме того что в Visual Studio Code можно запустить приложение и взаимодействовать с ним через консоль, это средство также позволяет задавать точки останова непосредственно в коде. In addition to being able to run the app and interact with it via the integrated console, Visual Studio Code provides the ability to set breakpoints directly within your code. Например, нажмите клавиши P, чтобы отобразить средство выбора файлов. For example, press P to display the file picker. Когда откроется средство выбора файлов, введите route и выберите файл route.js . Once the file picker displays, type route , and select the route.js file.

Установите точку останова на строке 28, представляющей маршрут Express (вызывается, когда приложение пытается добавить запись из списка задач). Set a breakpoint on line 28, which represents the Express route that is called when the app tries to add a todo entry. Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке. To set a breakpoint, simply click the area to the left of the line number within the editor as shown in the following figure.

Помимо стандартных точек останова, средство Visual Studio Code поддерживает условные точки останова, которые позволяют указать время остановки приложения. In addition to standard breakpoints, Visual Studio Code supports conditional breakpoints that allow you to customize when the app should suspend execution. Чтобы задать условную точку останова, щелкните правой кнопкой мыши область слева от строки, в которой нужно приостановить выполнение, выберите Добавить условную точку останова. и укажите выражение JavaScript (например, foo = «bar» ) или число операций выполнения, определяющих условие, при котором приложение должно быть остановлено. To set a conditional breakpoint, right-click the area to the left of the line on which you wish to pause execution, select Add Conditional Breakpoint. , and specify either a JavaScript expression (e.g. foo = «bar» ) or execution count that defines the condition under which you want to pause execution.

Установив точку останова, вернитесь к выполняемому приложению и добавьте запись из списка задач. Once the breakpoint has been set, return to the running app and add a todo entry. Добавление такой записи немедленно останавливает выполнение приложения на строке 28, где вы задали точку останова: Adding a todo entry immediately causes the app to suspend execution on line 28 where you set the breakpoint:

Когда приложение будет приостановлено, можно навести указатель мыши на выражения кода, чтобы просмотреть их текущие значения, проверить локальные переменные или контрольные значения и стек вызовов, а также использовать панель инструментов отладки для пошагового выполнения кода. Once the application has been paused, you can hover your mouse over the code’s expressions to view their current value, inspect the locals/watches and call stack, and use the debug toolbar to step through the code execution. Нажмите клавишу , чтобы возобновить выполнение приложения. Press to resume execution of the app.

Отладка полного стека Full-stack debugging

Как упоминалось выше, приложение со списком задач — это приложение MEAN, то есть приложение, интерфейс и серверная часть которого написаны с помощью JavaScript. As mentioned earlier in the topic, the TODO app is a MEAN app — meaning that its front-end and back-end are both written using JavaScript. То есть, если вы выполняете отладку серверного кода (Node/Express), в определенный момент может потребоваться отладить код интерфейса (Angular). So, while you’re currently debugging the back-end (Node/Express) code, at some point, you may need to debug the front-end (Angular) code. Для этого в Visual Studio Code есть множество расширений, в том числе встроенная отладка Chrome. For that purpose, Visual Studio Code has a huge ecosystem of extensions, including integrated Chrome debugging.

Откройте вкладку Расширения и введите chrome в поле поиска: Switch to the Extensions tab, and type chrome into the search box:

Выберите расширение с именем Отладчик для Chrome и выберите Установить. Select the extension named Debugger for Chrome, and select Install. Установив расширение отладки Chrome, щелкните Перезагрузить, чтобы закрыть и снова открыть Visual Studio Code для активации расширения. After installing the Chrome debugging extension, select Reload to close and reopen Visual Studio Code in order to activate the extension.

Хотя вы смогли выполнить и отладить код Node.js без специальной настройки Visual Studio Code, чтобы отладить внешнее веб-приложение, необходимо создать файл launch.json , который сообщает Visual Studio Code, как запускать приложение. While you were able to run and debug the Node.js code without any Visual Stdio Code-specific configuration, in order to debug a front-end web app, you need to generate a launch.json file that instructs Visual Studio Code how to run the app.

Чтобы создать файл launch.json , откройте вкладку Отладка, щелкните значок шестеренки (на нем должна быть небольшая красная точка вверху) и выберите среду node.js. To generate the launch.json file, switch to the Debug tab, click the gear icon (which should have a little red dot on top of it), and select the node.js environment.

Созданный файл launch.json выглядит, как на снимке экрана ниже. Этот файл сообщает Visual Studio Code, как запустить приложение или как подключиться к нему, чтобы выполнить его отладку. Once created, the launch.json file looks similar to the following, and tells Visual Studio Code how to launch and/or attach to the app in order to debug it.

Обратите внимание: средство Visual Studio Code определило, что скриптом запуска приложения является server.js . Note that Visual Studio Code was able to detect that the app’s startup script is server.js .

Откройте файл launch.json , нажмите кнопку Добавить конфигурацию (внизу справа) и выберите Chrome: Launch with userDataDir (Chrome: запустить с использованием userDataDir). With the launch.json file open, select Add Configuration (bottom right), and select Chrome: Launch with userDataDir.

Добавление новой конфигурации запуска для Chrome позволяет отладить внешний код JavaScript. Adding a new run configuration for Chrome allows you to debug the front-end JavaScript code.

Наведите указатель мыши на любой заданный параметр, чтобы увидеть его функцию. You can hover your mouse over any of the settings that are specified to view documentation about what the setting does. Кроме того, обратите внимание, что Visual Studio Code автоматически определяет URL-адрес приложения. Additionally, notice that Visual Studio Code automatically detects the URL of the app. Задайте для свойства webRoot значение $/public , чтобы отладчик Chrome знал, где найти внешние ресурсы приложения: Update the webRoot property to $/public so that the Chrome debugger will know where to find the app’s front-end assets:

Чтобы запустить или выполнить отладку внешнего и внутреннего кода одновременно, необходимо создать комплексную конфигурацию запуска, которая сообщает средству Visual Studio Code, какой набор конфигураций нужно выполнять параллельно. In order to launch/debug both the front and back-end at the same time, you need to create a compound run configuration that tells Visual Studio Code which set of configurations to run in parallel.

Добавьте следующий фрагмент кода в качестве свойства верхнего уровня в файл launch.json (как одноуровневое свойство существующего свойства configurations). Add the following snippet as a top-level property within the launch.json file (as a sibling of the existing configurations property).

Строковые значения, указанные в массиве compounds.configurations, ссылаются на имя отдельных записей в списке конфигураций. The string values specified in the compounds.configurations array refer to the name of individual entries in the list of configurations. Если вы уже изменили эти имена, внесите соответствующие изменения в массив. If you’ve modfied those names, you’ll need to make the appropriate changes in the array. Чтобы увидеть, как это работает, перейдите на вкладку «Отладка» и выберите для выбранной конфигурации значение Полный стек (имя составного конфигурации) и нажмите клавишу для запуска. To see this in action, switch to the debug tab, and change the selected configuration to Full-Stack (the name of the compound configuration), and press to run it.

Выполнение конфигурации запускает приложение Node.js (это можно увидеть в выходных данных консоли отладки) и Chrome (который настроен для перехода к приложению Node.js по адресу http://localhost:8080 ). Running the configuration launches the Node.js app (as can be seen in the debug console output) and Chrome (configured to navigate to the Node.js app at http://localhost:8080 ).

Нажмите клавиши P и введите (или выберите) значение todos.js , которое является основным контроллером Angular внешней части приложения. Press P, and enter (or select) todos.js , which is the main Angular controller for the app’s front-end.

Установите точку останова на строке 11, которая является точкой входа для создаваемой записи из списка задач. Set a breakpoint on line 11, which is the entry-point for a new todo entry being created.

Вернитесь к выполняемому приложению и добавьте новую запись. Вы увидите, что средство Visual Studio Code приостановило выполнение кода Angular. Return to the running app, add a new todo entry, and notice that Visual Studio Code has now suspended execution within the Angular code.

Как и во время отладки Node.js, можно навести указатель мыши на выражения, просмотреть локальные переменные и контрольные значения, обработать выражения в консоли и т. д. Like Node.js debugging, you can hover your mouse over expressions, view locals/watches, evaluate expressions in the console, and so on.

Необходимо обратить внимание на два важных момента. There are two cools things to note:

В области Стек вызовов отображаются два разных стека: Node и Chrome. При этом указано, какой из стеков приостановлен. The Call Stack pane displays two different stacks: Node and Chrome, and indicates which one is currently paused.


Можно переходить между внутренним и внешним кодом. You can step between front and back-end code. Нажмите клавишу , чтобы запустить и активировать точку останова, заданную ранее в маршруте Express. To test this, press , which will run and hit the breakpoint previously set in the Express route.

После этого вы можете эффективно отладить внешний и внутренний код JavaScript или код полного стека JavaScript непосредственно в Visual Studio Code. With this setup, you can now efficiently debug front, back, or full-stack JavaScript code directly within Visual Studio Code.

Концепция комплексного отладчика не ограничивается только двумя целевыми процессами и кодом JavaScript. In addition, the compound debugger concept is not limited to just two target processes, and also isn’t just limited to JavaScript. Поэтому, если вы работаете с приложением-микрослужбой (это может быть polyglot), можно использовать тот же рабочий процесс (после установки соответствующих расширений для языка или платформы). Therefore, if work on a microservice app (that is potentially polyglot), you can use the exact same workflow (once you’ve installed the appropriate extensions for the language/framework).

Включение приложения в образ Docker Dockerizing the app

В этом разделе рассказывается о возможностях Visual Studio Code для разработки с помощью Docker. This section focuses on the experience that Visual Studio Code provides for developing with Docker. Разработчики Node.js используют Docker, чтобы предоставлять развертывания переносимых приложений для сред разработки, непрерывной интеграции и рабочих сред. Node.js developers use Docker to provide portable app deployments for both development, CI (continuous integration), and production environments. Так как Docker является довольно сложным инструментом, Visual Studio Code предоставляет расширение, которое помогает использовать Docker в приложениях. As Docker presents a steep-learning curve to some, Visual Studio Code provides an extension that tries to help simplify some using Docker in your apps.

Вернитесь на вкладку Расширения, выполните поиск по запросу docker и выберите расширение Docker. Switch back to the Extensions tab, search for docker , and select the Docker extension.

Установите расширение Docker, а затем перезагрузите Visual Studio Code. Install the Docker extension, and then reload Visual Studio Code.

Расширение Docker для Visual Studio Code включает команду для создания Dockerfile и файла docker-compose.yml для существующего проекта. The Docker extension for Visual Studio Code includes a command for generating a Dockerfile and the docker-compose.yml file for an existing project.

Чтобы просмотреть доступные команды Docker, откройте палитру команд. Для этого нажмите клавишу и введите docker . To see the available Docker commands, display the command palette — via — and type docker .

Выберите Docker: Add docker files to workspace (Docker: добавление файлов docker в рабочую область), выберите Node.js в качестве платформы приложения и укажите, что приложение предоставляет порт 8080 . Select Docker: Add docker files to workspace, select Node.js as the app platform, and specify that the app exposes port 8080 .

Команда Docker создает полный файл Dockerfile и файлы docker-compose, которые вы можете сразу использовать. The Docker command generates a complete Dockerfile and Docker-compose files that you can begin using immediately.

Расширение Docker также обеспечивает автоматическое заполнение для файлов Dockerfiles и docker-compose.yml . The Docker extension also provides auto-completion for your Dockerfiles and docker-compose.yml files.

Чтобы увидеть, как это работает, откройте Dockerfile и измените строку 2: To see this in action, open the Dockerfile and change line 2 from:

Установите курсор после t в mhart , нажмите клавиши , чтобы просмотреть все репозитории образов, которые команда mhart опубликовала в DockerHub. With your cursor positioned after the t in mhart , press to view all the image repositories that mhart has published on DockerHub.

Выберите команду mhart/alpine-node , которая предоставляет все необходимое для приложения. Select mhart/alpine-node , which provides everything that this app needs.

Лучше создавать небольшие образы, так как с их помощью приложения можно быстрее построить и развернуть. Это позволяет быстрее распространять их и масштабировать. Smaller images are typically better since you want your app builds and deployments to be as fast as possible, which makes distribution and scaling quicker.

Теперь, когда вы создали файл Dockerfile , нужно собрать фактический образ Docker. Now, that you have generated the Dockerfile , you need to build the actual Docker image. Не забывайте, что можно использовать команду, которую установило расширение Docker в Visual Studio Code. Once again, you can use a command that the Docker extension installed in Visual Studio Code. Нажмите клавишу , введите dockerb на палитре команд, а затем выберите команду Docker: Build Image (Docker: сборка образа). Press , enter dockerb at the command palette, and select the Docker: Build Image command. Выберите файл /Dockerfile , который вы только что создали и изменили. Choose the /Dockerfile that you just generated and modified. Укажите тег, который включает в себя имя пользователя DockerHub (например, lostintangent/node ). Specify a tag that includes your DockerHub username (e.g. lostintangent/node ). Нажмите клавишу , чтобы запустить встроенное окно терминала, в котором отображаются выходные данные создаваемого образа Docker. Press to launch the integrated terminal window that displays the output of your Docker image being built.

Обратите внимание, что команда автоматизировала процесс выполнения docker build . Это еще одна возможность повысить производительность. Либо можно использовать интерфейс командной строки Docker CLI напрямую. Notice that the command automated the process of running docker build for you, which is another example of a productivity enhancer that you can either choose to use, or you can just use the Docker CLI directly.

На этом этапе развернутые приложения могут легко получить этот образ. Достаточно просто передать образ в DockerHub. At this point, to make this image easily acquirable for deployments, you need only push the image to DockerHub. Чтобы сделать это, войдите в DockerHub, запустив docker login из интерфейса командной строки и введя учетные данные своей учетной записи. To do this, make sure you have already autheticated with DockerHub by running docker login from the CLI and entering your account credentials. Затем можно открыть палитру команд в Visual Studio Code. Для этого введите dockerpush и выберите команду Docker: Push . Then, in Visual Studio Code, you can bring up the command palette, enter dockerpush , and select the Docker: Push command. Выберите только что созданный тег изображения (например, lostintangent/node ) и нажмите клавишу . Select the image tag that you just built (e.g. lostintangent/node ) and press . Команда автоматизирует вызов docker push и отображает выходные данные в окне встроенного терминала. The command automates the calling of docker push and displays the output in the integrated terminal.

Развертывание приложения Deploying the app

Теперь, когда вы поместили приложение в образ Docker и передали его в DockerHub, необходимо развернуть приложение в облаке, чтобы оно стало доступным для пользователей. Now that you the app Dockerized and pushed to DockerHub, you need to deploy it to the cloud so the world can see it. Для этого используйте службу приложений Azure, которая является предложением Azure PaaS. For this, you can use Azure App Service, which is Azure’s PaaS offering. В службе приложений есть две возможности для разработчиков Node.js: App Service has two capabilities that are relevant to Node.js developers:

  • Поддержка виртуальных машин Linux, минимизирующая несовместимость для приложений, которые созданы с помощью собственных модулей Node, или другие средства, которые могут не поддерживать Windows и (или) вести себя иначе. Support for Linux-based VMs, which reduces incompatibilities for apps which are built using native Node modules, or other tools which might not support Windows and/or may behave differently.
  • Поддержка развертываний Docker, которая позволяет указать имя образа Docker и дает возможность службе приложений извлекать, развертывать и масштабировать образ автоматически. Support for Docker-based deployments, which allows you to specify the name of your Docker image, and allow App Service to pull, deploy, and scale the image automatically.

Чтобы приступить к работе, откройте терминал Visual Studio. To get started, open up the Visual Studio terminal. Для управления учетной записью Azure и подготовки инфраструктуры, необходимой для запуска приложения со списком задач, используйте версию Azure CLI 2.0. You’ll use the new Azure CLI 2.0 to manage your Azure account and provision the necessary infrastructure to run the todo app. Войдите в учетную запись из интерфейса командной строки с помощью команды az login (как указано в предварительных условиях). Выполните следующие действия, чтобы подготовить экземпляр службы приложений и развернуть контейнер приложения со списком задач: Once you’ve logged into your account from the CLI using the az login command (as mentioned in the pre-reqs), perform the following steps to provision the App Service instance and deploy the todo app container:

Создайте группу ресурсов, которую можно будет использовать как пространство имен или каталог для организации ресурсов Azure. Create a resource group, which you can think of as a namespace or directory for helping to organize Azure resources. С помощью параметра -n укажите имя группы. The -n option is used to specify the name of the group and can be anything you want.

Параметр -l указывает расположение группы ресурсов. The -l option indicates the location of the resource group. В предварительной версии службы приложений для Linux можно было только выбирать регионы. While in preview, the App Service on Linux support is available only in select regions. Поэтому, если вы не находитесь в западной части США и хотите узнать, какие регионы доступны, выполните в CLI команду az appservice list-locations —linux-workers-enabled , чтобы просмотреть варианты выбора центра обработки данных. Therefore, if you aren’t located in the Western US, and you want to check which other regions are available, run az appservice list-locations —linux-workers-enabled from the CLI to view your datacenter options.

Назначьте созданную группу ресурсов группой ресурсов по умолчанию, чтобы продолжить использовать CLI и не указывать группу ресурсов при каждом вызове CLI: Set the newly created resource group as the default resource group so that you can continue to use the CLI without needing to explicitly specify the resource group with each CLI call:

Создайте план службы приложений, управляющий созданием и масштабированием базовой виртуальной машины, на которой развертывается приложение. Create the App Service plan, which manages the creation and scaling of the underlying virtual machines to which your app is deployed. Еще раз укажите любое значение для параметра n . Once again, specify any value that you’d like for the n option.

Параметр —is-linux указывает, что вы создаете виртуальные машины под управлением Linux. The —is-linux option is indicates that you want Linux-based virtual machines. Без этого параметра CLI по умолчанию подготавливает виртуальные машины под управлением Windows. Without it, the CLI defaults to provisioning Windows-based virtual machines.

Создайте веб-приложение, представляющее фактическое приложение со списком задач, которое будет выполняться в плане и группе ресурсов, которые вы только что создали. Create the App Service web app, which represents the actual todo app that will be running within the plan and resource group just created. Веб-приложение можно считать процессом или контейнером, а план — виртуальной машиной или узлом контейнера, где выполняется веб-приложение. You can think of a web app as being synonymous with a process or container, and the plan as being the virtual machine/container host that they’re running on. При создании веб-приложения необходимо также настроить его для использования образа Docker, опубликованного в DockerHub: Additionally, as part of creating the web app, you’ll need to configure it to use the Docker image you published to DockerHub:

Если вместо пользовательского контейнера вы предпочитаете развертывание Git, см. статью о создании веб-приложения Node.js в Azure. If instead of using a custom container, you’d prefer a Git deployment, refer to the article, Create a Node.js web app in Azure.

Назначьте веб-приложение веб-экземпляром по умолчанию: Set the web app as the default web instance:

Запустите приложение для просмотра развернутого контейнера, который можно найти по URL-адресу *.azurewebsites.net : Launch the app to view the deployed container, which will be available at an *.azurewebsites.net URL:

Первый запуск приложения может длиться несколько минут, так как служба приложений должна извлечь образ Docker из DockerHub и запустить его. It may take few minutes to load app the first time as App Service has to pull the Docker image from DockerHub and then start it.

На этом этапе вы развернули и запустили приложение со списком задач. At this point, you’ve just deployed and run the todo app.

Теперь у вас есть приложение со списком задач. You have now deployed the todo app. Но вращающийся значок означает, что приложение не может подключиться к базе данных. However, the spinning icon indicates that the app can’t connect to the database. Это связано с тем, что во время разработки вы использовали локальный экземпляр MongoDB, который не доступен из центров обработки данных Azure. This is due to the fact that you were using a local instance of MongoDB during development, which obviously isn’t reachable from within the Azure datacenters. Так как вы изменили приложение, чтобы принимать строку подключения с помощью переменной среды, достаточно запустить сервер MongoDB и повторно настроить экземпляр службы приложений, чтобы она ссылалась на переменную среды. Since you modified the app to accept the connection string via an environment variable, you need only to start a MongoDB server and re-configure the App Service instance to reference the environment variable. В следующем разделе объясняется, как это сделать. This is illustrated in the next section.

Подготовка сервера MongoDB Provisioning a MongoDB server

Вы можете настроить сервер MongoDB или набор реплик и самостоятельно управлять ИТ-инфраструктурой, но вы также можете использовать решение Azure, которое называется Cosmos DB. While you could configure a MongoDB server, or replica set, and manage that infrastructure yourself, Azure provides a solution called Cosmos DB. Cosmos DB — это полностью управляемая высокопроизводительная база данных NoSQL с функцией георепликации, которая обеспечивает уровень совместимости MongoDB. Cosmos DB is a fully-managed, geo-replicable, high-performance, NoSQL database that provides a MongoDB-compatibility layer. Это означает, что вы можете указать в ней приложение MEAN (или любой клиент либо средство MongoDB, например Studio 3T) и вам не нужно будет ничего изменять, кроме строки подключения. This means that you can point an existing MEAN app at it (or any MongoDB client/tool such as Studio 3T) without needing to change anything but the connection string. Далее объясняется, как это сделать. The following steps illustrate how this is done:

В терминале Visual Studio Code выполните следующую команду, чтобы создать экземпляр службы Cosmos DB, совместимый с MongoDB. From the Visual Studio Code terminal, run the following command to create a MongoDB-compatible instance of the Cosmos DB service. Замените заполнитель глобально уникальным значением (Cosmos DB использует это имя для создания URL-адреса сервера базы данных): Replace the placeholder with a globally unique value (Cosmos DB uses this name to generate the database’s server URL):

Получите строку подключения MongoDB для этого экземпляра: Retrieve the MongoDB connection string for this instance:

Обновите переменную среды веб-приложения MONGODB_URL, чтобы она подключилась к новому экземпляру Cosmos DB и не пыталась подключиться к локальному серверу MongoDB (которого не существует): Update your web app’s MONGODB_URL environment variable so that it connects to the newly provisioned Cosmos DB instance instead of attempting to connect to a locally running MongoDB server (that doesn’t exist!):

Вернитесь в браузер и обновите его. Return to your browser and refresh it. Попробуйте добавить и удалить элемент списка задач, чтобы убедиться, что приложение работает и в нем не нужно ничего менять. Try adding and removing a todo item to prove that the app now works without needing to change anything! Задайте для переменной среды созданный экземпляр Cosmos DB, который является полной эмуляцией базы данных MongoDB. Set the environment variable to the created Cosmos DB instance, which is fully emulating a MongoDB database.

При необходимости можно переключиться обратно на экземпляр базы данных Cosmos DB и увеличить или уменьшить масштаб зарезервированной пропускной способности, необходимой экземпляру MongoDB. Тогда вы получите дополнительный трафик, изменяя инфраструктуру вручную. When needed, you can switch back to the Cosmos DB instance and scale up (or down) the reserved throughput that the MongoDB instance needs, and benefit from the added traffic without needing to manage any infrastructure manually.

Cosmos DB автоматически индексирует каждый документ и его свойства. Additionally, Cosmos DB automatically indexes every single document and property for you. Поэтому вам не нужно профилировать медленные запросы или вручную регулировать индексы. That way, you don’t need to profile slow queries or manually fine-tune your indexes. Просто выполните подготовку и масштабирование, а все остальное сделает Cosmos DB. Just provision and scale as needed, and let Cosmos DB handle the rest.

Размещение частного реестра Docker Hosting a private Docker registry

DockerHub позволяет распространять образы контейнера. Но иногда вам может понадобиться разместить собственный частный реестр Docker, например, чтобы повысить безопасность или производительность либо для более удобного управления. DockerHub provides an amazing experience for distributing your container images, but there may be scenarios where you’d prefer to host your own private Docker registry — such as for security/governance or performance benefits. Для этого Azure предоставляет реестр контейнеров Azure (ACR), который позволяет вам создать собственный реестр Docker, резервное хранилище которого находится в том же центре обработки данных, что и ваше веб-приложение (благодаря этому извлечение происходит быстрее). For this purpose, Azure provides the Azure Container Registry (ACR) that allows you to spin up your own Docker registry whose backing storage is located in the same data center as your web app (which makes pulls quicker). ACR также предоставляет полный контроль над содержимым и элементами управления доступом. То есть вы решаете, кто может отправлять и извлекать образы. The ACR also provides you with full control over the contents and access controls — such as who can push or pull images.

Чтобы подготовить пользовательский реестр, выполните следующую команду. Provisioning a custom registry can be accomplished by running the following command. Замените заполнитель глобальным уникальным значением, которое ACR использует для создания URL-адреса сервера входа в реестр. (Replace the placeholder with a globally unique value as ACR uses specified value to generate the registry’s login server URL.

Хотя в этих инструкциях для примера используется учетная запись администратора, не рекомендуется использовать ее в рабочих реестрах. While this topic’s example uses the admin account to keep things simple, it is not recommended for production registries.

Команды az acr create отображают URL-адрес сервера входа (в столбце LOGIN SERVER ), используемого для входа с помощью Docker CLI (например, ninademo.azurecr.io ). The az acr create commands displays the login server URL (via the LOGIN SERVER column) that you use to log in using the Docker CLI (e.g. ninademo.azurecr.io ). Кроме того, команда создает учетные данные администратора, которые можно использовать для проверки подлинности. Additionally, the command generates admin credentials that you can use in order to authenticate against it. Чтобы получить такие учетные данные, выполните следующую команду и запишите отображаемое имя пользователя и пароль: To retrieve those credentials, run the following command and note the displayed username and password:

С помощью учетных данных, созданных на предыдущем шаге, и отдельного имени входа сервера вы можете войти в реестр, используя стандартный рабочий процесс Docker CLI. Using the credentials from the previous step, and your individual login server, you can log in to the registry using the standard Docker CLI workflow.

Теперь вы можете отметить тегами свой контейнер Docker, чтобы определить связь с частным реестром. Для этого выполните следующую команду (замените lostintangent/node именем образа контейнера): You can now tag your Docker container to indicate that it’s associated with your private registry using the following command (replacing lostintangent/node with the name you gave the container image.

Отправьте отмеченный тегами образ в свой частный реестр Docker. Finally, push the tagged image to your private Docker registry.

Контейнер теперь хранится в частном реестре. С помощью Docker CLI вы можете продолжать работать с ним, как и при использовании DockerHub. Your container is now stored in your own private registry, and the Docker CLI was happy to allow you to continue working in the same way as you did when using DockerHub. Чтобы настроить веб-приложение службы приложений извлекать образ из частного реестра, выполните следующую команду: In order to instruct the App Service web app to pull from your private registry, you need only run the following command:

Обязательно добавьте префикс https:// в начало параметра -r . Make sure to add the https:// prefix to the beginning of the -r option. Не добавляйте префикс к имени образа контейнера. However, don’t add the prefix to the container image name.

Если обновить приложение в браузере, оно будет выглядеть и работать, как раньше. If you refresh the app in your browser, everything should look and work the same. Но теперь приложение работает с использованием вашего частного реестра Docker. However, it’s now running your app via your private Docker registry. Обновив приложение, отметьте тегами и отправьте изменения, как показано выше, а также обновите тег в конфигурации контейнера службы приложений. Once you update your app, tag and push the changes as done above, and update the tag in your App Service container configuration.

Настройка пользовательского доменного имени Configuring a custom domain name

Хотя URL-адрес *.azurewebsites.net отлично подходит для тестирования, в определенный момент может потребоваться добавить собственное доменное имя для веб-приложения. While the *.azurewebsites.net URL is great for testing, at some point you may want to add a custom domain name to your web app. Получив доменное имя у регистратора, вам нужно только добавить запись A , которая указывает на внешний IP-адрес веб-приложения (который фактически является подсистемой балансировки нагрузки). Once you have a domain name from a registrar, you need only add an A record to it that points at your web app’s external IP (which is actually a load balancer). Чтобы получить этот IP-адрес, выполните следующую команду: You can retrieve this IP by running the following command:

Кроме добавления записи A , добавьте запись TXT к своему домену, которая указывает на домен *.azurewebsites.net , используемый вами до сих пор. In addition to add an A record, you also need to add a TXT record to your domain that points at the *.azurewebsites.net domain you’ve been using thus far. Сочетание записей A и TXT позволяет Azure убедиться в том, что вы являетесь владельцем домена. The combination of the A and TXT records allows Azure to verify that you own the domain.

Создав эти записи и распространив изменения DNS, зарегистрируйте пользовательский домен в Azure, чтобы входящий трафик обрабатывался правильно. Once those records are created — and the DNS changes have propagated — register the custom domain with Azure so that it knows to expect the incoming traffic correctly.

Команда не будет работать, пока не будут распространены изменения в DNS. The command will not work until the DNS changes have propagated.

Откройте браузер и перейдите к пользовательскому домену, чтобы увидеть, что он разрешается в развернутое приложение в Azure. Open a browser and navigate to your custom domain to see that it now resolves to your deployed app on Azure.

Увеличение и уменьшение масштаба Scaling up and out

Ваше веб-приложение может стать настолько популярным, что его выделенных ресурсов (ЦП и ОЗУ) может не хватать для обработки увеличенного трафика и выполнения операций. At some point, your web app may become popular enough that its allocated resources (CPU and RAM) aren’t sufficient for handling the increase in traffic and operational demands. План службы приложений, который вы создали ранее (B1), предоставляет 1 ядро ЦП и 1,75 ГБ ОЗУ. Эти ресурсы можно израсходовать достаточно быстро. The App Service Plan that you created earlier (B1) comes with 1 CPU core and 1.75 GB of RAM, which can get maxed out fairly quickly. В плане В2 можно увеличить объем ЦП и ОЗУ в два раза. Поэтому, если вы заметили, что приложению не хватает одного из ресурсов, можно увеличить масштаб базовой виртуальной машины. Для этого выполните следующую команду: The B2 plan come swith twice as much RAM and CPU, so if you notice that your app is beginning to run out of either, you can scale up the underlying virtual machine by running the following command:

Сведения о ценах и спецификации планов службы приложений Azure см. на странице с ценами службы приложений. For Azure App Plan pricing details and specs, see the article, App Service Pricing

Через несколько секунд веб-приложение будет перенесено на запрошенное оборудование и начнет использовать соответствующие ресурсы. After just a few moments, your web app will be migrated to the requested hardware, and can begin taking advantage of the associated resources. Вы также можете уменьшить масштаб ресурсов. Это можно сделать с помощью той же команды. Только нужно выбрать параметр —sku , который предоставляет меньше ресурсов по более низкой цене. In addition to scaling up, you can also scale down by running the same command as above, specifying a —sku option that provides less resources at a lower price.

Если ваше веб-приложение работает без отслеживания состояния, кроме увеличения масштаба спецификаций виртуальной машины, вы также можете развернуть рабочую нагрузку, добавив дополнительные экземпляры базовой виртуальной машины. In addition to scaling up the virtual machine specs, as long as your web app is stateless, you also have the option to scale out by adding more underlying virtual machine instances. План службы приложений, созданный ранее, включал только одну виртуальную машину (рабочая роль). Поэтому весь входящий трафик ограничивался доступными ресурсами этого экземпляра. The App Service Plan you created earlier included only a single virtual machine (a worker), and therefore, all incoming traffic is ultimately bound by the limits of the available resources of that one instance. Если вы хотите добавить второй экземпляр виртуальной машины, выполните ту же команду, которую вы выполняли раньше, но вместо увеличения масштаба SKU увеличьте число рабочих виртуальных машин. If you want to add a second virtual machine instance, you could run the same command you ran earlier, but instead of scaling up the SKU, you scale out the number of worker virtual machines.

При развертывании рабочей нагрузки такого веб-приложения входящий трафик будет прозрачно сбалансирован между всеми экземплярами. Это позволит сразу увеличивать производительность, не меняя код или инфраструктуру. When you scale out a web app like this, incoming traffic will be transparently load balanced between all instances, which allows you to immediately increase your capacity without any code changes or worrying about the needed infrastructure.

Веб-приложения без отслеживания состояния рекомендуются для использования, так как они позволяют детерминированно увеличивать и уменьшать масштаб, а также развертывать рабочие нагрузки. Это возможно, так как в такой конфигурации ни виртуальные машины, ни экземпляры приложения не содержат состояние, необходимое для работы. Stateless web apps are considered a best practice as they make the ability to scale them (up, down, out) entirely deterministic as no single virtual machine or app instance includes state that is neccessary in order to function.

Хотя в этой статье приводится пример одного веб-приложения, вы можете создать и развернуть несколько веб-приложений в рамках одного плана службы приложений, чтобы не подготавливать другие планы и не платить за них. While this topic’s tutorial illustrates running a single web app as part of an App Service Plan, you can create and deploy multiple web apps into the same plan, allowing you to provision and pay for a single plan.

Очистка Clean-up

Чтобы не оплачивать неиспользуемые ресурсы Azure, выполните следующую команду в терминале Visual Studio Code. Так вы удалите все ресурсы, которые были подготовлены при выполнении инструкций из этого руководства. To ensure that you don’t get charged for any Azure resources you aren’t using, run the following command from your Visual Studio Code terminal to delete all of the resources provisioned during this tutorial.

Процесс очистки может длиться несколько минут. The clean-up process can take several minutes to complete.

После завершения очистки команда az group delete оставит вашу учетную запись Azure в том же состоянии, в котором она была до начала работы с руководством. Once finished, the az group delete command leaves your Azure account in the same state it was before you started the tutorial. Возможность организовывать, развертывать и удалять ресурсы Azure как единый объект является одним из основных преимуществ групп ресурсов. The ability to organize, deploy, and delete Azure resources as a single unit is one of the primary benefits of resource groups. Поэтому рекомендуется группировать ресурсы, для которых вы планируете одинаковое время существования. Therefore, as a recommended practice, you should group your resources together that you anticipate having the same lifespan.

22 полезных расширения для начинающего программиста

Расширения для Chrome и Visual Studio Code, которые облегчат многие задачи при написании кода и сэкономят ваше время.

Расширения для Chrome

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

2. Pesticide — инструмент для выделения контуров

3. Colorzilla — инструмент для получения точных цветов с веб-сайтов. Для удобства код цвета копируется прямо в буфер обмена.

4. CSS Peeper — расширение для просмотра используемых на сайтах цветов и ассетов: иллюстраций, текстовых документов, файлов вёрстки, видеофайлов.

5. Wappalyzer — утилита, которая позволяет идентифицировать системы управления контентом, фреймворки, серверное ПО, инструменты аналитики и другие технологии, используемые на сайтах.

6. React Developer Tools — полезный инструмент для отладки приложений на React.js.

7. Redux DevTools — инструмент для отладки приложений с использованием Redux.

8. JSON Formatter — расширение для упрощения читаемости JSON с подсветкой синтаксиса, отступами, кликабельными ссылками.

9. Vimeo Repeat and Speed — простое расширение для ускорения видео сервиса Vimeo, что бывает полезно при просмотре видеоуроков.

Расширения для VS Code

10. Auto Rename Tag — расширение для переименования тегов HTML. При изменении открывающего тега автоматически сменится и закрывающий.


11. HTML CSS Support — поддержка CSS для HTML-документов с подсветкой синтаксиса, подключением удалённых CSS-файлов и другими полезными функциями.

12. HTML Snippets — готовые фрагменты кода для экономии времени.

13. Babel ES6/ES7 — инструмент для подсветки и проверки синтаксиса JavaScript Babel.

14. Bracket Pair Colorizer — инструмент для окрашивания открывающих и закрывающих скобок определёнными цветами для их быстрого поиска.

15. ESLint — интеграция ESLint в Visual Studio Code для проверки качества вашего кода и поиска ошибок.

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

17. JavaScript Console Utils — утилита для упрощения создания полезных инструкций console.log(), в том числе быстрой вставки кода для логирования выбранной переменной.

18. Code Spell Checker — расширение для быстрой проверки орфографии кода.

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

20. Path Intellisense — инструмент для автоматического дополнения имён файлов по мере ввода строки.

21. Prettier — расширение для автоматического форматирования кода и приведения его различных участков к единому виду.

22. VSCode-Icons — добавление наглядных иконок к дереву файлов для более удобного поиска и лучшего визуального восприятия.

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

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

Как писать код и сразу видеть результат

Когда толь­ко начи­на­ешь про­грам­ми­ро­вать и делать сай­ты, важ­но пони­мать, что вооб­ще про­ис­хо­дит. Вот изме­нил ты пара­метр объ­ек­та — а пра­виль­но или нет? Зара­бо­та­ло это или нет? Кра­си­во вышло или ужас­но?

Что­бы раз­ра­бот­чик сра­зу видел резуль­тат тру­да, боги созда­ли для него IDE — integrated development environment, по-русски — сре­ду раз­ра­бот­ки. Это про­грам­ма, в кото­рой про­грам­мист пишет код, ловит ошиб­ки и наблю­да­ет резуль­тат.

Чисто тех­ни­че­ски рабо­тать мож­но и без IDE: писать код в блок­но­те и про­смат­ри­вать его в спе­ци­аль­ных про­грам­мах или бра­у­зе­ре. Но это быва­ет мед­лен­но и тре­бу­ет допол­ни­тель­ных тело­дви­же­ний. Луч­ше научить­ся поль­зо­вать­ся IDE и писать в сто раз быст­рее.

Выбор сре­ды раз­ра­бот­ки (IDE) — дело вку­са и при­выч­ки. Какие-то из них — уни­вер­саль­ные, дру­гие зато­че­ны под кон­крет­ные язы­ки про­грам­ми­ро­ва­ния. IDE часто похо­жи по сво­им воз­мож­но­стям и поз­во­ля­ют уве­ли­чи­вать функ­ци­о­наль­ность за счёт внеш­них допол­не­ний.

Visual Studio Code

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

VS Code рас­по­зна­ёт почти все суще­ству­ю­щие язы­ки про­грам­ми­ро­ва­ния, само­сто­я­тель­но или с помо­щью пла­ги­нов, и фор­ма­ти­ру­ет их соот­вет­ству­ю­щим обра­зом. Кро­ме это­го, у него глу­бо­кая под­держ­ка HTML, CSS, JavaScript и PHP — он про­сле­дит за пар­ны­ми тега­ми, закры­ты­ми скоб­ка­ми и ошиб­ка­ми в коман­дах.

Вот самые инте­рес­ные воз­мож­но­сти VS Code.

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

Выпол­не­ние скрип­тов по шагам. Ино­гда нуж­но иметь воз­мож­ность выпол­нить скрипт не сра­зу, а по шагам, напри­мер, что­бы понять, не зацик­ли­лась ли наша про­грам­ма. Для это­го исполь­зуй­те встро­ен­ный дебаг­гер — это про­грам­ма, кото­рая сле­дит за кодом, ищет в нём ошиб­ки и поз­во­ля­ет выпол­нять его поэтап­но.

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

Муль­ти­кур­сор помо­га­ет вво­дить оди­на­ко­вые зна­че­ния сра­зу на несколь­ких стро­ках

Най­ден­ные оди­на­ко­вые сло­ва и коман­ды мож­но тут же заме­нить на дру­гие

Нави­га­ция по коду и опи­са­ния функ­ций. Когда пишешь боль­шую про­грам­му, лег­ко забыть то, что делал в нача­ле — как рабо­та­ет функ­ция или како­го типа пере­мен­ная исполь­зу­ет­ся в этом месте. Что­бы это­го избе­жать, VS Code может пока­зы­вать саму функ­цию, опи­са­ние пере­мен­ной или какие пара­мет­ры пере­да­ют­ся при вызо­ве коман­ды. Ещё это при­го­дит­ся, если код достал­ся вам по наслед­ству от про­шло­го раз­ра­бот­чи­ка и нуж­но быст­ро понять, какие кус­ки кода за что отве­ча­ют и как рабо­та­ют:

Сра­зу после уста­нов­ки VS Code не уме­ет пока­зы­вать резуль­та­ты рабо­ты кода, когда мы дела­ем веб-страницы. Это мож­но испра­вить с помо­щью рас­ши­ре­ния Live HTML Previewer. Для это­го захо­дим в раз­дел «Extensions», щёл­кая на послед­нем знач­ке на пане­ли сле­ва или нажи­мая Ctrl+Shift+X, и начи­на­ем писать «Live HTML Previewer» в стро­ке поис­ка.

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

WebStorm

Сре­да раз­ра­бот­ки для JavaScript от ком­па­нии jetBrains сто­ит денег, но есть проб­ный пери­од в 30 дней. Вполне хва­тит, что­бы попро­бо­вать и понять, нуж­на эта про­грам­ма или нет.

Авто­под­ста­нов­ка. Неко­то­рые IDE с авто­под­ста­нов­кой тор­мо­зят и не пред­ла­га­ют сра­зу все вари­ан­ты пере­мен­ных или команд — но не WebStorm. Здесь всё рабо­та­ет с пер­вой бук­вы и пони­ма­ет, когда надо пред­ло­жить пере­мен­ную, а когда коман­ду или слу­жеб­ное сло­во:

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

Про­вер­ка оши­бок. WebStorm уме­ет сам про­ве­рять код на ошиб­ки и пояс­нять каж­дую из них. Не все­гда это рабо­та­ет иде­аль­но, но когда рабо­та­ет — эко­но­мит кучу вре­ме­ни:

Что­бы сра­зу видеть, что полу­ча­ет­ся на стра­ни­це, нам пона­до­бит­ся пла­гин LiveEdit. По умол­ча­нию он выклю­чен, но его мож­но вклю­чить или поста­вить отдель­но в любое вре­мя. После акти­ва­ции нуж­но будет в настрой­ках пла­ги­на поста­вить галоч­ку «Update application in Chrome on changes in» — она как раз отве­ча­ет за обнов­ле­ние инфор­ма­ции в бра­у­зе­ре Chrome. Теперь мож­но писать код и сра­зу видеть резуль­тат:

Sublime Text 3

Бес­плат­ный редак­тор, кото­рый назой­ли­во пред­ла­га­ет зане­сти денег раз­ра­бот­чи­кам. Про Sublime Text у нас есть отдель­ная и более подроб­ная ста­тья — почи­тай­те, там тоже инте­рес­но.

Sublime Text — потря­са­ю­ще мощ­ный тек­сто­вый редак­тор. Его сила — в ско­ро­сти рабо­ты, он оди­на­ко­во быст­ро обра­бо­та­ет про­стую веб-страничку или про­грам­му на сто тысяч строк кода. Под­свет­ка син­так­си­са всех воз­мож­ных язы­ков про­грам­ми­ро­ва­ния, авто­под­ста­нов­ка, умное закры­тие тегов — всё это доступ­но сра­зу после уста­нов­ки.

Вот что ещё уме­ет про­грам­ма сра­зу после уста­нов­ки:

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

Вто­рая супер­спо­соб­ность, кото­рая пре­вра­ща­ет Sublime Text из про­сто­го тек­сто­во­го редак­то­ра в уни­вер­саль­ное реше­ние, — пла­ги­ны. По прин­ци­пу дей­ствия они такие же, как и в дру­гих про­грам­мах из обзо­ра, но они совер­шен­но не вли­я­ют на ско­рость рабо­ты. Когда начи­на­ешь плот­но рабо­тать с Sublime Text, может пока­зать­ся, что у него есть пла­ги­ны для все­го. Нуж­но редак­ти­ро­вать одно­вре­мен­но один и тот же код, но в раз­ных пане­лях — пожа­луй­ста, напи­сать быст­ро HTML-код — само собой, про­ве­рить код на ошиб­ки и недо­чё­ты — без про­блем.

Emmet сокра­ща­ет вре­мя на напи­са­ние кода, под­став­ляя вме­сто стан­дарт­ных команд целые кус­ки гото­во­го кода

JavaScript & NodeJS Snippets упро­ща­ет напи­са­ние кода на JavaScript и рабо­та­ет по тому же прин­ци­пу, что и Emmet

SublimeCodeIntel помо­га­ет быст­ро разо­брать­ся в коде со мно­же­ством функ­ций. Если щёлк­нуть на назва­ние любой функ­ции, пла­гин сра­зу пока­жет вам её опи­са­ние.

Так как эта ста­тья — для начи­на­ю­щих про­грам­ми­стов, кото­рым важ­но сра­зу видеть изме­не­ния в коде, то посмот­рим, как это дела­ет Sublime Text.

Сра­зу после уста­нов­ки он это­го делать не уме­ет, но нам помо­жет пла­гин LiveReload. Он пока­зы­ва­ет все изме­не­ния в бра­у­зе­ре, как толь­ко мы сохра­ня­ем рабо­чий файл с кодом. Это не так изящ­но, как в VS Code, но в слу­чае с Sublime Text про­сти­тель­но. Дело в том, что при­вык­нув одна­жды писать в нём код, слож­но пере­сесть на что-то дру­гое, что рабо­та­ет с той же ско­ро­стью. Уста­нов­ка LiveReload состо­ит из двух ком­по­нен­тов — пла­гин для Sublime Text и рас­ши­ре­ние для бра­у­зе­ра.

После уста­нов­ки давай­те посмот­рим, что у нас полу­чи­лось. Созда­дим файл tested.html в Sublime Text, раз­ме­тим его внут­ри стан­дарт­ным шаб­ло­ном как HTML-документ, а рядом откро­ем окно бра­у­зе­ра.

В реаль­ном вре­ме­ни мы не уви­дим на стра­ни­це те изме­не­ния, кото­рые вно­сим в код, как это было в VS Code. Но если нажать Ctrl+S, что­бы сохра­нить все дан­ные, то бра­у­зер момен­таль­но пока­зы­ва­ет то, что мы сде­ла­ли.

Если вы серьёз­но настро­е­ны про­грам­ми­ро­вать, при­смот­ри­тесь к Visual Studio Code. Почти со всем он справ­ля­ет­ся сам или с пла­ги­на­ми, не нуж­но под­клю­чать допол­ни­тель­но бра­у­зе­ры или сто­рон­ний софт.

Люби­те, что­бы после уста­нов­ки были доступ­ны почти все нуж­ные функ­ции? Попро­буй­те WebStorm — плат­ную, но мощ­ную сре­ду раз­ра­бот­ки.

Если вам важ­на ско­рость рабо­ты в любых ситу­а­ци­ях, то Sublime Text — луч­ший выбор. Он очень быст­рый, и для него есть пла­ги­ны почти на все слу­чаи жиз­ни.

14 полезных плагинов для VS Code

Мы продолжаем знакомиться с возможностями редактора кода Visual Studio Code. Его функциональность можно сильно расширить за счет плагинов. Они устанавливаются через маркет, встроенный в редактор. После переоткрытия VS Code все возможности расширения можно использовать на ряду со стандартными. Плагины, которые мы рассмотрим, не специфичны для разных языков программирования. Здесь собраны общие расширения, которые смогут использовать программисты с разными языковыми предпочтениями.

Напомню, что в прошлый раз мы рассмотрели базовые возможности редактора VS Code и некоторые интересные способы для кастомизации своего рабочего пространства.

Итак, для каждого плагина мы ответим на три вопроса:

  1. Что он делает?
  2. В каких ситуациях можно использовать?
  3. Как использовать?

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

1. VSCode Faker

  1. Генерирует данные для разных категорий. Начиная от имен и гуидов, заканчивая адресами и изображениями.
  2. Пригодится при создании тестовых данных. С одной стороны может показаться, что использовать плагин для придумывания имен будет только очень ленивый человек. С другой стороны, например генерирование номеров телефонов или других данных, соответствующих шаблону, будет происходить гораздо быстрее благодаря Faker.
  3. Все команды плагина можно найти в Command Palette по префиксу ` Faker ` . Выберите тип фейковых данных, и они будут вставлены в код.

2. Bracket Pair Colorized

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

3. Change Case

  1. Преобразовывает текст в разные регистры. Помимо простых нижнего и верхнего есть и более интересные варианты: Camel или Pascal Case, разделение строк точками или слешами и десяток других вариантов.
  2. Быстро изменить регистр бывает нужно в разных ситуациях; такой инструмент прямо в редакторе очень кстати. Кроме того, он может пригодиться в ходе рефакторинга, например для приведения имен переменных к одинаковому виду.
  3. Выделите текст и выберите нужный регистр через Command Palette. Все команды начинаются с ` Change Case ` .

4. Guides

  1. Соединяет отступы линиями и подсвечивает ту, на которой курсор.
  2. Плагин помогает ориентироваться, на каком уровне вложенности вы находитесь. Простое расширение, но с ним писать код станет немножко проще.
  3. Включается автоматически при установке плагина.

5. Path Intellisense

  1. Автодополнение для файлов и директорий.
  2. Чтобы использовать относительный путь к файлу, не нужно заниматься копипастом и сравнивать расположение текущей папки с нужной. Также можно использовать абсолютные пути.
  3. Просто начните вводить путь “./” и выбирайте нужные директории и файлы.

6. TODO Highlight

  1. Выделяет комментарии TODO и FIXME.
  2. В момент, когда вы решите закончить со всеми недоработками, вы сможете легко найти свои метки и ничего не упустить.
  3. В Command Palette по префиксу ` TODO ` появится две команды: выделить метки и вывести список всех меток в Output.

7. Bookmarks

  1. Помечает строки кода, после чего можно быстро на них перемещаться.
  2. Если в большом файле есть несколько мест, в которых вы активно ведете изменения, такая функциональность очень пригодится.
  3. Для создания и перемещения по закладкам автоматически регистрируются комбинации горячих клавиш. Чтобы изучить команды плагина введите в Command Palette ` Bookmarks ` .

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

1. Docker

  1. Поддержка докера включает работу с образами, контейнерами, Dockerfile и многое другое.
  2. Если вы используете контейнеризацию, то этот плагин для вас. Docker максимально интегрирован в редактор кода.
  3. В Explorer добавляется новый блок с образами, контейнерами и реестрами. Все основные операции, связанные с ними, можно исполнить через Command Palette. Кроме того, в плагин включена поддержка Dockerfile и docker-compose, в которую входят подсветка синтаксиса, автодополнение и определение ошибок.


2. REST Client

  1. Позволяет выполнять HTTP запросы прямо из кода.
  2. Благодаря этому плагину, можно не открывать Postman или Insomnia, чтобы выполнить запрос и посмотреть ответ. Делайте все прямо в редакторе.
  3. Выделите запрос в формате ` METHOD url ` и нажмите ` Crtl + Alt + R ` . Результат отобразится во вкладке справа. Другие команды, например: выполнить последний запрос еще раз или сохранить тело ответа, можно посмотреть в Command Palette.

3. Project Manager

  1. Позволяет легко переключаться между проектами.
  2. Без этого плагина чтобы открыть проект, нужно либо запустить VS Code в нужной директории, либо искать ее в самом редакторе. С Project Manager вы сможете перейти в проект, просто выбрав его из списка.
  3. Сохраните ваши рабочие пространства и переключайтесь между ними через специальный блок в Explorer.

4. GitLens

  1. Предоставляет более широкие возможности при работе с гитом, чем встроенный в VS Code вариант.
  2. Если вы активно работаете с гитом, то советую установить этот плагин. Вы сможете просматривать историю, ветки, аннотации, теги и другие неотъемлемые части системы контроля версий, которые предоставляются стандартным набором VS Code в очень ограниченном формате.
  3. Вся информация о репозитории появится в новом блоке Explorer’а после установки расширения.

5. WakaTime

  1. Ведет статистику при использовании редактора.
  2. Этот сервис достаточно популярен и поддерживается во многих других редакторах кода и IDE. Тайм-трекер учитывает разные языки программирования, разные проекты и разные редакторы, в которых вы работаете.
  3. Если у вас нет аккаунта на wakatime.com, заведите и укажите API-ключ в настройках плагина. Используйте этот ключ также в IDE, в которой пишите код, и собирайте полноценную информацию о времени, затраченном на разные проекты. Всю статистику можно смотреть на том же сайте.

6. VS Code Icons

  1. Заменяет стандартные иконки для файлов в Explorer.
  2. Плагин для ценителей красоты. Иконки более яркие и интересные, чем в дефолтном варианте, хотя для кого-то это и сомнительный плюс. Более важно то, что с ними проще отличать и узнавать разные типы файлов.
  3. Для переключения между стандартными темами иконок и вариантом плагина, введите в Command Palette: ` Preferences: File Icon Theme ` .

7. Settings Sync

  1. Синхронизирует настройки для VS Code через Github.
  2. Как мы убедились, в Visual Studio Code можно многое настроить под себя. Этот плагин позволяет синхронизировать ваши пользовательские настройки, комбинации горячих клавиш, сниппеты и настройки для расширений.
  3. Используйте команды, начинающиеся на ` Sync ` . В процессе синхронизации вам будет необходимо сгенерировать токен через Github и использовать его в редакторе.

Мы рассмотрели общие плагины, но не стоит забывать про расширения для конкретных языков. Они включают IntelliSense, навигацию по коду, ошибки компилятора, отладку и другие очень полезные для программирования возможности.

Written on March 3rd , 2020 by Alexey Kalina

JavaScript in Visual Studio Code

Visual Studio Code includes built-in JavaScript IntelliSense, debugging, formatting, code navigation, refactorings, and many other advanced language features.

Most of these features just work out of the box, while some may require basic configuration to get the best experience. This page summarizes the JavaScript features that VS Code ships with. Extensions from the VS Code Marketplace can augment or change most of these built-in features. For a more in-depth guide on how these features work and can be configured, see Working with JavaScript.

IntelliSense

IntelliSense shows you intelligent code completion, hover info, and signature information so that you can write code more quickly and correctly.

Sorry, your browser doesn’t support HTML 5 video.

VS Code provides IntelliSense within your JavaScript projects; for many npm libraries such as React , lodash , and express ; and for other platforms such as node , serverless, or IoT.

See Working with JavaScript for information about VS Code’s JavaScript IntelliSense, how to configure it, and help troubleshooting common IntelliSense problems.

JavaScript projects (jsconfig.json)

A jsconfig.json file defines a JavaScript project in VS Code. While jsconfig.json files are not required, you will want to create one in cases such as:

  • If not all JavaScript files in your workspace should be considered part of a single JavaScript project. jsconfig.json files let you exclude some files from showing up in IntelliSense.
  • To ensure that a subset of JavaScript files in your workspace are treated as a single project. This is useful if you are working with legacy code that uses implicit globals dependencies instead of imports for dependencies.
  • If your workspace contains more than one project context, such as front-end and back-end JavaScript code. For multi-project workspaces, create a jsconfig.json at the root folder of each project.
  • You are using the TypeScript compiler to down-level compile JavaScript source code.

To define a basic JavaScript project, add a jsconfig.json at the root of your workspace:

See Working with JavaScript for more advanced jsconfig.json configuration.

Tip: To check if a JavaScript file is part of JavaScript project, just open the file in VS Code and run the JavaScript: Go to Project Configuration command. This command opens the jsconfig.json that the JavaScript file belongs to. A notification is shown if the file is not part of any jsconfig.json project.

Snippets

VS Code includes basic JavaScript snippets that are suggested as you type;

Sorry, your browser doesn’t support HTML 5 video.

There are many extensions that provide additional snippets, including snippets for popular frameworks such as Redux or Angular. You can even define your own snippets.

Tip: To disable snippets suggestions, set editor.snippetSuggestions to «none» in your settings file. The editor.snippetSuggestions setting also lets you change where snippets appear in the suggestions: at the top ( «top» ), at the bottom ( «bottom» ), or inlined ordered alphabetically ( «inline» ). The default is «inline» .

JSDoc support

VS Code understands many standard JSDoc annotations, and uses these annotations to provide rich IntelliSense. You can optionally even use the type information from JSDoc comments to type check your JavaScript.

Sorry, your browser doesn’t support HTML 5 video.

Quickly create JSDoc comments for functions by typing /** before the function declaration, and select the JSDoc comment snippet suggestion:

Sorry, your browser doesn’t support HTML 5 video.

To disable JSDoc comment suggestions, set «javascript.suggest.completeJSDocs»: false .

Hover Information

Hover over a JavaScript symbol to quickly see its type information and relevant documentation.

The ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I ) keyboard shortcut shows this hover info at the current cursor position.

Signature Help

As you write JavaScript function calls, VS Code shows information about the function signature and highlights the parameter that you are currently completing:

Signature help is shown automatically when you type a ( or , within a function call. Press ⇧⌘Space (Windows, Linux Ctrl+Shift+Space ) to manually trigger signature help.

Auto imports

Automatic imports speed up coding by suggesting available variables throughout your project and its dependencies. When you select one of these suggestions, VS Code automatically adds an import for it to the top of the file.

Just start typing to see suggestions for all available JavaScript symbols in your current project. Auto import suggestions show where they will be imported from:

If you choose one of these auto import suggestions, VS Code adds an import for it.

In this example, VS Code adds an import for Button from material-ui to the top of the file:

To disable auto imports, set «javascript.suggest.autoImports» to false .

Tip: VS Code tries to infer the best import style to use. You can explicitly configure the preferred quote style and path style for imports added to your code your code with the javascript.preferences.quoteStyle and javascript.preferences.importModuleSpecifier settings.

Formatting

VS Code’s built-in JavaScript formatter providers basic code formatting with reasonable defaults.

The javascript.format.* settings configure the built-in formatter. Or, if the built-in formatter is getting in the way, set «javascript.format.enable» to false to disable it.

For more specialized code formatting styles, try installing one of the JavaScript formatting extensions from the marketplace.

JSX and auto closing tags

All of VS Code’s JavaScript features also work with JSX:

You can use JSX syntax in both normal *.js files and in *.jsx files.

VS Code also includes JSX-specific features such as autoclosing of JSX tags:

Sorry, your browser doesn’t support HTML 5 video.

Set «javascript.autoClosingTags» to false to disable JSX tag closing.

Code navigation

Code navigation lets you quickly navigate JavaScript projects.

  • Go To Definition F12 — Go to the source code of a symbol definition.
  • Peek Definition ⌥F12 (Windows Alt+F12 , Linux Ctrl+Shift+F10 ) — Bring up a Peek window that shows the definition of a symbol.
  • Peek References ⇧F12 (Windows, Linux Shift+F12 ) — Show all references to a symbol.
  • Go to Type Definition — Go to the type that defines a symbol. For an instance of a class, this will reveal the class itself instead of where the instance is defined.

You can navigate via symbol search using the Go to Symbol commands from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ).

  • Go to Symbol in File ⇧⌘O (Windows, Linux Ctrl+Shift+O )
  • Go to Symbol in Workspace ⌘T (Windows, Linux Ctrl+T )

Rename

Press F2 to rename the symbol under the cursor across your JavaScript project:

Refactoring

VS Code includes some handy refactorings for JavaScript such as Extract function and Extract constant. Just select the source code you’d like to extract and then click on the lightbulb in the gutter or press ( ⌘. (Windows, Linux Ctrl+. ) ) to see available refactorings.

Available refactorings include:

  • Extract to method or function.
  • Extract to constant.
  • Convert between named imports and namespace imports.
  • Move to new file.

See Refactorings for more information about refactorings and how you can configure keyboard shortcuts for individual refactorings.

Unused variables and unreachable code

Unused JavaScript code, such the else block of an if statement that is always true or an unreferenced import, is faded out in the editor:


You can quickly remove this unused code by placing the cursor on it and triggering the Quick Fix command ( ⌘. (Windows, Linux Ctrl+. ) ) or clicking on the lightbulb.

To disable fading out of unused code, set «editor.showUnused» to false . You can also disable fading of unused code only in JavaScript by setting:

Organize Imports

The Organize Imports Source Action sorts the imports in a JavaScript file and removes any unused imports:

Sorry, your browser doesn’t support HTML 5 video.

You can run Organize Imports from the Source Action context menu or with the ⇧⌥O (Windows, Linux Shift+Alt+O ) keyboard shortcut.

Organize imports can also be automatically when you save a JavaScript file by setting:

Code suggestions

VS Code automatically suggests some common code simplifications such as converting a chain of .then calls on a promise to use async and await

Sorry, your browser doesn’t support HTML 5 video.

Set «javascript.suggestionActions.enabled» to false to disable suggestions.

References CodeLens

The JavaScript references CodeLens displays an inline count of reference for classes, methods, properties, and exported objects:

To enable the references code lens, set «javascript.referencesCodeLens.enabled» to true .

Click on the reference count to quickly browse a list of references:

Update imports on file move

When you move or rename a file that is imported by other files in your JavaScript project, VS Code can automatically update all import paths that reference the moved file:

Sorry, your browser doesn’t support HTML 5 video.

The javascript.updateImportsOnFileMove.enabled setting controls this behavior. Valid settings values are:

  • «prompt» — The default. Asks if paths should be updated for each file move.
  • «always» — Always automatically update paths.
  • «never» — Do not update paths automatically and do not prompt.

Linters

Linters provides warnings for suspicious looking code. While VS Code does not include a built-in JavaScript linter, many JavaScript linter extensions available in the marketplace.

Tip: This list is dynamically queried from the VS Code Marketplace. Read the description and reviews to decide if the extension is right for you.

Type checking

You can leverage some of TypeScript’s advanced type checking and error reporting functionality in regular JavaScript files too. This is a great way to catch common programming mistakes. These type checks also enable some exciting Quick Fixes for JavaScript, including Add missing import and Add missing property.

TypeScript tried to infer types in .js files the same way it does in .ts files. When types cannot be inferred, they can be specified explicitly with JSDoc comments. You can read more about how TypeScript uses JSDoc for JavaScript type checking in Working with JavaScript.

Type checking of JavaScript is optional and opt-in. Existing JavaScript validation tools such as ESLint can be used alongside built-in type checking functionality.

Debugging

VS Code comes with great debugging support for JavaScript. Set breakpoints, inspect objects, navigate the call stack, and execute code in the Debug Console. See the Debugging topic to learn more.

Debug client side

You can debug your client-side code using a browser debugger such as Debugger for Chrome, Debugger for Edge or Debugger for Firefox.

Debug server side

Debug Node.js in VS Code using the built-in debugger. Setup is easy and there is a Node.js debugging tutorial to help you.

Popular extensions

VS Code ships with excellent support for JavaScript but you can additionally install debuggers, snippets, linters, and other JavaScript tools through extensions.

Tip: The extensions shown above are dynamically queried. Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

Next steps

Read on to find out about:

  • Working with JavaScript — More detailed information about VS Code’s JavaScript support and how to troubleshoot common issues.
  • jsconfig.json — Detailed description of the jsconfig.json project file.
  • IntelliSense — Learn more about IntelliSense and how to use it effectively for your language.
  • Debugging — Learn how to set up debugging for your application.
  • Node.js — A walkthrough to create an Express Node.js application.
  • TypeScript — VS Code has great support for TypeScript, which brings structure and strong typing to your JavaScript code.

Watch these introductory videos:

  • IntelliSense — Tutorial on IntelliSense with JavaScript.
  • Debugging — Learn how to debug a Node.js application.

Common questions

Does VS Code support JSX and React Native?

VS Code supports JSX and React Native. You will get IntelliSense for React/JSX and React Native from automatically downloaded type declaration (typings) files from the npmjs type declaration file repository. Additionally, you can install the popular React Native extension from the Marketplace.

To enable ES6 import statements for React Native, you need to set the allowSyntheticDefaultImports compiler option to true . This tells the compiler to create synthetic default members and you get IntelliSense. React Native uses Babel behind the scenes to create the proper run-time code with default members. If you also want to do debugging of React Native code, you can install the React Native Extension.

IntelliSense is not working for external libraries

Automatic Type Acquisition works for dependencies downloaded by npm (specified in package.json ), Bower (specified in bower.json ), and for many of the most common libraries listed in your folder structure (for example jquery-3.1.1.min.js ).

ES6 Style imports are not working.

When you want to use ES6 style imports but some type declaration (typings) files do not yet use ES6 style exports, then set the TypeScript compiler option allowSyntheticDefaultImports to true.

Can I debug minified/uglified JavaScript?

Yes, you can. You can see this working using JavaScript source maps in the Node.js Debugging topic.

How do I disable Syntax Validation when using non-ES6 constructs?

Some users want to use syntax constructs like the proposed pipeline ( |> ) operator. However, these are currently not supported by VS Code’s JavaScript language service and are flagged as errors. For users who still want to use these future features, we provide the javascript.validate.enable setting.

With javascript.validate.enable: false , you disable all built-in syntax checking. If you do this, we recommend that you use a linter like ESLint to validate your source code. Since VS Code’s JavaScript support doesn’t understand ES7 constructs, features like IntelliSense might not be fully accurate.

Can I use other JavaScript tools like Flow?

Yes, but some of Flow’s language features such as type and error checking may interfere with VS Code’s built-in JavaScript support. To learn how to disable VS Code’s built-in JavaScript support, see Disable JavaScript support.

Список инструментов разработчика JavaScript

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

Инструменты сборки и автоматизации

  • Webpack — представляет собой модульный упаковщик, который создаёт граф зависимостей со всеми модулями для приложения на JavaScript. Webpack упаковывает модули в один или несколько маленьких пакетов для загрузки браузером. Кроме того, Webpack может использоваться в качестве средства запуска задач, так как он анализирует зависимости между модулями и образовывает ресурсы (ассеты). Подробнее с использованием Webpack в своих проектах вы можете ознакомиться в нашей статье.
  • Grunt — таск раннер, предназначенный для автоматизации повторяющихся и трудоёмких задач, которые отнимают много времени. В его программной экосистеме существует огромное количество плагинов (более 6000).
  • Gulp — не очередной диспетчер запуска задач, а инструмент с интересным подходом: он определяет задачи в JavaScript как функции, также GUl автоматизирует «болезненные» задачи, предлагая обширную программную экосистему (более 2700 плагинов), также он обеспечивает лучшую прозрачность и контроль над процессом.
  • Browserify позволяет разработчикам программного обеспечения использовать модули стиля NodeJS в браузерах. Вы определяете зависимости, а Broweserify упаковывает всё это в аккуратный JS-файл.
  • Brunch.io — инструмент, основными идеями которого являются скорость и простота. Он поставляется с простой конфигурацией и подробной документацией для быстрого запуска. Brunch автоматически создаёт карту JS-файлов вместе с таблицами стилей CSS, что упрощает процесс отладки на стороне клиента.
  • Yeoman — универсальный инструмент, который может использоваться с почти любым языком программирования (JavaScript, Python, C#, Java и прочие). Эта базовая система кодогенерации с богатой программной экосистемой (более 6200 плагинов) служит для разработки веб-приложений. Благодаря Yeoman вы можете быстро создавать новые проекты, не забывая об обслуживании и улучшении уже существующих.

IDE и редакторы кода

  • WebStorm — мощная IDE для продвинутой разработки веб-приложений на JavaScript. Она предлагает поддержку различных фреймворков и языков разметки. WebStorm может быть легко интегрирован с дополнительными инструментами вроде тестеров, средств контроля качества кода, сборщиков и т. д. В IDE также встроены такие функции, как автоматическое завершение кода, немедленное обнаружение ошибок, навигация, встроенный терминал, богатый набор плагинов и многое другое.
  • Atom — бесплатный продукт от GitHub и выбор №1 для многих разработчиков. Он представляет собой легко настраиваемый редактор кода, который поставляется с некоторыми интересными функциями «прямо из коробки». В Atom имеется встроенный менеджер пакетов, интеллектуальное автоматическое завершение кода и прочие полезные функции. Также Atom является кроссплатформенным редактором кода.
  • Visual Studio Code — поддерживается компанией Microsoft и полностью поддерживает TypeScript «прямо из коробки». В Visual Studio Code есть интеллектуальное завершение кода и подсветка синтаксиса с помощью технологии автодополнения IntelliSense, также есть встроенный инструмент отладки, встроенная поддержка команд Git, контроль версий и многое другое. Более того, вы можете расширить функциональность редактора путём подключения широкого спектра расширений.
  • Brackets — это лёгкий редактор кода с открытым исходным кодом. В основном он ориентирован на визуальные инструменты и поддержку процессора для упрощения работы в браузере. Brackets поставляется с удобной функцией предварительного просмотра в реальном времени.

Инструменты документирования кода

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

  • Swagger — это набор правил и инструментов для описания API. Инструмент представляет собой языконезависимую утилиту. Это значит, что Swagger создаёт чёткую документацию, которая читается одинаково хорошо как человеком, так и машиной, позволяя автоматизировать процессы зависящие от API.
  • JSDoc — набор инструментов, автоматически создающий многостраничную текстовую документацию (HTML, JSON, XML и т. д.) из комментариев из исходного кода на JavaScript. Это приложение может пригодиться для управления крупномасштабными проектами.
  • jGrouseDoc (jGD) — это гибкий инструмент с открытым исходным кодом, который позволяет разработчикам генерировать API из комментариев из исходного кода на JavaScript. jGD документирует не только переменные и функции, но и пространства имён, интерфейсы, пакеты и некоторые другие элементы.
  • YUIDoc — приложение, написанное на NodeJS. Оно использует синтаксис, подобный тому, который применяется в Javadoc и Doxygen. Также инструмент может похвастаться поддержкой предварительного просмотра в реальном времени, расширенной поддержкой языка и продвинутой разметку.
  • Docco — бесплатный инструмент для документации, написанный на «литературном» CoffeeScript. Он создаёт HTML-документ для отображения ваших комментариев, чередующихся с кодом. Следует отметить, что инструмент поддерживает не только JavaScript, но и другие языки. Например, Python, Ruby, Clojure и прочие.

Инструменты тестирования

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

  • Jasmine — BDD-фреймворк (Behavior-driven Development — разработка на основе поведений) служит для тестирования JS-кода. У него нет внешних зависимостей, и он не требует запуска DOM. Jasmine имеет чистый и понятный синтаксис, что позволяет ускорять и упрощать тестирование. Также фреймворк может использоваться для тестирования кода Python и Ruby.
  • Mocha — это функциональная тестовая среда, работающая на Node.js в браузере. Она проводит тесты последовательно для обеспечения гибкой и точной отчётности, делая асинхронные тесты весёлыми и лёгкими. Mocha часто используется вместе с Chai для проверки результатов теста.
  • PhantomJS часто используется для интерфейсных тестов и юнит-тестов. Учитывая то, что это что-то вроде «безголового» WebKit, скрипты выполняются намного быстрее. Также он включает в себя встроенную поддержку различных веб-стандартов. Например, JSON, Canvas, обработку DOM, SVG и селекторы CSS.
  • Protractor — это сквозной тестовый фреймворк, написанный на Node.js для тестирования приложений на AngularJS и Angular. Он был создан на основе WebDriverJS и проверяет приложения подобно конечному пользователю, используя специальные драйвера и встроенные события.

Инструменты отладки

Отладка кода — довольно трудоёмкий и поглощающий время процесс для JavaScript-разработчиков. Инструменты для отладки кода будут особенно полезны при работе с тысячами строк кода. Многие из инструментов отладки обеспечивают довольно точные результаты.

  • JavaScript Debugger — инструмент от сообщества разработчиков Mozilla (MDN), который может быть использован как автономное веб-приложение для отладки кода в разных браузерах. Firefox предлагает локальные и удалённые функциональные возможности, а также возможность отладки кода на Android-устройстве с помощью Firefox для Android.
  • Chrome Dev Tools — набор инструментов, включающий в себя несколько утилит для отладки кода JavaScript, редактирования CSS и тестирования производительности приложений.
  • ng-inspector — кроссбраузерное расширение, которое призвано помочь разработчикам с написанием, пониманием и отладкой приложений на AngularJS. Утилита поставляется с обновлениями в реальном времени, подсветкой DOM, прямым доступом к областям, моделям и прочим элементам приложения.
  • Augury — расширение для браузера Google Chrome и отладки приложений на Angular 2. Оно позволяет разработчикам приложений на Angular 2 напрямую анализировать структуру приложения и рабочие характеристики, а также позволяет обнаружить изменения.

Инструменты безопасности

  • Snyk — коммерческий инструмент для обнаружения, исправления и предотвращения известных уязвимостей в приложениях на JavaScript, Java и Ruby. Служба имеет собственную базу данных уязвимостей и берёт данные из NSP и NIST NVD. Патчи и обновления, которые предлагает компания, позволяют разработчикам предупредить риски, связанные с безопасностью.
  • Node Security Project предлагает полезные инструменты для сканирования зависимостей и обнаружения уязвимостей. NSP использует свою собственную базу данных, построенную на сканировании модулей npm, а также данные из общих баз данных, таких как NIST NVD (National Vulnerability Database). Кроме того, NSP обеспечивает интеграцию с программным обеспечением GitHub Pull Request и CI. Также имеется проверка в реальном времени, предупреждения и рекомендации по устранению уязвимостей в приложениях на Node.js.
  • RetireJS — это средство проверки зависимостей с открытым исходным кодом. Включает в себя различные компоненты, такие как сканер командной строки, плагин Grunt, расширения Firefox и Chrome, плагины Burp и OWASP ZAP. Retirejs собирает информацию об уязвимостях из NIST NVD и других источников, таких как системы отслеживания ошибок, блоги и списки рассылки.
  • Gemnasium — это коммерческий инструмент с бесплатной пробной версией. Он поддерживает различные технологии и пакеты, включая Ruby, PHP, Bower (JavaScript), Python и npm (JavaScript). Инструмент безопасности Gemnasium поставляется с полезными функциями, такими как автоматическое обновление, оповещения в реальном времени, уведомления о безопасности и интеграция с сервисом Slack.
  • OSSIndex поддерживает различные экосистемы (Java, JavaScript и .NET / C #) и множество платформ, таких как NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal и MSI. Он собирает информацию об уязвимостях из Национальной базы данных уязвимостей (NVD) и отзывов. Также он обрабатывает информацию от членов сообщества.

Инструменты аналитики и оптимизации кода

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

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

  • JSLint — это аналитический веб-инструмент для проверки качества кода JavaScript. Как только он обнаруживает проблему в источнике, он возвращает сообщение с описанием проблемы и приблизительным местоположением в коде. JSLint способен анализировать некоторые нормы стиля и раскрывать синтаксические ошибки и структурные проблемы.
  • JSHint — гибкий инструмент, развивающийся сообществом, для обнаружения ошибок и потенциальных проблем в вашем JS-коде, кроме того, JSHint — форк от JSLint. Основная цель этого инструмента статического анализа кода — помощь разработчикам JavaScript, работающим над сложными программами. Он способен обнаруживать ошибки синтаксиса, неявное преобразование типов данных или отсутствие переменной. Однако он не может определить скорость и правильность работы вашего приложения, как и не сможет определить проблемы с памятью в вашем приложении. JSHint — форк от JSLint.
  • ESLint – это линтер с открытым исходным кодом для веб-приложений JSX и JavaScript. Он помогает обнаруживать сомнительные шаблоны или находить код, который не соответствует конкретным стилям. Это позволяет разработчикам обнаруживать ошибки в JS-коде без его выполнения, тем самым экономя время. Будучи написанным на Node.js, инструмент предлагает оперативную среду выполнения и плавную установку через npm.
  • Flow — статический контролёр кода для JavaScript, разработанный компанией Facebook. Он использует аннотации статического типа для проверки кода на предмет ошибок. Типы — параметры, установленные разработчиками, а Flow проверяет ваше программное обеспечение на соответствие требованиям.

Инструменты управления версиями

  • В последние годы Git стала широко используемой системой контроля версий как для небольших, так и для крупных проектов. Эта бесплатная утилита обеспечивает отличную скорость работы и эффективность. Её популярность объясняется распределённой системой и различными типами элементов управления, а также промежуточной областью, где версии могут быть просмотрены и отформатированы непосредственно перед завершением фиксации.
  • Инструмент Subversion или SVN приобрёл огромную популярность, и он по-прежнему широко используется в проектах с открытым исходным кодом и такими платформами, как Python Apache или Ruby. Этот CVS поставляется со множеством функций, позволяющих управлять различными операциями (переименование, копирование, удаление и т. д.), слияниями, блокировкой файлов и многим другим.

Инструменты управления пакетами и зависимостями

  • Bower — разработка Twitter, которая помогает управлять ресурсами, фреймворками, библиотеками и другими утилитами. Она предлагает доступ к большому количеству пакетов, помогая разработчикам JavaScript оптимизировать процесс разработки и улучшить результаты.
  • Npm — диспетчер пакетов Node.js. Пакеты могут использоваться как для фронтенда, так и для бэкенда. Npm является системой управления пакетами для JavaScript и самым большим реестром программного обеспечения в мире.
  • Yarn — инструмент, который приобрёл популярность благодаря Google, Facebook, Tilde и Exponent. Основное внимание в нём уделено безопасности, скорости и быстродействию. Инструмент позволяет совместно использовать код через пакеты и модули вместе с файлом, описывающим пакет.
  • Duo вобрал в себя лучшее из Browserify, Component и Go, превратив разработку фронтенда в быстрый и простой процесс. Основная идея Duo заключается в упрощении написания модульных компонентов и создания масштабных веб-приложений быстро и безболезненно.

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

Мастер Йода рекомендует:  Видеокурс для изучения языка Си с нуля
Добавить комментарий