Command line

Доброго времени суток, друзья!

Представляю Вашему вниманию перевод статьи What JavaScript Developers Should Know About Curl автора Valery Karpov.

Curl это популярный инструмент командной строки, часто используемый для отправки HTTP-запросов. Curl поддерживает большое количество протоколов, однако как Node.js-разработчик вы, скорее всего, будете использовать его для отпраки http-запросов к RESTful API.

Документация curl представляет собой перечень из 383 флагов командной строки, поэтому в ней очень трудно найти то, что ищешь. В этой статье я хочу поделиться с вами некоторыми часто используемыми мной шаблонами. Для примеров будет использоваться сервис httpbin.org.

Отправка http-запроса

Для начала убедитесь в том, что у вас установлен curl, выполнив команду curl --version.

$ curl --versioncurl 7.58.0 (x86_64-pc-linux-gnu) libcurl/7.58.0 OpenSSL/1.1.1 zlib/1.2.11 libidn2/2.0.4 libpsl/0.19.1 (+libidn2/2.0.4) nghttp2/1.30.0 librtmp/2.3Release-Date: 2018-01-24Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtmp rtsp smb smbs smtp smtps telnet tftp Features: AsynchDNS IDN IPv6 Largefile GSS-API Kerberos SPNEGO NTLM NTLM_WB SSL libz TLS-SRP HTTP2 UnixSockets HTTPS-proxy PSL 

Для отправки запроса необходимо запустить curl url. Например, для отправки GET-запроса к https://httpbin.org/get?answer=42 следует запустить curl https://httpbin.org/get?answer=42.

$ curl https://httpbin.org/get?answer=42{  "args": {    "answer": "42"  },   "headers": {    "Accept": "*/*",     "Host": "httpbin.org",     "User-Agent": "curl/7.58.0",     "X-Amzn-Trace-Id": "Root=1-5ee8d737-b39c6a466892725bbb52b916"  },   "origin": "69.84.111.39",   "url": "https://httpbin.org/get?answer=42"}

После успешного завершения запроса curl возвращает тело http-ответа. Для того, чтобы заставить curl вернуть весь ответ, включая заголовки, используйте флаг -i.

$ curl -i https://httpbin.org/get?answer=42HTTP/2 200 date: Tue, 16 Jun 2020 14:30:57 GMTcontent-type: application/jsoncontent-length: 801server: istio-envoyaccess-control-allow-origin: *access-control-allow-credentials: truex-envoy-upstream-service-time: 2{  "args": {    "answer": "42"  },   "headers": {    "Accept": "*/*",     "Content-Length": "0",     "Host": "httpbin.org",     "User-Agent": "curl/7.58.0",     "X-Amzn-Trace-Id": "Root=1-5ee8d7a1-cb3954c09299eb9e0dff70a6",     "X-B3-Parentspanid": "dffc55451e64b5fc",     "X-B3-Sampled": "0",     "X-B3-Spanid": "8e233a863fb18b6c",     "X-B3-Traceid": "45bd12a9067fb5c0dffc55451e64b5fc",     "X-Envoy-External-Address": "10.100.91.201",     "X-Forwarded-Client-Cert": "By=spiffe://cluster.local/ns/httpbin-istio/sa/httpbin;Hash=c1ff14671b3e24ee794f9a486570abf8ccc9d622846611d3f91a322db4d480cd;Subject=\"\";URI=spiffe://cluster.local/ns/istio-system/sa/istio-ingressgateway-service-account"  },   "origin": "69.84.111.39,10.100.91.201",   "url": "http://httpbin.org/get?answer=42"}

Это полный http-ответ. Заголовками ответа являются строки от date: до x-envoy-upstream-service-time:.

Загрузка файлов

Wget самый распространенный инструмент для загрузки файлов посредством командной строки. Он входит в комплект большинства диструбутивов Linux. Однако в OSX его нет.

Команда wget url аналогична команде curl -OL url. Опция -О это опция --remote-name, которая говорит curl сохранить тело ответа в локальном файле. Опция -L говорит curl следовать перенаправлениям.

Например, ниже представлено изображение с Unsplash, его URL https://images.unsplash.com/photo-1506812574058-fc75fa93fead.



Для загрузки этого изобюражения необходимо выполнить следующее:

$ curl -OL https://images.unsplash.com/photo-1506812574058-fc75fa93fead  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current                                 Dload  Upload   Total   Spent    Left  Speed100 12.1M  100 12.1M    0     0  3927k      0  0:00:03  0:00:03 --:--:-- 3927k

Опция -O говорит curl использовать строку после последнего / в качестве имени файла. В приведенном примере изображение будет сохранено в текущей директории с именем photo-1506812574058-fc75fa93fead. Для определения имени файла используйте опцию -о (строчная буква о).

$ curl -o miami-beach.jpg https://images.unsplash.com/photo-1506812574058-fc75fa93fead  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current                                 Dload  Upload   Total   Spent    Left  Speed100 12.1M  100 12.1M    0     0  6083k      0  0:00:02  0:00:02 --:--:-- 6083k$ ls -l miami-beach-jpg-rw-rw-r-- 1 val val 12788445 Jun 16 11:03 miami-beach.jpg

Отправка авторизованного запроса

Заголовок авторизации используется для включения в запрос данных для авторизации при обращении к RESTful API. Для добавления указанных данных необходимо использовать флаг -H. Например, если ваш ключ интерфейса (API key) my-secret-token, вы можете включить его в http-запрос следующим образом:

$ curl -H "Authorization: my-secret-token" https://httpbin.org/get{  "args": {},   "headers": {    "Accept": "*/*",     "Authorization": "my-secret-token",     "Host": "httpbin.org",     "User-Agent": "curl/7.58.0",     "X-Amzn-Trace-Id": "Root=1-5ee8e1a5-a3aa30e0765a7980b04ca4a0"  },   "origin": "69.84.111.39",   "url": "https://httpbin.org/get"}

Обратите внимание, что httpbin.org возвращает заголовки http-запроса в теле ответа в свойстве headers.

Curl также поддерживает авторизацию по-умолчанию посредством флага -u. В следующем примере мы отправляем запрос с именем пользователя user и паролем pass:

$ curl -i -u "user:pass" https://httpbin.org/basic-auth/user/passHTTP/2 200 date: Tue, 16 Jun 2020 15:18:45 GMTcontent-type: application/jsoncontent-length: 47server: istio-envoyaccess-control-allow-origin: *access-control-allow-credentials: truex-envoy-upstream-service-time: 1{  "authenticated": true,   "user": "user"}

Вот что происходит при отправке неправильного имени пользователя или пароля:

$ curl -i -u "user:wrongpass" https://httpbin.org/basic-auth/user/passHTTP/2 401 date: Tue, 16 Jun 2020 15:18:51 GMTcontent-length: 0server: istio-envoywww-authenticate: Basic realm="Fake Realm"access-control-allow-origin: *access-control-allow-credentials: truex-envoy-upstream-service-time: 12

Отправка POST-запроса, содержащего JSON

Флаг -X говорит curl, какой метод следует использовать: PUT, POST и т.д. По-умолчанию curl использует метод GET, поэтому писать curl -X GET не нужно.

Флаг -X часто используется совместно с флагом -d, позволяющим добавить тело запроса. В следующем примере показано как отправить POST-запрос, содержащий некоторый json:

$ curl -X POST -d '{"answer":42}' https://httpbin.org/post{  "args": {},   "data": "",   "files": {},   "form": {    "{\"answer\":42}": ""  },   "headers": {    "Accept": "*/*",     "Content-Length": "13",     "Content-Type": "application/x-www-form-urlencoded",     "Host": "httpbin.org",     "User-Agent": "curl/7.58.0",     "X-Amzn-Trace-Id": "Root=1-5ee8e3fd-8437029087be44707bd15320",     "X-B3-Parentspanid": "2a739cfc42d28236",     "X-B3-Sampled": "0",     "X-B3-Spanid": "8bdf030613bb9c8d",     "X-B3-Traceid": "75d84f317abad5232a739cfc42d28236",     "X-Envoy-External-Address": "10.100.91.201",     "X-Forwarded-Client-Cert": "By=spiffe://cluster.local/ns/httpbin-istio/sa/httpbin;Hash=ea8c3d70befa0d73aa0f07fdb74ec4700d42a72889a04630741193548f1a7ae1;Subject=\"\";URI=spiffe://cluster.local/ns/istio-system/sa/istio-ingressgateway-service-account"  },   "json": null,   "origin": "69.84.111.39,10.100.91.201",   "url": "http://httpbin.org/post"}

Обратите внимание, что по-умолчанию значением заголовка Content-Type является application/x-www-form-urlencoded. Для json это является неверным, поэтому для определения Content-Type следует использовать флаг -H:

$ curl -X POST -d '{"answer":42}' -H "Content-Type: application/json" https://httpbin.org/post{  "args": {},   "data": "{\"answer\":42}",   "files": {},   "form": {},   "headers": {    "Accept": "*/*",     "Content-Length": "13",     "Content-Type": "application/json",     "Host": "httpbin.org",     "User-Agent": "curl/7.58.0",     "X-Amzn-Trace-Id": "Root=1-5ee8e45e-ad875af4f83efd4379b86c34",     "X-B3-Parentspanid": "5f4f33d1c5ea13aa",     "X-B3-Sampled": "0",     "X-B3-Spanid": "a062c9bf2ebfd4bd",     "X-B3-Traceid": "44aa8d62412ae34d5f4f33d1c5ea13aa",     "X-Envoy-External-Address": "10.100.86.47",     "X-Forwarded-Client-Cert": "By=spiffe://cluster.local/ns/httpbin-istio/sa/httpbin;Hash=2f0b3331fe4d512975b4b82583a55dd5d1196023d0dfce9e0abed246991c5b67;Subject=\"\";URI=spiffe://cluster.local/ns/istio-system/sa/istio-ingressgateway-service-account"  },   "json": {    "answer": 42  },   "origin": "69.84.111.39,10.100.86.47",   "url": "http://httpbin.org/post"}

Отправка PUT-запроса, содержащего JSON-файл

Флаг -d также поддерживает отправку данных из локальных файлов.

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

{"answer": 42}

Для отправки PUT-запроса с этим файлом в качестве тела запроса вы можете присвоить флагу -d значение @data.json. Префикс @ говорит curl загрузить тело запроса из файла data.json:

$ curl -X PUT -d '@data.json' -H "Content-Type: application/json" https://httpbin.org/put{  "args": {},   "data": "{\"answer\":42}",   "files": {},   "form": {},   "headers": {    "Accept": "*/*",     "Content-Length": "13",     "Content-Type": "application/json",     "Host": "httpbin.org",     "User-Agent": "curl/7.58.0",     "X-Amzn-Trace-Id": "Root=1-5ee8e745-37c4ef06326b7b4354a16b94",     "X-B3-Parentspanid": "a4f8f91f4f1b051e",     "X-B3-Sampled": "0",     "X-B3-Spanid": "a018b1a3fcebdc68",     "X-B3-Traceid": "7b48b01dc3f632eea4f8f91f4f1b051e",     "X-Envoy-External-Address": "10.100.91.201",     "X-Forwarded-Client-Cert": "By=spiffe://cluster.local/ns/httpbin-istio/sa/httpbin;Hash=6035260d9d551af6c1907270653214e8d3195abbdd19078c1c84fd9a4106f260;Subject=\"\";URI=spiffe://cluster.local/ns/istio-system/sa/istio-ingressgateway-service-account"  },   "json": {    "answer": 42  },   "origin": "69.84.111.39,10.100.91.201",   "url": "http://httpbin.org/put"}

Заключение

Резюмируя, вот опции curl, которые я нахожу самыми полезными:

• -X определяет метод запроса, например, curl -X POST url
• -d определяет тело запроса в виде строки в PUT и POST-запросах. Используйте @ для извлечения данных из файла
• -H определяет заголовок запроса, например, curl -H "Authorization: my-secret-token" url
• -u аутентификационные данные для стандартной авторизации
• -O сохраняет тело запроса в файл
• -i показывает полный ответ, включая заголовки

Curl полезный инструмент взаимодействия с API посредством командной строки, независимо от того, сторонний это API или API, который вы разрабатываете. Для быстрого тестирования curl подходит лучше, чем Axios в Node.js или настройка запроса в Postman, если вы знакомы с их синтаксисом.

Благодарю за потраченное время. Надеюсь, оно было потрачено не зря.

Доброго времени суток, друзья!

В процессе разработки Современного стартового HTML-шаблона я задумался о расширении возможностей его использования. На тот момент варианты его применения ограничивались клонированием репозитория и скачиванием архива. Так появились HTML-сниппет и расширение для Microsoft Visual Studio Code HTML Template, а также интерфейс командной строки create-modern-template. Конечно, указанные инструменты далеки от совершенства и я буду их дорабатывать по мере сил и возможностей. Однако, в процессе их создания я узнал несколько интересных вещей, которыми и хочу с вами поделиться.

В этой части мы рассмотрим сниппет и расширение, а CLI в следующей.

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

Сниппет (Snippet)

Что такое сниппет? Если коротко, сниппет это заготовка, которую использует редактор для автозаполнения (автодополнения кода).

В VSCode встроен Emmet (официальный сайт, Emmet in Visual Studio Code), который использует многочисленные HTML, CSS и JS-сниппеты для помощи в написании кода. Набираем в редакторе (в .html) !, нажимаем Tab или Enter, получаем готовую html5-разметку. Набираем nav>ul>li*3>a.link>img, нажимаем Tab, получаем:

<nav>    <ul>      <li><a href="" class="link"><img src="" alt=""></a></li>      <li><a href="" class="link"><img src="" alt=""></a></li>      <li><a href="" class="link"><img src="" alt=""></a></li>    </ul>  </nav>

и т.д.

Кроме встроенных, VSCode предусматривает возможность использования пользовательских сниппетов. Для их создания необходимо перейти в File -> Preferences -> User Snippets (или нажать на кнопку Manage в левом нижнем углу и выбрать User Snippets). Настройки для каждого языка хранятся в соответствующем JSON-файле (для HTML в html.json, для JavaScript в javascript.json и т.д.).

Потренируемся создавать JS-сниппеты. Находим файл javascript.json и открываем его.



Видим комментарии, кратко описывающие правила создания сниппетов. Более подробную информацию о создании пользовательских сниппетов в VSCode можно найти здесь.

Начнем с чего-нибудь простого. Создадим сниппет для console.log(). Вот как он выглядит:

"Print to console": {  "prefix": "log",  "body": "console.log($0)",  "description": "Create console.log()"},

• Print to console ключ объекта, название сниппета (обязательно)
• prefix сокращение для сниппета (обязательно)
• body сам сниппет (обязательно)
• $число положение курсора после создания сниппета; $1 первое положение, $2 второе и т.д., $0 последнее положение (опционально)
• description описание сниппета (опционально)

Сохраняем файл. Набираем log в скрипте, нажимаем Tab или Enter, получаем console.log() с курсором между скобками.

Создадим сниппет для цикла for-of:

"For-of loop": {  "prefix": "fo",  "body": [    "for (const ${1:item} of ${2:arr}) {",    "\t$0",    "}"  ]},

• Сниппеты, состоящие из нескольких строк, создаются с помощью массива
• ${число: значение}; ${1:item} означает первое положение курсора со значением item по умолчанию; данное значение выделяется после создания сниппета, а также после перехода к следующему положению курсора для быстрого редактирования
• \t один отступ (величина оступа определяется соответствующими настройками редактора или, как в моем случае, расширения Prettier), \t\t два отступа и т.д.

Набираем в скрипте fo, нажимаем Tab или Enter, получаем:

for (const item of arr) {}

с выделенным item. Нажимаем Tab, выделяется arr. Еще раз нажимаем Tab, переходим на вторую строку.

Вот еще несколько примеров:

"For-in loop": {  "prefix": "fi",  "body": [    "for (const ${1:key} in ${2:obj}) {",    "\t$0",    "}"  ]},"Get one element": {  "prefix": "qs",  "body": "const $1 = ${2:document}.querySelector('$0')"},"Get all elements": {  "prefix": "qsa",  "body": "const $1 = [...${2:document}.querySelectorAll('$0')]"},"Add listener": {  "prefix": "al",  "body": [    "${1:document}.addEventListener('${2:click}', (${3:{ target }}) => {",    "\t$0",    "})"  ]},"Async function": {  "prefix": "af",  "body": [    "const $1 = async ($2) => {",    "\ttry {",    "\t\tconst response = await fetch($3)",    "\t\tconst data = await res.json()",    "\t\t$0",    "\t} catch (err) {",    "\t\tconsole.error(err)",    "\t}",    "}"  ]}

HTML-сниппеты строятся по такому же принципу. Вот как выглядит HTML Template:

{  "HTML Template": {    "prefix": "html",    "body": [      "<!DOCTYPE html>",      "<html",      "\tlang='en'",      "\tdir='ltr'",      "\titemscope",      "\titemtype='https://schema.org/WebPage'",      "\tprefix='og: http://ogp.me/ns#'",      ">",      "\t<head>",      "\t\t<meta charset='UTF-8' />",      "\t\t<meta name='viewport' content='width=device-width, initial-scale=1' />",      "",      "\t\t<title>$1</title>",      "",      "\t\t<meta name='referrer' content='origin' />",      "\t\t<link rel='canonical' href='$0' />",      "\t\t<link rel='icon' type='image/png' href='./icons/64x64.png' />",      "\t\t<link rel='manifest' href='./manifest.json' />",      "",      "\t\t<!-- Security -->",      "\t\t<meta http-equiv='X-Content-Type-Options' content='nosniff' />",      "\t\t<meta http-equiv='X-XSS-Protection' content='1; mode=block' />",      "",      "\t\t<meta name='author' content='$3' />",      "\t\t<meta name='description' content='$2' />",      "\t\t<meta name='keywords' content='$4' />",      "",      "\t\t<meta itemprop='name' content='$1' />",      "\t\t<meta itemprop='description' content='$2' />",      "\t\t<meta itemprop='image' content='./icons/128x128.png' />",      "",      "\t\t<!-- Microsoft -->",      "\t\t<meta http-equiv='x-ua-compatible' content='ie=edge' />",      "\t\t<meta name='application-name' content='$1' />",      "\t\t<meta name='msapplication-tooltip' content='$2' />",      "\t\t<meta name='msapplication-starturl' content='/' />",      "\t\t<meta name='msapplication-config' content='browserconfig.xml' />",      "",      "\t\t<!-- Facebook -->",      "\t\t<meta property='og:type' content='website' />",      "\t\t<meta property='og:url' content='$0' />",      "\t\t<meta property='og:title' content='$1' />",      "\t\t<meta property='og:image' content='./icons/256x256.png' />",      "\t\t<meta property='og:site_name' content='$1' />",      "\t\t<meta property='og:description' content='$2' />",      "\t\t<meta property='og:locale' content='en_US' />",      "",      "\t\t<!-- Twitter -->",      "\t\t<meta name='twitter:title' content='$1' />",      "\t\t<meta name='twitter:description' content='$2' />",      "\t\t<meta name='twitter:url' content='$0' />",      "\t\t<meta name='twitter:image' content='./icons/128x128.png' />",      "",      "\t\t<!-- IOS -->",      "\t\t<meta name='apple-mobile-web-app-title' content='$1' />",      "\t\t<meta name='apple-mobile-web-app-capable' content='yes' />",      "\t\t<meta name='apple-mobile-web-app-status-bar-style' content='#222' />",      "\t\t<link rel='apple-touch-icon' href='./icons/256x256.png' />",      "",      "\t\t<!-- Android -->",      "\t\t<meta name='theme-color' content='#eee' />",      "\t\t<meta name='mobile-web-app-capable' content='yes' />",      "",      "\t\t<!-- Google Verification Tag -->",      "",      "\t\t<!-- Global site tag (gtag.js) - Google Analytics -->",      "",      "\t\t<!-- Global site tag (gtag.js) - Google Analytics -->",      "",      "\t\t<!-- Yandex Verification Tag -->",      "",      "\t\t<!-- Yandex.Metrika counter -->",      "",      "\t\t<!-- Mail Verification Tag -->",      "",      "\t\t<!-- JSON-LD -->",      "\t\t<script type='application/ld+json'>",      "\t\t\t{",      "\t\t\t\t'@context': 'http://schema.org/',",      "\t\t\t\t'@type': 'WebPage',",      "\t\t\t\t'name': '$1',",      "\t\t\t\t'image': [",      "\t\t\t\t\t'$0icons/512x512.png'",      "\t\t\t\t],",      "\t\t\t\t'author': {",      "\t\t\t\t\t'@type': 'Person',",      "\t\t\t\t\t'name': '$3'",      "\t\t\t\t},",      "\t\t\t\t'datePublished': '2020-11-20',",      "\t\t\t\t'description': '$2',",      "\t\t\t\t'keywords': '$4'",      "\t\t\t}",      "\t\t</script>",      "",      "\t\t<!-- Google Fonts -->",      "",      "\t\t<style>",      "\t\t\t/* Critical CSS */",      "\t\t</style>",      "",      "\t\t<link rel='preload' href='./css/style.css' as='style'>",      "\t\t<link rel='stylesheet' href='./css/style.css' />",      "",      "<link rel='preload' href='./script.js' as='script'>",      "\t</head>",      "\t<body>",      "\t\t<!-- HTML5 -->",      "\t\t<header>",      "\t\t\t<h1>$1</h1>",      "\t\t\t<nav>",      "\t\t\t\t<a href='#' target='_blank' rel='noopener'>Link 1</a>",      "\t\t\t\t<a href='#' target='_blank' rel='noopener'>Link 2</a>",      "\t\t\t</nav>",      "\t\t</header>",      "",      "\t\t<main></main>",      "",      "\t\t<footer>",      "\t\t\t<p> 2020. All rights reserved</p>",      "\t\t</footer>",      "",      "\t\t<script src='./script.js' type='module'></script>",      "\t</body>",      "</html>"    ],    "description": "Create Modern HTML Template"  }}

Набираем html, нажимаем Tab или Enter, получаем разметку. Положения курсора определены в следующем порядке: название приложения (title), описание (description), автор (author), ключевые слова (keywords), адрес (url).

Расширение (Extension)

На сайте VSCode имеется отличная документация по созданию расширений.

Мы создадим два варианта расширения: в форме сниппетов и в форме CLI. Второй вариант опубликуем в Visual Studio Marketplace.

Примеры расширений в форме сниппетов:

• JavaScript (ES6) code snippets
• ES7 React/Redux/GraphQL/React-Native snippets
• Vue VSCode Snippets

Расширения в форме CLI менее популярны, вероятно, по той причине, что существуют настоящие CLI.

Расширение в форме сниппетов

Для разработки расширений для VSCode, нам, кроме Node.js и Git, потребуется еще парочка библиотек, точнее, одна библиотека и плагин, а именно: yeoman и generator-code. Устанавливаем их глобально:

npm i -g yo generator-code// илиyarn global add yo generator-code

Выполняем команду yo code, выбираем New Code Snippets, отвечаем на вопросы.



Осталось скопировать созданный нами ранее HTML-сниппет в файл snippets/snippets.code-snippets (файлы сниппетов также могут иметь расширение json), отредактировать package.json и README.md, и можно публиковать расширение в маркетплейсе. Как видите, все очень просто. Слишком просто, подумал я, и решил создать расширение в форме CLI.

Расширение в форме CLI

Снова выполняем команду yo code. На этот раз выбираем New Extension (TypeScript) (не бойтесь, TypeScript в нашем коде почти не будет, а там, где будет, я дам необходимые разъяснения), отвечаем на вопросы.



Для того, чтобы убедиться в работоспособности расширения, открываем проект в редакторе:

cd htmltemplatecode .

Нажимаем F5 или на кнопку Run (Ctrl/Cmd+Shift+D) слева и кнопку Start Debugging сверху. Иногда при запуске можно получить ошибку. В этом случае отменяем запуск (Cancel) и повторяем процедуру.

В открывшемся редакторе нажимаем View -> Command Palette (Ctrl/Cmd+Shift+P), набираем hello и выбираем Hello World.



Получаем информационное сообщение от VSCode и соответствующее сообщение (поздравление) в консоли.



Из всех файлов, имеющихся в проекте, нас интересуют package.json и src/extension.ts. Директорию src/test и файл vsc-extension-quickstart.md можно удалить.

Заглянем в extension.ts (комментарии удалены для удобочитаемости):

// импорт функционала VSCodeimport * as vscode from 'vscode'// функция, вызываемая при активации расширенияexport function activate(context: vscode.ExtensionContext) {  // сообщение, выводимое в консоль редактора,  // в котором запущена отладка расширения  console.log('Congratulations, your extension "htmltemplate" is now active!')  // функционал расширения  // команда - это свойство расширения  // htmltemplate - название расширения  // helloWorld - название команды  let disposable = vscode.commands.registerCommand(    'htmltemplate.helloWorld',    () => {      // информационное сообщение, отображаемое в редакторе      // при успешном выполнении команды      vscode.window.showInformationMessage('Hello World from htmltemplate!')    }  )  // регистрация команды  // судя по всему, здесь реализован паттерн проектирования "Подписка/Уведомление",  // один из вариантов паттерна "Наблюдатель"  context.subscriptions.push(disposable)}// функция, вызываемая при деактивации расширенияexport function deactivate() {}

Важный момент: 'расширение.команда' в extension.ts должно совпадать со значениями полей activationEvents и command в package.json:

"activationEvents": [  "onCommand:htmltemplate.helloWorld"],"contributes": {  "commands": [    {      "command": "htmltemplate.helloWorld",      "title": "Hello World"    }  ]},

• commands список команд
• activationEvents функции, вызываемые при выполнении команд

Приступаем к разработке расширения.

Мы хотим, чтобы наше расширение по функционалу напоминало create-react-app или vue-cli, т.е. по команде create создавало проект, содержащий все необходимые файлы, в целевой директории.

Для начала отредактируем package.json:

"displayName": "HTML Template","activationEvents": [  "onCommand:htmltemplate.create"],"contributes": {  "commands": [    {      "command": "htmltemplate.create",      "title": "Create Template"    }  ]},

Создаем директорию src/components для хранения файлов проекта, которые будут копироваться в целевую директорию.

Создаем файлы проекта в виде ES6-модулей (VSCode по умолчанию использует ES6-модули (export/import), но поддерживает и CommonJS-модули (module.exports/require)): index.html.js, css/style.css.js, script.js и т.д. Содержимое файлов экспортируется по умолчанию:

// index.html.jsexport default `<!DOCTYPE html><html  lang="en"  dir="ltr"  itemscope  itemtype="http://personeltest.ru/aways/schema.org/WebPage"  prefix="og: http://ogp.me/ns#">  ...</html>`

Обратите внимание, что при таком подходе все изображения (в нашем случае, иконки) должны быть закодированы в Base64: вот один из подходящих онлайн-инструментов. Наличие строки data:image/png;base64, в начале преобразованного файла принципиального значение не имеет.

Для копирования (записи) файлов мы будем использовать fs-extra. Метод outputFile данной библиотеки делает томе самое, что и встроенный Node.js-метод writeFile, но также создает директорию для записываемого файла при ее отсутствии: например, если мы указали создать css/style.css, а директории css не существует, outputFile создаст ее и запишет туда style.css (writeFile при отсутствии директории выбросит исключение).

Файл extension.ts выглядит следующим образом:

import * as vscode from 'vscode'// импорт библиотеки fs-extraconst fs = require('fs-extra')const path = require('path')// импорт файлов проекта, точнее, содержимого этих файловimport indexHTML from './components/index.html.js'import styleCSS from './components/css/style.css.js'import scriptJS from './components/script.js'import icon64 from './components/icons/icon64.js'// ...export function activate(context: vscode.ExtensionContext) {  console.log('Congratulations, your extension "htmltemplate" is now active!')  let disposable = vscode.commands.registerCommand(    'htmltemplate.create',    () => {      // мы хотим, чтобы файлы проекта хранились в директории html-template      // filename: string указывает TypeScript-компилятору,      // что типом аргумента, передаваемого функции,      // должна быть строка      const folder = (filename: string) =>        path.join(vscode.workspace.rootPath, `html-template/${filename}`)      // массив с контентом файлов      // files: string[] означает, что значением переменной files является массив строк      const files: string[] = [        indexHTML,        styleCSS,        scriptJS,        icon64,        ...      ]      // массив с названиями файлов      // обратите внимание, что индексы контента и названий файлов должны совпадать      const fileNames: string[] = [        'index.html',        'css/style.css',        'script.js',        'server.js',        'icons/64x64.png',        ...      ]      ;(async () => {        try {          // перебираем массив с контентом          for (let i = 0; i < files.length; i++) {            // метод outputFile принимает два обязательных и один опциональный параметр:            // путь к файлу (его название), содержимое файла и кодировку (по умолчанию UTF-8)            // если название файла включает png,            // значит, мы имеем дело с Base64-изображением:            // указываем соответствующую кодировку            if (fileNames[i].includes('png')) {              await fs.outputFile(folder(fileNames[i]), files[i], 'base64')            // иначе, используем кодировку по умолчанию            } else {              await fs.outputFile(folder(fileNames[i]), files[i])            }          }          // информационное сообщение об успехе операции          return vscode.window.showInformationMessage(            'All files created successfully'          )        } catch {          // сообщение об ошибке          return vscode.window.showErrorMessage('Failed to create files')        }      })()    }  )  context.subscriptions.push(disposable)}export function deactivate() {}

Для того, чтобы TypeScript не обращал внимания на отсутствие типов импортируемых файлов-модулей, создадим src/global.d.ts следующего содержания:

declare module '*'

Протестируем расширение. Открываем его в редакторе:

cd htmltemplatecode .

Запускаем отладку (F5). Переходим в целевую директорию (test-dir, например) и выполняем команду create в Command Palette.



Получаем информационное сообщение об успешном создании файлов. Ура!

Публикация расширения в Visual Studio Marketplace

Для того, чтобы иметь возможность публиковать расширения для VSCode, необходимо сделать следующее:

• Создать аккаунт в маркетплейсе (запомните значение поля publisher)
• Глобально установить библиотеку vsce

Редактируем package.json:

{  "name": "htmltemplate",  "displayName": "HTML Template",  "description": "Modern HTML Starter Template",  "version": "1.0.0",  "publisher": "puslisher-name",  "license": "MIT",  "keywords": [    "html",    "html5",    "css",    "css3",    "javascript",    "js"  ],  "icon": "build/128x128.png",  "author": {    "name": "Author Name @githubusername"  },  "repository": {    "type": "git",    "url": "https://github.com/username/dirname"  },  "engines": {    "vscode": "^1.51.0"  },  "categories": [    "Snippets"  ],  "activationEvents": [    "onCommand:htmltemplate.create"  ],  "main": "./dist/extension.js",  "contributes": {    "commands": [      {        "command": "htmltemplate.create",        "title": "Create Template"      }    ]  },  ...}

Редактируем README.md.

Выполняем команду vsce package в директории расширения для создания публикуемого пакета с расширением vsix. Получаем файл htmltemplate-1.0.0.vsix.

На странице управления расширениями маркетплейса нажимаем кнопку New extension и выбираем Visual Studio Code. Переносим или загружаем в модальное окно VSIX-файл. Ждем завершения проверки.



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



Для обновления расширения необходимо изменить номер версии в package.json, сгенерировать VSIX-файл и загрузить его в маркетплейс, нажав на кнопку More actions и выбрав Update.

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

В следующей части мы создадим полноценный интерфейс командной строки сначала с помощью фреймворка от Heroku oclif, затем без него. Наш Node.js-CLI будет сильно отличаться от расширения, в нем будет присутствовать некоторая визуализация, возможность опциональной инициализации git и установки зависимостей.

Надеюсь, вы нашли для себя что-нибудь интересное. Благодарю за внимание.

Привет, Хабр! Сегодня делимся гайдом по началу работы с Windows Terminal. Да, поскольку он о начале работы с инструментом, в основном в материале описываются какие-то базовые моменты. Но я думаю, что и профессионалы смогут подчерпнуть для себя что-то полезное, как минимум из списка полезных ссылок в конце статьи. Заглядывайте под кат!

Установка

Windows Terminal доступен в двух разных сборках: Windows Terminal и Windows Terminal Preview. Обе сборки доступны для загрузки в Microsoft Store и на странице выпусков GitHub.

Требования

Для запуска любой сборки Windows Terminal на вашем компьютере должна быть установлена Windows 10 1903 или более поздняя версия.

Windows Terminal Preview

Windows Terminal Preview это сборка, в которой в первую очередь появляются новые функции. Эта сборка предназначена для тех, кто хочет видеть новейшие функции сразу после их выпуска. Эта сборка имеет ежемесячный цикл выпуска с новейшими функциями каждый месяц.

Windows Terminal

Терминал Windows это основная сборка продукта. Функции, которые поступают в Windows Terminal Preview, появляются в Windows Terminal через месяц эксплуатации. Это позволяет проводить обширное тестирование ошибок и стабилизацию новых функций. Эта сборка предназначена для тех, кто хочет получить функции после того, как они были изучены и протестированы сообществом Preview.

Первый запуск

После установки терминала вы можете запустить приложение и сразу приступить к работе с командной строкой. По умолчанию терминал включает профили Windows PowerShell, Command Prompt и Azure Cloud Shell в раскрывающемся списке. Если на вашем компьютере установлены дистрибутивы Подсистемы Windows для Linux (WSL), они также должны динамически заполняться как профили при первом запуске терминала.

Профили

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

Дефолтный профиль

При первом запуске Windows Terminal в качестве профиля по умолчанию устанавливается Windows PowerShell. Профиль по умолчанию это профиль, который всегда открывается при запуске терминала, и это профиль, который открывается при нажатии кнопки новой вкладки. Вы можете изменить профиль по умолчанию, установив defaultProfile на имя вашего предпочтительного профиля в файле settings.json.

"defaultProfile": "PowerShell"

Добавление нового профиля

Новые профили можно добавлять динамически с помощью терминала или вручную. Терминал Windows автоматически создаст профили для распределений PowerShell и WSL. Эти профили будут иметь свойство source, которое сообщает терминалу, где он может найти соответствующий исполняемый файл.

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

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

Структура Settings.json

В Терминал Windows включены два файла настроек. Один из них defaults.json, который можно открыть, удерживая клавишу Alt и нажав кнопку Настройки в раскрывающемся списке. Это неизменяемый файл, который включает в себя все настройки по умолчанию, которые поставляются с терминалом. Второй файл settings.json, в котором вы можете применить все свои пользовательские настройки. Доступ к нему можно получить, нажав кнопку Настройки в раскрывающемся меню.

Файл settings.json разделен на четыре основных раздела. Первый это объект глобальных настроек, который находится в верхней части файла JSON внутри первого {. Примененные здесь настройки повлияют на все приложение.

Следующим основным разделом файла является объект profiles. Объект profiles разделен на два раздела: defaults и list. Вы можете применить настройки профиля к объекту defaults, и они будут применяться ко всем профилям в вашем list. list содержит каждый объект профиля, который представляет профили, описанные выше, и это элементы, которые появляются в раскрывающемся меню вашего терминала. Настройки, примененные к отдельным профилям в списке, имеют приоритет над настройками, примененными в разделе defaults.

Далее в файле расположен массив schemes. Здесь можно разместить собственные цветовые схемы. Отличный инструмент, который поможет вам создать свои собственные цветовые схемы, это terminal.sexy.

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

Базовая кастомизация

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

Фон

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

"backgroundImage": "C:\Users\admin\background.png"

Параметр backgroundImage принимает расположение файла изображения, которое вы хотите использовать в качестве фона вашего профиля. Допустимые типы файлов: .jpg, .png, .bmp, .tiff, .ico и .gif.

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

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

"colorScheme": "COLOR SCHEME NAME"

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

Начертание шрифта

По умолчанию Windows Terminal использует Cascadia Mono в качестве шрифта. Начертание шрифта это настройка уровня профиля. Вы можете изменить шрифт, установив fontFace на имя шрифта, который вы хотите использовать.

"fontFace": "FONT NAME"`

Совет: Терминал Windows также поставляется с начертанием шрифта Cascadia Code, который включает программные лигатуры (см. Gif ниже). Если вы используете Powerline, Cascadia Code также поставляется в PL-версии, которую можно загрузить с GitHub.

Полезные ресурсы

Докуметация Windows Terminal
Скотт Хансельман: как сделать красивым Windows Terminal с помощью Powerline, шрифтов Nerd, кода Cascadia, WSL и oh-my-posh
Скотт Хансельман: Как настроить терминал с помощью Git Branch, Windows Terminal, PowerShell, + Cascadia Code!
Скотт Хансельман: Windows Terminal Feature PREVIEW Кастомизируйте свои привязки клавиш, цветовые схемы, панели, и многое другое!
>_TerminalSplash темы Windows Terminal