Вообще, эти инструменты настолько хороши, что грядущий релиз ASP.NET отказался от своей фирменной комплектации и диспетчеров задач в пользу широко используемых обществом инструментов. А теперь они являются главными элементами в Visual Studio и Visual Studio Code. Сегодня я покажу вам как использовать Gulp в Visual Studio Code, чтобы запустить следующие наиболее часто используемые задачи:
- Компиляция TypeScript в JavaScript
- Компиляция SCSS-файла в чистый CSS
- БОНУС — Добавление пары заданий для автоматического создания JS и CSS при изменения кода
Хотя Gulp является автономным инструментом, VS Code имеет отличную внешнюю поддержку для него. Это означает, что до тех пор, пока у вас есть gulpfile.js в корневом каталоге вашего проекта, VS-код будет использовать его для создания задач, доступных в IDE. Давайте начнем:
Создание проекта
Я предполагаю, что вы уже установили TypeScript и VSCode. Если нет, посмотрите здесь. Для создания проекта выберите нужное местоположение и создайте новый каталог по имени VSGulpTest .
JavaScript v2.0. Настраиваем VSCode для работы
Инсталляция npm и Gulp
Начнем с начала. Npm — менеджер пакетов Node (отсюда и название) и для того, чтобы получить его вам нужно установить Node.js. Это можно сделать двумя способами:
- с помощью chocalateyNuget choco install nodejs
- с помощью исполняемого файла, скаченного с официального сайта
Теперь нам ничто не мешает установить Gulp. Наберите в командной строке Node.js следующее: npm install —global gulp и нажмите клавишу Enter для выполнения. Эта команда устанавливает Gulp глобально. Я cтараюсь избежать глобальных установок, но, установленный локально, Gulp не будет работать в Visual Studio Code. Все остальные пакеты будут установлены локально.
Далее, нам необходимо инициализировать npm на текущем проекте. Для этого откройте командную строку Node.js, перейдите в корневой каталог вашего проекта и выполните следующую команду: npm init
В результате в корневом каталоге вашего проекта будет создан файл package.json. Этот файл используется Node.js для отслеживания установленных пакетов. Командная строка проведет вас через последовательность вопросов (Wizard CLI) для того, чтобы сгенерировать параметры конфигурации. Ни один из этих параметров не является особенно важным, вы можете оставить все из них пустыми, или скопировать мои настройки. На последнем шаге просто наберите yes для создания файла.
Установка необходимых пакетов
Gulp – это простой диспетчер задач, поэтому сам по себе он особо пользы не несет. Нам нужны плагины, чтобы помочь нам выполнить доставленные задачи, а именно: typescript, merge и sass. Чтобы установить плагины, вернитесь к командной строке Node.js, перейдите в корневой каталог вашего проекта, а затем выполните следующие команды, по одной за раз:
How to run JavaScript on Visual Studio Code
npm install gulp-sass —save-dev npm install gulp-typescript npm install merge2
Эти команды будут устанавливать необходимые плагины и ряд зависимостей. Эти плагины будут вызываться из Gulp для выполнения наших задач.
Добавляем код
Прямо сейчас наш проект пуст. Давайте добавим пару TypeScript файлов, файл Sass и HTML-файл, чтобы сделать набросок сайта. Создайте файлы animal.ts и human.ts и вставьте соответствующий код.
//animal.ts class Animal < name:string; constructor(theName: string) < this.name = theName; >move(meters: number = 0) < alert(this.name + » пробежал » + meters + «м.»); >> //var testAnimal = new Animal(1234);
//human.ts class Human < name: string; constructor (yourHumanName:string )< this.name = yourHumanName; >callHuman = function() < console.log(‘Привет, ‘ + this.name); >>
Создайте файл main.scss для CSS кода и файл index.html для главной страницы сайта. И снова используйте код ниже, или добавьте свой собственный код в соответствующие файлы.
//main.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; $header-color: green; body < font: 100% $font-stack; color: $primary-color; h1< font-family: $font-stack; color: $header-color; >>
Привет, мир!
Привет, помните меня?
Добавляем Gulp-таски
Пришло время соединить все вместе и получить рабочий сайт. В корневом каталоге вашего проекта создайте файл gulpfile.js и добавьте следующий код:
var gulp = require(‘gulp’); var ts = require(‘gulp-typescript’); var merge = require(‘merge2’); var sass = require(‘gulp-sass’); gulp.task(‘scripts’, function() < var tsResult = gulp.src(‘*.ts’) .pipe(ts(< declarationFiles: true, noExternalResolve: true, noImplicitAny: true, out: ‘main.js’ >)); return merge([ tsResult.dts.pipe(gulp.dest(‘release/definitions’)), tsResult.js.pipe(gulp.dest(‘release/js’)) ]); >); gulp.task(‘sass’, function () < gulp.src(‘*.scss’) .pipe(sass.sync().on(‘error’, sass.logError)) .pipe(gulp.dest(‘./css’)); >); gulp.task(‘watch’, function () < gulp.watch(‘*.scss’, [‘sass’]); gulp.watch(‘*.ts’, [‘scripts’]); >);
Я постараюсь кратко объяснить, что происходит в этом файле. В верхней части файла мы импортируем все плагины, после чего создаем 3 задачи:
scripts компилит *.ts файлы в *.js, объединяет весь код в один файл, генерирует файлы (.d.ts) и сохраняет созданные файлы в указанном месте ( release ) sass компилит *.scss файлы в *.css и помещает созданный файл в указанном месте ( css ) watch мониторит изменение файлов *.scss и *.ts на наличие каких-либо изменений и автоматически выполняет соответствующую задачу
Теперь мы почти готовы к запуску. Находясь в Visual Studio Code, нажмите клавиши Ctrl+Shift+B для определения нового диспетчера задач.
Нажмите на Настроить средство выполнения задач. Это выведет файл tasks.json. Удалите все, что в нем есть и добавьте следующий код:
Этот код дает указание Visual Studio Code использовать Gulp в качестве главного диспетчера задач, а внутри мы объявляем 3 задачи, которые мы хотим сделать доступными для IDE. Они должны соответствовать задачам, определенным в файле gulpfile.js . Вы всегда можете пропустить не нужные вам задачи, но любая новая задача должна быть определена в gulpfile.js первой.
Если вы нажмете клавиши Ctrl+Shift+P и выберите Run Task (запуск задачи), перед вами будет раскрывающийся список задач, которые мы перечислили в файле tasks.json. Выберите таск watch и запустите его. Вы заметите, что Окно Вывода (Output Window) находится в фокусе, а в нижнем левом углу есть бегунок, дающий понять, что задача в данный момент активна.
Каждый раз, когда вы делаете изменения в *.scss, или *.ts файлах и сохраняете результат, будет вызываться соответствующая задача для выполнения. После этого вам нужно будет обновить страницу в браузере, чтобы увидеть как изменилась ваша страница.
Чтобы остановить задачу нажмите клавиши Ctrl+Shift+P и выберите Terminate running task (Завершить запущенную задачу). К счастью, IntelliSense запускается практически в самом начале, поэтому вручную много печатать вам не придется.
Также, вы можете установить пакет npm-livereload вместе с соответствующим плагином для браузера, который позволит вам автоматически обновлять тестируемую страницу каждый раз, когда есть изменения в отслеживаемых файлах.
Источник: websketches.ru
Как использовать VSCode для отладки приложения Node.js
Отладка является важным этапом в разработке программного обеспечения, поскольку она позволяет разработчикам исправить ошибки перед выпуском программы в свет. Инструменты отладки могут быть интегрированы в редакторы кода, что делает процесс отладки более эффективным. Это руководство покажет вам, как отлаживать node.js в Visual Studio Code.
Что такое Node.js?
Node.js — это среда выполнения JavaScript, которая позволяет выполнять код JavaScript вне браузера. Это не фреймворк, а технология, построенная на движке V8 JavaScript в Chrome, что позволяет использовать ее для разработки приложений на стороне сервера и инструментов командной строки. Она также популярна в сфере Интернета вещей (IoT). Node.js имеет большое сообщество разработчиков, которые создали множество модулей, которые вы можете использовать в своих собственных проектах.
Приложения Node.js — это приложения, написанные на JavaScript, которые выполняются на сервере с помощью среды выполнения Node.js. Эти приложения часто строятся на основе популярных JavaScript-фреймворков и библиотек, таких как Express, React, Angular и Vue.
Основными особенностями Node.js являются:
- Это среда выполнения JavaScript на стороне сервера с открытым исходным кодом.
- Node.js — это кроссплатформенная среда выполнения, которая позволяет выполнять код JavaScript на стороне сервера.
- Приложения пишутся на JavaScript и могут быть запущены в среде выполнения Node.js на OS X, Microsoft Windows и Linux.
- Приложения являются однопоточными, то есть один процесс может обрабатывать несколько запросов одновременно.
- Они асинхронны, что означает, что они могут обрабатывать несколько запросов одновременно, не дожидаясь завершения каждого из них перед запуском следующего.
- Он использует модель неблокирующего ввода-вывода, ориентированную на события, что делает его легким и эффективным.
- Он доступен под лицензией MIT.
Хотя все вышеперечисленное является фантастикой, там, где есть код, есть и ошибки. Отладка становится обычной задачей для каждого разработчика, как побочный эффект.
Пошаговое руководство по отладке Node.js в VSCode
Предварительные условия
Прежде чем приступить к этому руководству, мы предположим следующее:
- у вас установлен Node.js,
- у вас есть VSCode
В этом учебнике мы создадим простую программу Node.js с ошибкой.
Затем мы выполним процесс отладки, который даст вам базовое представление о том, как использовать инструмент отладки в VSCode для Node.js.
Чтобы создать нашу простую программу, запустите npm init внутри пустого каталога проекта в вашей консоли. Это даст нам файл package.json.
В том же каталоге создайте файл app.js со следующим кодом.
const calculate = (A, B) => < console.log(‘Adding. ‘) let sum = 0 sum = A + B + B + A return sum > const num1 = 1 const num2 = 1 const result = calculate(num1, num2) console.log(num1 + ‘ plus ‘ + num2 + ‘ = ‘ + result)
Вход в полноэкранный режим Выход из полноэкранного режима
Копировать
Мы знаем, что это неверно. В переменную sum намеренно внесена ошибка. Если мы запустим программу с помощью команды node app.js, то получим следующий результат:
Adding. 1 plus 1 = 4.
Вход в полноэкранный режим Выход из полноэкранного режима
Использование инструмента отладки VSCode
VSCode поставляется со встроенным инструментом отладки, который разработчики могут использовать для отладки приложений Node.js. Этот инструмент расположен на левой боковой панели и выглядит следующим образом:
Также вы можете использовать сочетание клавиш Ctrl + Shift + D для переключения на панель отладки.
Далее нажмите на ‘create and launch.json file’ и выберите node.js.
Вы увидите конфигурацию, которая выглядит примерно так:
< // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 «version»: «0.2.0», «configurations»: [ < «type»: «pwa-node», «request»: «launch», «name»: «Launch Program», «skipFiles»: [ «/**» ], «program»: «$srcapp.js» > ] >
Войти в полноэкранный режим Выход из полноэкранного режима
Иногда, в зависимости от настроек или версии вашего каталога файлов, назначенное программе значение может не совпадать с главным файлом входа вашего приложения. В такой ситуации вам просто нужно изменить его на то, которое соответствует вашему главному файлу входа — обычно это что-то вроде app.js или index.js.
Вы также можете настроить отладчик на пропуск определенных файлов, перечисленных в массиве skipFile.
После того, как вы выполнили все эти действия, вы можете сохранить и выйти из файла. Это изменит внешний вид боковой панели отладчика. Вот обновленный снимок экрана.
Когда вы нажмете на кнопку play рядом с кнопкой run, произойдет запуск и выполнение программы через отладчик. Консоль отладчика запустится и выйдет с кодом Process exited with code 0, что означает, что все прошло, как ожидалось.
Процесс отладки приложения node.js
Для отладки файла app.js вы можете установить точки останова, нажав на красную точку при наведении курсора на номер строки, которую вы хотите поставить. Точка останова — это место, где отладчик VSCode намеренно останавливает или приостанавливает выполнение программы, чтобы вы могли просмотреть изменения состояния в переменных и панелях стека часов и вызовов, расположенных в левой части пользовательского интерфейса.
Теперь, когда вы повторно запустите программу, она продолжит движение по коду и остановится в том месте, где вы поставили красную точку. Просматривая панель переменных, вы сможете узнать текущее состояние присвоенных значений. Чтобы удалить точку останова, просто щелкните правой кнопкой мыши на красной точке и выберите «удалить точку останова».
Здесь наши переменные A и B имеют значения, но переменная result не определена, потому что она еще не определена в программе — это означает, что она еще не существует.
Панель VARIABLE выводит все текущие переменные и их состояния.
Между тем, панель WATCH позволяет вам выбрать определенные переменные, за которыми вы хотите следить. Эта панель полезна тем, что дает вам мгновенное представление о том, что происходит с кодом.
Если вы посмотрите в верхнюю часть пользовательского интерфейса, то увидите панель управления, которая выглядит примерно так:
Эта панель управляет продвижением отладчика по программе. Каждый элемент управления выполняет следующие действия:
- Продолжить (F5) пропустит точку останова и продолжит выполнение программы до следующей точки останова.
- Step over (F10) переводит отладчик на следующую строку.
- Step into (F11) — переводит отладчик в следующую функцию.
- Шаг наружу (F12) — выводит отладчик из функции на следующий шаг.
- Перезапустить (Ctrl+shift+F5) — перезапустить весь отладчик.
- Остановить (shift+F5) — остановить процесс отладки и выйти из него.
Когда вы нажимаете на один из вышеперечисленных элементов управления, вы, по сути, замедляете работу программы, чтобы вы могли видеть обновления, происходящие в консоли, на панелях переменных, часов и стека вызовов.
Если вернуться к нашему примеру кода, то при нажатии на кнопку step into мы перейдем к функции calculate. Если мы посмотрим на панель VARIABLE, то увидим, что переменные изменились, чтобы отразить локальные переменные. Если щелкнуть правой кнопкой мыши на переменной, можно выбрать ее в качестве цели для наблюдения. Установка этого параметра добавит переменную на панель WATCH, как показано ниже.
Если вы нажмете на кнопку step over, будет запущена следующая строка. В нашей консоли будет просто написано Adding… *, поскольку выполняется console.log. Однако наблюдаемая переменная теперь изменилась с *undefined на 0.
Если мы выполним следующую строку, то увидим, что переменная sum внутри watch изменилась на неправильное значение. Можно сделать вывод, что в предыдущей строке произошло что-то не то. Теперь мы можем исправить проблему, повторно запустить весь отладчик и убедиться, что все работает.
Отладка кода с помощью инструмента Lightrun
Если отладка кода во время разработки достаточно проста в VSCode, то при отладке в производстве это совсем другая игра. Когда в производстве возникает ошибка, мы не можем просто выключить сервер и взять код для отладки. Мало того, воспроизведение производственных ошибок в среде разработки может оказаться невозможным. Именно здесь может помочь Lightrun.
Lightrun — это инструмент отладки, который позволяет разработчикам видеть, как работает их код в режиме реального времени. Он предоставляет интуитивно понятный интерфейс, позволяющий легко добавлять журналы, показатели производительности и снимки в кодовую базу. Lightrun имеет ряд преимуществ перед традиционными штатными инструментами отладки, например, обеспечивает улучшенную видимость кода и облегчает выявление и исправление ошибок.
Этот инструмент быстрее и эффективнее, поэтому разработчики могут тратить меньше времени на устранение неполадок в коде. Использование этого инструмента также не влияет на производительность приложения, что очень важно для производственных сред. Вы можете заказать демонстрацию сегодня и увидеть, как Lightrun может ускорить процесс отладки от скорости улитки до скорости света.
Lightrun для Web уже доступен!
Настраиваем Visual Studio Code на работу с JSX скриптами.
Бесплатный редактор кода от Microsoft, с поддержкой подсветки кода, возможностью запуска и отладки, просмотра объектной модели, с подсказками и кучей дополнений и тем.
Русификация – в левой колонке выбираем расширения в строке поиска – Russian, устанавливаем первый языковой пакет.
Установка расширений для работы с JSX скриптами:
В расширениях в поиске пишем Adobe, устанавливаем расширение Adobe Script Runner и расширение ExtendScript Debugger.
После установки расширение Adobe Script Runner требует настройки, нажимаем на шестерёнку в разделе расширений и выбираем Параметры расширения:
В строке Adobe Script Runner: Win Photoshop Exe – указываем путь к нашему Photoshop:
Теперь о самом главном о работе отладки и запуске скриптов.
Открывает через меню Файл – Открыть папку и выбираем папку с панелью:
В структуре моих панелей файл скрипта лежит в папке JSX и имеет название hostscript.jsx, в редакторе я открываю именно папку всей панели а не папку JSX, т.к. тут же я могу редактировать и остальные файлы html, css, js.
Для правильной интерпретации кода и работы отладки качаем следующий архив Adobe_types_for_VSCode
Все содержимое архива складываем в папку с расширением перезапускаем VSCode? Становимся на файл workspace.code-workspace:
Появляется кнопка открыть рабочую область – нажимаем на нее – теперь наш редактор готов к работе.
Открываем JSX файл и подводим мышку к командам кода – мы видим всплывающие описания:
При наборе кода редактор предлагает варианты в соответствии с объектной моделью документа:
Более того, уже при наборе кода, еще до выполнения, он укажет на ошибки:
В папке проекта будет указано количество ошибок в скрипте – красная цифра с плюсом:
Теперь о запуске и отладки скрипта – внизу нажать на желтую строку – Select the target application и выбрать нужную программу или версию Photoshop:
Простой запуск скрипта без отладки – нажимаем F1, выбираем Adobe Photoshop:
Скрипт выполнится в Photoshop.
Запуск с отладкой – переходим в раздел запустить, сверху нажимаем на Run debug, в коде для наглядности поставим точку остановки:
При останове выполнения скрипта можно изучить локальные и глобальные переменные в ходе работы скрипта:
Тут же можно посмотреть объектную модель нашего документа, можно даже зайти в раздел текущего слоя и поменять к примеру прозрачность и она изменится в Photoshop:
Сверху панель управления на которой можно продолжить выполнение скрипта после точки останова и изучения значений переменных и параметров, в следующей строке кода будет ошибка:
В разделе Проблемы будет указание на количество ошибок, их описание, при нажатии на ошибку редактор открывает строчку с ошибкой.
При работе через отладку можно использовать команду для вывода в консоль $.writeln(“сообщение”):
В общем VSCode это современный редактор, при должной настройке он полностью восполняет устаревший Extend Script Tool Kit, и где-то его превосходит.
Основной минус настройка отладчика – она находится в файле:
Его содержимое достаточно простое:
Но как мы видим, что тут указывается на конкретный файл hostscript.jsx, соответственно если вы захотите отлаживать скрипт с другим именем, то этот файл над отредактировать.
Источник: elffoto.livejournal.com