Расширение рабочего процесса с помощью Angular 5 Snippets и VS Code

В этой статье мы сосредоточимся на том, как использовать фрагменты Angular 5 в коде Visual Studio для улучшения нашего рабочего процесса. Сначала мы начнем с основ использования и создания фрагментов. Мы рассмотрим, как мы можем использовать Angular-фрагменты для VS Code в Angular-проекте. Затем мы рассмотрим, как мы можем создавать свои собственные фрагменты и делиться ими с другими.

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

Что если ваш редактор может помочь вам автоматически вставить этот общий код при вводе? Это было бы здорово, верно?

Ну, вы, вероятно, знаете их как фрагменты . Эта функция распространена во всех современных доступных средах разработки. Даже Notepad ++ поддерживает их (хотя и не включен по умолчанию).

Предпосылки

Перед началом работы на вашем компьютере должна быть установлена ​​последняя версия кода Visual Studio . Мы также будем смотреть на угловые 5 фрагментов. Так что иметь хотя бы базовые знания по Angular будет полезно, но не обязательно.

Вам нужно будет использовать существующий или новый проект Angular 5, чтобы экспериментировать с фрагментами. Я предполагаю, что у вас последняя версия Node.js или, по крайней мере, версия не старше Node.js 6. Вот команда для установки инструмента Angular CLI, если у вас ее нет:

 npm install -g @angular/cli # or yarn global add @angular/cli 

Отрывки объяснены

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

• log
• if
• ifelse
• forof
• settimeout

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

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

• Windows — C:\Program Files\Microsoft VS Code\resources\app\extensions\javascript\snippets\javascript.json
• Linux — /usr/share/code/resources/app/extensions/javascript/snippets/javascript.json

Мы рассмотрим, как мы можем создавать свои собственные фрагменты, но сначала давайте рассмотрим некоторые сторонние фрагменты.

Как использовать сниппеты

На момент написания статьи Visual Studio Marketplace перечислил 934 расширения в категории фрагментов. Вы найдете фрагменты для каждого созданного языка программирования, включая Паскаль! Это означает, что вам, вероятно, следует проверить рынок, прежде чем создавать свои собственные фрагменты. Как упоминалось ранее, мы будем смотреть на 5 угловых фрагментов. Найдите существующий проект Angular 5 в вашей рабочей области или просто создайте новый:

 ng new snippets-demo 

Как только проект настроен, откройте его в VS Code. Затем щелкните значок расширения на панели действий, чтобы открыть панель « Расширения» . Поиск Angular 5 . Результаты поиска должны перечислить несколько угловых расширений. Установите тот, который имеет автора «Джон Папа» . После завершения установки нажмите кнопку перезагрузки, чтобы перезапустить VS Code. Это угловое расширение с 5 фрагментами поставляется с более чем 50 фрагментами. Около 70% фрагментов написаны для TypeScript, а остальные в основном для HTML. Там также есть некоторые фрагменты Docker.

Давайте попробуем несколько из этих 5 угловых фрагментов. Создайте новый файл с именем app.service.ts в папке приложения. Откройте файл и начните вводить «a-service». По мере ввода появится всплывающий список. Даже до того, как вы закончите печатать, у вас должна быть выделена правильная опция. Нажмите ввод, чтобы вставить шаблон. После ввода фрагмента обратите внимание, что сгенерированное имя класса будет подсвечено для изменения.

 a-service-httpclient 

 getPosts(): Observable<any[]> { } 

 return this.httpClient.get('url'); 

 getPosts(): Observable<any[]> { return this.httpClient.get<any[]>('/posts'); } 

 "Print Hello World": { "prefix" : "hello", "body": [ "console.log('Hello World!');" ], "description": "Print Hello World to console" } 

 console.log('Hello World'); 

 "Print Hello World": { "prefix" : "hello", "body": [ "console.log('Hello $1!');", "$2" ], "description": "Print Hello World to console" } 

 "Print Hello World": { "prefix" : "hello", "body": [ "console.log('Hello ${1:World}!');", "$0" ], "description": "Print Hello World to console" } 

 ... "console.log('Hello ${1|World,Earth,Terra|}!');", ... 

 "Angular HttpClient Service": { "prefix": "a-service-httpclient", "description": "Angular service with HttpClient", "body": [ "import { Injectable } from '@angular/core';", "import { HttpClient } from '@angular/common/http';", "import { catchError } from 'rxjs/operators';", "", "@Injectable()", "export class ${1:ServiceName}Service {", "\tconstructor(private httpClient: HttpClient) { }", "\t$0", "}" ] }