Vs code шаблон html

03.09.202203.09.2022 admin 0 Comments

Vs code шаблон html

Практическое руководство. Создание веб-шаблонов вручную

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

Создание веб-шаблонов вручную

Измените или удалите файлы в проекте или добавьте в него новые файлы.

Создайте XML-файл и сохраните его с расширением VSTEMPLATE в одном каталоге с проектом. Не добавляйте его в проект в Visual Studio.

Измените файл VSTEMPLATE с XML-кодом, чтобы предоставить метаданные шаблона проекта. Дополнительные сведения см. в приведенных ниже примерах.

Найдите в файле VSTEMPLATE элемент ProjectType и задайте Web в качестве текстового значения.

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

Выберите файлы в шаблоне (включая файл VSTEMPLATE), щелкните их правой кнопкой мыши и последовательно выберите Отправить>Сжатая ZIP-папка. Файлы сжимаются в ZIP-файл.

Поместите ZIP-файл шаблона в каталог шаблонов проекта Visual Studio. По умолчанию это каталог %USERPROFILE%\Documents\Visual Studio \ProjectTemplates.

Пример

В следующем примере показан базовый файл VSTEMPLATE для шаблона веб-проекта:

Snippets in Visual Studio Code

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

The snippet syntax follows the TextMate snippet syntax with the exceptions of ‘interpolated shell code’ and the use of \u ; both are not supported.

Built-in snippets

VS Code has built-in snippets for a number of languages such as: JavaScript, TypeScript, Markdown, and PHP.

You can see the available snippets for a language by running the Insert Snippet command in the Command Palette to get a list of the snippets for the language of the current file. However, keep in mind that this list also includes user snippets that you have defined, and any snippets provided by extensions you have installed.

Install snippets from the Marketplace

Many extensions on the VS Code Marketplace include snippets. You can search for extensions that contains snippets in the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) using the @category:»snippets» filter.

If you find an extension you want to use, install it, then restart VS Code and the new snippets will be available.

Create your own snippets

You can easily define your own snippets without any extension. To create or edit your own snippets, select User Snippets under File > Preferences (Code > Preferences on macOS), and then select the language (by language identifier) for which the snippets should appear, or the New Global Snippets file option if they should appear for all languages. VS Code manages the creation and refreshing of the underlying snippets file(s) for you.

Snippets files are written in JSON, support C-style comments, and can define an unlimited number of snippets. Snippets support most TextMate syntax for dynamic behavior, intelligently format whitespace based on the insertion context, and allow easy multiline editing.

Below is an example of a for loop snippet for JavaScript:

In the example above:

Snippet scope

Snippets are scoped so that only relevant snippets are suggested. Snippets can be scoped by either:

Language snippet scope

Every snippet is scoped to one, several, or all («global») languages based on whether it is defined in:

Single-language user-defined snippets are defined in a specific language’s snippet file (for example javascript.json ), which you can access by language identifier through Preferences: Configure User Snippets. A snippet is only accessible when editing the language for which it is defined.

Most user-defined snippets are scoped to a single language, and so are defined in a language-specific snippet file.

Project snippet scope

Snippet syntax

The body of a snippet can use special constructs to control cursors and the text being inserted. The following are supported features and their syntaxes:

Tabstops

Placeholders

Choice

Variables

The following variables can be used:

For inserting the current date and time:

For inserting random values:

For inserting line or block comments, honoring the current language:

The snippet below inserts /* Hello World */ in JavaScript files and in HTML files:

Variable transforms

Transformations allow you to modify the value of a variable before it is inserted. The definition of a transformation consists of three parts:

Placeholder-Transform

Transform examples

Grammar

Using TextMate snippets

You can also use existing TextMate snippets (.tmSnippets) with VS Code. See the Using TextMate Snippets topic in our Extension API section to learn more.

Assign keybindings to snippets

You can create custom keybindings to insert specific snippets. Open keybindings.json (Preferences: Open Keyboard Shortcuts File), which defines all your keybindings, and add a keybinding passing «snippet» as an extra argument:

The keybinding will invoke the Insert Snippet command but instead of prompting you to select a snippet, it will insert the provided snippet. You define the custom keybinding as usual with a keyboard shortcut, command ID, and optional when clause context for when the keyboard shortcut is enabled.

Next steps

Common questions

You can easily package TextMate snippets files for use in VS Code. See Using TextMate Snippets in our Extension API documentation.

How do I have a snippet place a variable in the pasted script?

This results in the pasted snippet as:

Can I remove snippets from IntelliSense?

Yes, you can hide specific snippets from showing in IntelliSense (completion list) by selecting the Hide from IntelliSense button to the right of snippet items in the Insert Snippet command dropdown.

You can still select the snippet with the Insert Snippet command but the hidden snippet won’t be displayed in IntelliSense.

Русские Блоги

Быстро создавать собственные шаблоны кода в Vscode

Я возьму создание Vue в качестве примера, но мое Vue создано в HTML.

Учебник выглядит следующим образом:

Используйте картинки и текст вместе, чтобы понять более четко!

Мы входим html.json Страница, здесь мы пишем свои собственные шаблоны:

Следующим шагом является написание нашего шаблона. Наш шаблон нуждается примерно в следующих элементах:

Я подготовил шаблон, шаблон выглядит следующим образом:

Интеллектуальная рекомендация

Java Onlink Notes (что такое Java)

2, изучение языка Java сначала должен иметь определенное понимание этого (1) Язык Java имеет Солнце (Стэнфордская сеть Стэнфордской университетской сети университета). (2) Очень важная особенность язы.

Режим прокси [сначала режим структуры]

Режим прокси Это режим структуры объекта. Прокси-режим предоставляет прокси-объект для объекта, а прокси-объект управляет ссылкой на исходный объект. Во-первых, тип агента: В зависимости от цели испол.

Создайте небольшой экземпляр spingboot, включая CRUD

Прежде всего, мы создали проект maven. Мы не знаем, как учиться, как предлагает проект maven. Это очень просто. Затем откройте инструменты разработки. Я использую идею здесь. Выберите File-> projec.

Практическое руководство. Создание шаблонов элементов

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

Добавление шаблона элемента в диалоговое окно «Добавление нового элемента»

Создайте или откройте проект в Visual Studio.

Добавьте элемент в проект и измените его по своему усмотрению.

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

В меню Проект выберите команду Экспорт шаблона.

На странице Выбор типа шаблона выберите Шаблон элемента, затем проект, который содержит элемент, и нажмите кнопку Далее.

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

На странице Выбор ссылок для элементов выберите ссылки на сборки, включаемые в шаблон, а затем нажмите кнопку Далее.

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

Файлы для шаблона добавляются в ZIP-файл и копируются в каталог, который вы указали в мастере. Расположением по умолчанию является папка %USERPROFILE%\Documents\Visual Studio \My Exported Templates.

Если вы не выбрали параметр Автоматически импортировать шаблон в Visual Studio в мастере экспорта шаблонов, найдите экспортированный шаблон. Затем скопируйте его в каталог пользовательских шаблонов элементов. Расположением по умолчанию является папка %USERPROFILE%\Documents\Visual Studio \Templates\ItemTemplates.

Закройте Visual Studio, а затем откройте среду повторно.

Создайте новый проект или откройте существующий, а затем выберите Проект>Добавить новый элемент или нажмите клавиши CTRL+SHIFT+A.

Шаблон элемента появится в диалоговом окне Добавление нового элемента. Если вы добавили описание в мастере экспорта шаблонов, оно будет отображаться в правой части диалогового окна.

Включение шаблона элемента для использования в проекте универсального приложения для Windows

Мастер выполняет за вас основную часть работы по созданию базового шаблона, но во многих случаях необходимо вручную изменить VSTEMPLATE-файл после экспорта шаблона. Например, если элемент должен отображаться в диалоговом окне Добавление нового элемента для проекта универсального приложения Windows, необходимо выполнить ряд дополнительных действий.

Выполните шаги из предыдущего раздела по экспорту шаблона элемента.

Извлеките созданный ZIP-файл и откройте VSTEMPLATE-файл в Visual Studio.

Для проекта универсальной платформы Windows на C# добавьте следующий XML-код внутри элемента:

Сохраните VSTEMPLATE-файл в Visual Studio и закройте его.

Скопируйте и вставьте VSTEMPLATE-файл обратно в ZIP-файл.

Если откроется диалоговое окно Копирование файла, выберите параметр Копировать с заменой.

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

Включение шаблонов для конкретных подтипов проектов

Можно указать, что шаблон должен отображаться только для определенных подтипов проекта, например Windows, Office, базы данных или веб-сайта.

Найдите в VSTEMPLATE-файле элемент ProjectType для шаблона элемента.

Задайте для элемента одно из следующих текстовых значений:

В следующем примере показан шаблон элемента, доступный для проектов Office.

Создание шаблона элемента вручную

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

Создайте проект и его элемент.

Измените элемент проекта, пока он не будет готов к сохранению в качестве шаблона.

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

Создайте XML-файл и сохраните его, используя расширение VSTEMPLATE, в одном каталоге с файлом элемента проекта.

Измените VSTEMPLATE-файл с кодом XML для предоставления метаданных шаблона элемента. Дополнительные сведения см. в статье Справочник по схемам шаблонов (расширяемость) и в примере из предыдущего раздела.

Сохраните VSTEMPLATE-файл и закройте его.

В проводнике выберите файлы, которые нужно включить в шаблон. Щелкните выбранные файлы правой кнопкой мыши и выберите пункты Отправить>Сжатая ZIP-папка. Выбранные файлы будут сжаты в ZIP-файл.

Vs code шаблон html

Про плагин Emmet узнал совершенно случайно, когда в редакторе Visual Studio Code нажал кнопку Tab после ошибочно введенного символа ‘p’ – текст заменился на

. Сначала подумал, что глюк, но попробовав то же самое с div, td и т.д. понял, что «это не баг, а фича».

Visual Studio Code очень быстро подсказывал синтаксис тэгов, потому необходимости в дополнительной автоматизации не было. Разве что неплохо бы научиться ему поддерживать Intellisense для подключенных таблиц стилей при html-верстке. Подсказка тэгов уже давно реализована в текстовых редакторах, например, Notepad++.

В случае с Emmet все немного иначе. Это не просто подсказчик синтаксиса, это по сути генератор сниппетов html и css кода. С помощью синтаксиса, по сути похожего на регулярные выражения, можно генерировать блоки кода, лишь введя несколько символов.

Emmet оптимизирован для html и css, но может быть также настроен на поддержку языков программирования.

Для использования плагина Emmet в Visual Studio Code нужно ввести паттерн для генерации кода и нажать кнопку Tab.

Использование плагина Emmet в Visual Studio Code

Таблица основных шаблонов для генерации HTML кода в плагине Emmet

Emmet: ускорение набора HTML-кода

Вставка структуры HTML-документа

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

Три восклицательных знака позволяют вставить тег :

В структуре HTML-документа в параметре lang тега по умолчанию указывается код английского языка. Чтобы выводился код русского языка нужно в настройках редактора выполнить поиск параметра Emmet: Variables и указать значение ru для переменной lang или просто добавить следующий фрагмент кода в конец файла settings.json:

Вставка HTML-комментария

Буква c позволяет вставить HTML-комментарий:

Теги из раздела HEAD

Комбинации для тега :

Комбинации для тега script:src =>

Комбинация для тега :

Основные теги из раздела BODY

При вводе названий тегов, не имеющих отдельных комбинаций, получим открывающий и закрывающий тег:

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

Комбинации для тега :

Комбинации для вставки изображений:

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

Добавление текста

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

Текст можно также добавить в составе комбинации внутри фигурных скобок:

Для вставки текста-заполнителя следует ввести слово lorem после которого можно указать количество генерируемых слов (задавать количество слов необязательно). Создадим три абзаца и добавим в них по пять слов:

После слова lorem можно указать код языка. Сгенерируем текст на русском языке:

Не пытайтесь найти смысл во вставленном тексте. Основная цель lorem показать заказчику, как будет выглядеть дизайн сайта с произвольным текстом.

Добавление параметров тегов

Если указать только CSS-селектор стилевого класса или идентификатора, то будет создан тег

Чтобы добавить эти параметры в другой тег, предварительно указываем его название:

Если эти параметры вкладываются в блочный тег, то они добавляются к тегу :

или к другим вложенным тегам в зависимости от родительского элемента:

Для добавления произвольных параметров, их следует указывать внутри квадратных скобок. Значение параметра задается после символа = внутри одинарных или двойных кавычек. Если значение не содержит пробела, то кавычки можно не указывать. Если параметр не содержит значения, то достаточно вставить только название параметра:

Формы и элементы управления

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

Таблицы

Для быстрой вставки таблиц, строк и ячеек можно использовать такие комбинации:

Списки

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

Вставка сразу нескольких тегов

Символ > означает, что нужно выполнить вложение внутрь тега. В предыдущем примере мы вкладывали текст. Вложим пункт внутрь списка:

Символ + добавляет элемент после текущего элемента:

Чтобы переместиться на несколько уровней выше, следует символ ^ указать несколько раз:

Можно также ограничить вложение, добавив группу внутрь круглых скобок:

Подробное описание руководства по редактору Visual Studio Code (PDF)

Помощь сайту

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

File Templates for VSCode

Venkatesh Boddu

Templates for VSCode

This extension helps in creating files easily from defined templates.

Features

Choose commands from Command Palette:

Create a new File from Template:

Usage

Right-click on the VSCode Explorer where you want to create a new file, you will see an option ‘Create New File from template’. Selecting this option shows a menu with existing templates. Select the desired template and enter the new file name. New file will be created in the selected folder.

You can also create a new File from template by Right-click on the editor. On Right-click in the editor, you will all also see ‘Create Template from file’ option. Select this option to create a new Template from the current active document.

Templates Location

Depending on your OS, default templates are located at

You can also create workspace specific templates. Worspace templates are located at /%WORKSPACE_ROOT_FOLDER%/.vscode/templates

Extension Settings

This extension contributes the following settings:

Сниппет, расширение для VSCode и CLI. Часть 1

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

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

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

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

Сниппет (Snippet)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для разработки расширений для VSCode, нам, кроме Node.js и Git, потребуется еще парочка библиотек, точнее, одна библиотека и плагин, а именно: yeoman и 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 в нашем коде почти не будет, а там, где будет, я дам необходимые разъяснения), отвечаем на вопросы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выполняем команду 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 и установки зависимостей.

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

Пошаговое руководство. Формирование кода с помощью текстовых шаблонов

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

Типизированный код для чтения XML-файла

Пространство имен System.Xml предоставляет комплексные средства для загрузки XML-документа и последующего свободного просмотра его в памяти. К сожалению, все эти узлы имеют одинаковый тип — XmlNode. Поэтому очень легко допустить ошибки программирования, например, ожидая неверный тип дочернего узла или неверные атрибуты.

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

Приложение xsd.exe, которое входит в состав Visual Studio, может создавать строго типизированные классы из XML-файлов. Показанный здесь шаблон представлен в качестве примера.

Ниже приведен пример файла:

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

Сравните это с нетипизированным кодом, который можно написать без шаблона:

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

В этом проекте применяется один файл шаблона для создания классов, которые делают типизированную версию возможной.

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

Создание или открытие проекта C#

Эту методику можно применить к любому проекту кода. В этом пошаговом руководстве используется проект C#, а в целях тестирования применяется консольное приложение.

В меню «Файл» нажмите кнопку «Создать » и выберите пункт «Проект«.

Выберите узел Visual C# а затем в области Шаблоны щелкните Консольное приложение.

Добавление XML-файла прототипа в проект

Этот файл служит для предоставления примеров всех типов узлов XML, которые ваше приложение должно уметь считывать. Это может быть файл, который будет использоваться для тестирования приложения. Шаблон создаст класс C# для каждого типа узла в этом файле.

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

В обозревателе решений щелкните проект правой кнопкой мыши, выберите команду «Добавить » и выберите пункт «Создать элемент«.

В диалоговом окне Добавление нового элемента выберите в области Шаблоны элемент XML-файл.

Добавьте образец содержимого в файл.

Добавление файла кода тестирования

Добавьте в проект файл C# и напишите в нем пример кода, который вы хотите иметь возможность записать. Пример:

На этом этапе скомпилировать код не удастся. При написании шаблона вы создадите классы, позволяющие успешно скомпилировать код.

Более полный тест позволит проверить выходные данные этой тестовой функции на соответствие известному содержимому из примера XML-файла. Однако в данном пошаговом руководстве нам достаточно успешной компиляции тестового метода.

Добавление файла текстового шаблона

Добавьте файл текстового шаблона и задайте для расширения вывода cs.

В обозревателе решенийщелкните проект правой кнопкой мыши, выберите пункт Добавить, а затем щелкните Новый элемент.

В диалоговом окне Добавление нового элемента выберите в области Шаблоны элемент Текстовый шаблон.

Убедитесь, что добавляется именно текстовый шаблон, а не предварительно преобразованный текстовый шаблон.

Это изменение позволит коду шаблона получить доступ к службам Visual Studio.

В директиве output измените значение атрибута расширения на «.cs», чтобы шаблон создал файл C#. В проекте Visual Basic следовало бы изменить его на «.vb».

Сохраните файл. На данном этапе файл текстового шаблона должен содержать следующие строки:

Обратите внимание, что CS-файл отображается в обозревателе решений как дочерний элемент файла шаблона. Его можно просмотреть, нажав кнопку [+] рядом с именем файла шаблона. Этот файл создается из файла шаблона при каждом сохранении или перемещении фокуса с файла шаблона. Созданный файл компилируется как часть проекта.

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

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

Разработка текстового шаблона

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

Прототип для создаваемого кода

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

Это поможет увидеть, что именно требуется, но объявления должны создаваться из типов узлов в образце XML-файла. Удалите эти экспериментальные строки из шаблона.

Создание кода приложения из модели XML-файла

Чтобы прочитать XML-файл и создать объявления классов, замените содержимое шаблона следующим кодом:

Замените путь к файлу правильным путем для проекта.

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

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

Чтение файла модели и последующее создание кода

Многие текстовые шаблоны следуют общему правилу, где первая часть шаблона считывает исходный файл, а вторая — создает шаблон. Необходимо считать весь пример файла, чтобы подвести итоги по содержащимся в нем типам узлов, а затем создать объявления классов. Другой необходим, чтобы мы могли использовать Dictionary<>:

Добавление вспомогательного метода

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

Если вы предпочитаете, чтобы имена классов начинались с прописной буквы, замените последнюю часть шаблона следующим кодом:

На этом этапе созданный CS-файл содержит следующие объявления:

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

Доступ к API Visual Studio

hostspecific Установка атрибута директивы позволяет шаблону получить доступ к API Visual Studio. Благодаря этому шаблон может получить сведения о расположении файлов проекта, чтобы избежать использования абсолютного пути к файлу в коде шаблона.

Завершение текстового шаблона

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

Запуск тестовой программы

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

Запись и обновление приложения

Теперь приложение можно написать в строго типизированном стиле, используя вместо универсального XML-кода созданные классы.

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

Заключение

В этом пошаговом руководстве показано несколько методов и преимуществ создания кода:

Создание кода — это создание части исходного кода приложения на базе модели. Модель содержит информацию в форме, приемлемой для домена приложения, и может измениться в течение жизненного цикла приложения.

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

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

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

Текстовый шаблон можно разрабатывать и тестировать быстро и последовательно.

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

Устранение неполадок с текстовым шаблоном

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

Практическое руководство. Создание шаблонов элементов

Добавление шаблона элемента в диалоговое окно «Добавление нового элемента»

Создайте или откройте проект в Visual Studio.

Добавьте элемент в проект и измените его по своему усмотрению.

В меню Проект выберите команду Экспорт шаблона.

Закройте Visual Studio, а затем откройте среду повторно.

Включение шаблона элемента для использования в проекте универсального приложения для Windows

Выполните шаги из предыдущего раздела по экспорту шаблона элемента.

Извлеките созданный ZIP-файл и откройте VSTEMPLATE-файл в Visual Studio.

Для проекта универсальной платформы Windows на C# добавьте следующий XML-код внутри элемента:

Сохраните VSTEMPLATE-файл в Visual Studio и закройте его.

Скопируйте и вставьте VSTEMPLATE-файл обратно в ZIP-файл.

Если откроется диалоговое окно Копирование файла, выберите параметр Копировать с заменой.

Включение шаблонов для конкретных подтипов проектов

Найдите в VSTEMPLATE-файле элемент ProjectType для шаблона элемента.

Задайте для элемента одно из следующих текстовых значений:

В следующем примере показан шаблон элемента, доступный для проектов Office.

Создание шаблона элемента вручную

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

Создайте проект и его элемент.

Измените элемент проекта, пока он не будет готов к сохранению в качестве шаблона.

Создайте XML-файл и сохраните его, используя расширение VSTEMPLATE, в одном каталоге с файлом элемента проекта.

Сохраните VSTEMPLATE-файл и закройте его.

htmltagwrap

Brad Gashler

vscode-htmltagwrap

What is it

Wraps your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once).

To use, select one or many chunks of code and press «Alt + W» («Option + W» for Mac).

How to Use It

By default, pressing spacebar will deselect the closing tags, so you can add attributes to the opening tags (you can turn this feature off, see below). If nothing is selected when you run htmltagwrap, it will add an opening and closing tag at the cursor position.

NOTE: This extension works best in files that either use tabs or spaces for indentation. It may not work as well with mixed tabs/spaces.

Settings

You can change the default behavior of htmltagwrap with the following settings.

Available settings

Defaults

Known Issues

When using the default setting «htmltagwrap.autoDeselectClosingTag»: true :

I haven’t found good solutions to these issues using the current extension API.

Contributing

Please create an issue on GitHub if you experience a bug. I also welcome pull requests.

Как ускорить свою разработку в VS Code — Сниппеты

Что значит ускорить разработку?

При программировании мы выполняем много рутинной работы, которая отнимает много времени. Чтобы упростить разработку того или иного продукта изначально были придуманы среды разработки такие, как VS Code. Это один из самых мощных инструментов, который сейчас представлен на рынке. На нем можно как писать сайты, так и скрипты на python, php или js. Можно встроить интерпретатор или подключить компилятор внутрь среды и «горячими клавишами» выполнять ту или иную задачу.

Сегодня в статье рассмотрим один из самых крутых инструментов – сниппет.

Что такое сниппет?

Сниппет, грубо говоря, это кусок заранее написанного кода, который можно вызывать внутри среды Vs Code. Представляет из себя json код, который содержит префикс, тело и описание сниппета. В данном случае мы рассмотрим такие сниппеты, которые можно вставить в любом месте нашего файла.

Сниппеты по умолчанию

В VS Code есть снипппеты по умолчанию, которые уже имеются в среде после установки. Самый популярный – это кусок html кода, который встраивается в вашу страницу. Так, например, если создать файл index.html и в первой строчке файла поставить “!” знак и нажать на “Tab”, то у вас встроится следующий код:

Это пустой шаблон html страницы. После встраивания данного сниппета вы можете менять его так, как Вам это нужно

Как это работает?

Сниппеты работают по принципу Emmet. Если вы когда-либо писали сайты или создавали приложения в Visual Studio, то, наверное, знаете про Emmet. Это набор встроенных или установленных плагинов, которые ускоряют разработку путем написания меньшего объема кода. По сути, то же, что будем делать и мы. Так, например, в html с помощью emmet Вы можете писать длинные конструкции в одну строчку и преобразовывать их таким образом:

Нажмем Tab и преобразуем в.

Собственные сниппеты

После того, как мы разобрались, что такое сниппеты и какие они бывают по умолчанию, время разобраться с тем, как создать свой собственный. Чтобы создать свой сниппет в Visual Studio Code, необходимо перейти во вкладку “File” → “Preferences” → “User Snippets”

После этого в верху окна откроется окно выбора / создания сниппета:

Здесь до горизонтальной разделительной черты находятся ваши собственные сниппеты. Далее есть пункт, который создает Глобальный сниппет «New Global Snippets file…», он может быть вызван и применен в любом проекте и на любом языке. Также можно создать локальный сниппет для конкретного проекта: «New Snippets file for ‘Project_name’…». В данном случае Ваш сниппет также может быть вызван в любом ЯП (Языке программирования), но внутри вашего проекта или внутри директории, для которой Вы открыли VS Code. Ниже идет список ЯП, для которых можно написать персонализированные сниппеты. Для всех самых и не самых популярных ЯП имеется возможность создать свой сниппет.

Практика

Все сниппеты создаются одинаково. Рассмотрим пример создания глобального сниппета.

Как заполнить?

Раскомментируем все, что находится ниже слова «Example:».

«Print to console» — это наименование сниппета, он будет отображаться вам при вызове данного сниппета при условии, если отсутствует описание сниппета:

«scope» — это поле отображает языки и проекты, где можно использовать вызов данного сниппета. Т.к. по умолчанию стоит javascript и typescript, то, кроме данных файлов, нигде вызвать сниппет не получится.

«prefix» — это префикс вашего сниппета, т.е. короткое название, по которому будет вызываться ваш сниппет.

«body» — это тело сниппета, здесь хранится то, что напечатается после нажатия на кнопку “Tab”.

«description» — это поле «описание», которое поможет вам понять какой именно сниппет Вы вызываете.

Пример

Создаем сниппет с именем “picture”. Префикс даем аналогичный названию. В “description” пишем, о чем наш сниппет, чтобы всегда смогли понять «что он делает?». И самое интересное “body” – тело нашего сниппета, которое представляет из себя массив строк. Т.о. каждый элемент данного массива будет являться строкой. 0-ой элемент – открывает тег

, на последнем даем отступ от сниппета, на предпоследнем закрываем тег

. В 1, 2, 3 элементах массива определяем ресурсы, откуда брать изображения. Обратите внимание, что перед и стоят \t – экранированная “t” – означающая табуляцию. Дальше также экранируем все кавычки и в конце строки не забываем ставить запятую, т.к. это массив.

В сниппетах Visual Studio Code есть возможность писать плейсхолдеры. Что же это такое? Это автоматически выделенные области вашего кода, которые можно менять на лету посредством нажатия “Tab”:

Setting up Visual Studio Code (Part 2)—HTML, CSS and JavaScript settings

Hey, it’s Zell. Welcome back to Part 2 of the VS code setup series.

If you haven’t watched the 1st part yet, I suggest you go watch it first, because everything we’re going to do today follows from there. Everything follows from there.

What we’re going to do in this video is to setup VS code to write HTML, CSS and JavaScript properly. Let’s work on HTML first.

Format On Save

The first I like to do is add editor.formatOnSave to your settings file. With this option turned on, VS Code will format or (beautify) your code when you save the file. It’s very very useful for maintaining good quality code.

HTML Settings

VS Code has a weird way of splitting lines by the number of characters. If you have a long paragraph of text in your HTML and if you hit save, you may notice that long paragraph gets split into two lines of code. It’s pretty weird because you want to use HTML tags to split them properly.

What I’ll do is set the wrapLineLength property to 0. This prevents VS Code from acting in the weird manner. While I’m at the HTTML part, I also set suggestions for angular1 and ionic to false since I don’t use them.

That’s it for the settings file.

HTML Extensions

VS Code has pretty code HTML Extensions. I use the following extensions:

Auto close tag helps you close HTML tags automatically. You can write lesser keystrokes, which is always a win.

Auto rename tag helps you rename the closing tag when you change the opening tag. This is a lifesaver because I always forget to rename the closing tag whenever I change an opening tag.

Intellisense for classnames gives you auto class completions, which when you’re writing classes. It doesn’t always work, but when it works, it’s useful. I have no idea why it works or why it doesn’t sometime. This is a bonus for me.

That’s it for HTML. Let’s move on to CSS.

For CSS, I install the following extensions.

Prettier is the best CSS formatter I’ve seen to date. When you install prettier, you can hit save and your CSS or Sass files will be formatted properly. You can even add stylelint integrations which is useful if you’re more advanced on the config part of things.

Stylelint is a CSS Linter. A Linter is a tool that checks your file for consistent formatting. It also tells you when there is an error, so you don’t make silly typo mistakes.

CSS Peek gives you the ability to search for CSS Selectors in a file. It helps when you have a long CSS file.

JavaScript

For JavaScript, I install the following extensions.

JavaScript standard style

JavaScript Standard Style is a linter that follows the JavaScript standard format. It’s a popular format made by a guy called @feross. It contains a linter plus a formatter. But making the formatter work is kinda tricky.

Sublime Babel gives you better syntax highlighting for JavaScript files when you use newer JavaScript syntax through Babel. That is pretty self explanatory so I’m not going to say anymore.

npm intellisense is good when you use npm modules in your code. It helps you autocomplete node modules, which is awesome.

Wrapping up

This is how I configure VS Code for HTML, CSS and JavaScript.

I hope this video has been helpful for you. In the next video, I show you some useful extensions I use to improve the overall VS Code experience.

If you enjoyed this article, please support me by sharing this article Twitter or buying me a coffee 😉. If you spot a typo, I’d appreciate if you can correct it on GitHub. Thank you!

Пошаговое руководство. Формирование кода с помощью текстовых шаблонов

Типизированный код для чтения XML-файла

Ниже приведен пример файла:

Сравните это с нетипизированным кодом, который можно написать без шаблона:

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

Создание или открытие проекта C#

В меню «Файл» нажмите кнопку «Создать » и выберите пункт «Проект«.

Выберите узел Visual C# а затем в области Шаблоны щелкните Консольное приложение.

Добавление XML-файла прототипа в проект

В диалоговом окне Добавление нового элемента выберите в области Шаблоны элемент XML-файл.

Добавьте образец содержимого в файл.

Добавление файла кода тестирования

Добавьте в проект файл C# и напишите в нем пример кода, который вы хотите иметь возможность записать. Пример:

Добавление файла текстового шаблона

Добавьте файл текстового шаблона и задайте для расширения вывода cs.

В диалоговом окне Добавление нового элемента выберите в области Шаблоны элемент Текстовый шаблон.

Убедитесь, что добавляется именно текстовый шаблон, а не предварительно преобразованный текстовый шаблон.

Это изменение позволит коду шаблона получить доступ к службам Visual Studio.

Сохраните файл. На данном этапе файл текстового шаблона должен содержать следующие строки:

Разработка текстового шаблона

Прототип для создаваемого кода

Создание кода приложения из модели XML-файла

Чтобы прочитать XML-файл и создать объявления классов, замените содержимое шаблона следующим кодом:

Замените путь к файлу правильным путем для проекта.

Чтение файла модели и последующее создание кода

Добавление вспомогательного метода

На этом этапе созданный CS-файл содержит следующие объявления:

Доступ к API Visual Studio

Завершение текстового шаблона

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

Запуск тестовой программы

Запись и обновление приложения

Заключение

В этом пошаговом руководстве показано несколько методов и преимуществ создания кода:

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

Текстовый шаблон можно разрабатывать и тестировать быстро и последовательно.

Устранение неполадок с текстовым шаблоном

HTML-шаблонизаторы

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

Шаблонизаторы для HTML — один из таких способов.

Какие проблемы решают шаблонизаторы

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

При вёрстке шаблонов принято выделять повторяющиеся блоки в компоненты, чтобы использовать их на других страницах, но иногда один из них требуется изменить. Если речь идёт о внешнем виде компонента, всё просто: вы меняете его CSS-код, и он обновляется везде. Но как быть, если нужно переделать HTML-код сложного компонента? Сначала придётся внести правку в код на одной странице, а затем найти все подобные компоненты и провести аналогичные изменения с каждым.

Простой пример — страница с карточками товаров. Если вы вносите правку в одну карточку, то вам придётся исправлять и остальные — вручную. Просто удалить старые и скопировать новые с уже заполненными данными не получится.

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

Эти ситуации не катастрофичны, но приводят к следующим проблемам:

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

Уже всё знаете про шаблонизаторы и просто решили освежить знания?

Ответьте на 6 вопросов, чтобы узнать, насколько вы разбираетесь в шаблонизаторах.

Как шаблонизаторы помогают решать проблемы?

Рассказывать про работу шаблонизаторов будем на примере принципа их работы, без отсылки к конкретному инструменту.

Создание шаблонов

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

Рассмотрим это на условном, несуществующем синтаксисе.

Файл раскладки

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

Файл каталога и новостей

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

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

Создание компонентов

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

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

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

В качестве примера абстрактной реализации рассмотрим реализацию каталога.

В отдельном файле описываем саму карточку товара со всей структурой.

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

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

Работа с данными

Не может же быть так, чтобы при вставке девяти карточек проекта они все стали одинаковыми? Что делать, если мы хотим видеть разный контент в одинаковых компонентах?

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

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

При описании компонента мы говорим, что его контент не статичный, а берётся из объекта с данными, которые будут в него переданы.

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

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

Интерактивность

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

Условные выражения позволяют вам менять что-то внутри компонента в зависимости от данных внутри. Это делает компоненты более гибкими. Например, у вас есть компонент кнопки в трёх цветах. Вместо создания трёх отдельных компонентов изменение класса цвета можно сделать внутри одного, и он будет меняться в зависимости от условий.

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

Эти возможности позволяют писать код ещё быстрее и более гибко, избегая при этом лишних ошибок.

Какие шаблонизаторы бывают

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

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

Pug — написан на Node.js и компилирует строгий синтаксис в конечный HTML-файл. То есть он не работает на лету и по факту всё равно превращается в HTML. Его надо собирать через сборщик. Инструмент представляет собой довольно нестандартный синтаксис, который непривычен в начале, но быстро осваивается и даёт хороший профит.

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

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

Подготовка к работе с шаблонизаторами

Шаблонизаторы не выглядят сложным инструментом, но с ними всё не так просто.

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

Какие выводы можно сделать

Шаблонизаторы делают написание кода проще и избавляют разработчика от хранения в голове большого количества контекста. Это позволяет тратить силы на более полезные вещи.

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

Главное — использовать шаблонизаторы правильно, чтобы действительно оптимизировать работу.

Курс по шаблонизаторам HTML

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

Повышаем эффективность работы в Visual Studio. Создание Code Snippets для C# и HTML

В этом уроке мы разберемся как создавать code snippets под свои нужды, чтобы повысить эффективность своей работы.

Можно дать такое определение:

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

Все сниппеты можно найти через специальный менеджер, который находится в меню по адресу Tools > Code Snippets Manager. :

Через этот менеджер можно посмотреть список всех стандартных сниппетов для разных языков программирования, которые представлены в Visual Studio и которые можно использовать. Также можно добавить свой собственный сниппет, используя кнопку Import.

Создаем свой Code Snippet

Процесс создания сниппета состоит из нескольких этапов. Во-первых, обратимся к официальной документации по адресу: Walkthrough: Create a code snippet. Там наиболее полная информация обо всех аспектах в данном вопросе.

Далее создаем новый файл (можно прямо из Visual Studio) формата XML со следующей заготовкой:

Это простейшая заготовка, с которой можно начинать работу и расширить ее под свои нужды. Давайте это и сделаем. Например, я хочу создать сниппет, который будет служить следующей цели:
В ASP.NET MVC приложении в классе-контроллере довольно часто возникает задача через внедрение зависимостей (Dependency Injection) добавить в конструктор какой-нибудь функционал, чтобы он был доступен в пределах всего контроллера. Ну, например, контекст базы данных. Что-то типа такого:

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

Прокомментирую некоторые важные моменты:

. В значении для Language указываем тот язык, для которого создается сниппет. Важно! Что попало писать нельзя, весь список доступных языков представлен в официальной документации (ссылка выше). По указанному языку Visual Studio будет ориентироваться, где и в каком контексте в коде будет доступен данный сниппет.

После создания сниппета нам необходимо добавить его в общий список через Code Snippet Manager (кнопка Import. ):

Для удобства можно сохранять свои сниппеты в папке «My Code Snippets».

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

Если у вас установлен Resharper и в подсказке Intellisense не отображается новый сниппет (но при этом работает), это значит что вы используете схему Intellisense для Resharper. Но сниппет создавался вне зоны действия решарпера, и он об этом ничего не знает. Нужно либо в опциях поменять схему на Visual Studio, либо добавить правило для решарпера.

I can’t generate html body (template form) in vs code [closed]

Want to improve this question? Add details and clarify the problem by editing this post.

I searched about it and there is no solution for that. The main construction is pressing the Tab button while holding the exclamation mark. constructions for generating HTML body I tried to fix it with settings, different combinations, restaring. They didn’t work

3 Answers 3

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

I’m assuming that you want the basic HTML body in VS code. Write «html:5» and then press «tab».

Please mark this as an answer if this helped you.

The problem is I was doing right. In the right bottom corner there is a language detector which was set to auto detecting. I needed to change that and Voila!

Try typing exclamation mark (!) and see if a popup like this appears:

34 полезных расширения VS Code, которые упростят работу разработчика

Фронтенд-разработчик, UX/UI-дизайнер Савио Мартин опубликовал в блоге на dev.to 34 расширения Visual Studio Code (VS Code) для повышения продуктивности.

«Купи мне истребитель». Сбор средств для Воздушных Сил ВСУ

1. Auto Rename Tag. Автоматически переименовывает парный тег «HTML/XML» так же, как Visual Studio IDE.

2. Better Comments. Помогает создавать в коде более понятные комментарии. Расширение позволяет разбивать аннотации на следующие категории:

3. Bootstrap 4, Font Awesome 4, Font Awesome 5 Free & Pro Snippets. Плагин кода Visual Studio, содержащий фрагменты кода Bootstrap 4, Font Awesome 4, Font Awesome 5 Free и Pro Snippets. Плагин работает как в стабильной, так и в инсайдерской сборке.

4. Bracket Pair Colorizer 2. Позволяет идентифицировать совпадающие скобки по цвету. Пользователь может определить, какие токены должны соответствовать и какие цвета использовать.

5. change-case. Позволяет быстро изменить регистр текущего выделенного текста или слова.

6. Code Runner. Запускает фрагмент или файл кода для нескольких языков (полный список доступен здесь ) и пользовательские команды.

7. Code Spell Checker. Цель расширения — проверка распространенных ошибок и уменьшение количества ложных срабатываний. Хорошо работает со стилем написания составных слов CamelCase (верблюжий регистр).

8. CSS Peek. Разрешает просмотр идентификаторов CSS и строк классов как определений из HTML-файлов в соответствующий CSS-файл. Позволяет просматривать и переходить к определению.

10. EJS language support. Подсветка синтаксиса для тегов EJS, JavaScript и HTML. Включает автозаполнение javascript.

11. ES7 React/Redux/GraphQL/React-Native snippets. Расширение для React, Redux и GraphQL в JavaScript/TypeScript с синтаксисом ES7 и функциями плагина Babel для VS Code.

12. GitHub Pull Request and Issue. Позволяет просматривать и управлять запросами на вытягивание GitHub и проблемами в Visual Studio Code.

13. GitLens — Git supercharged. Расширяет возможности Git, встроенные в VS Code. Среди функций:

14. Google Fonts. Расширение позволяет просматривать список шрифтов Google и вставлять их в HTML или CSS код.

15. Image Preview. Расширение для предварительного просмотр изображений при наведении курсора.

16. GraphQL. Добавляет подсветку синтаксиса, его проверку и языковые функции, такие как:

18. Prettify JSON. Расширение Prettify JSON для Visual Studio Code.

21. JavaScript (ES6) code snippets. Расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора VS CODE. Поддерживает как JavaScript, так и TypeScript.

22. Live Server. Запускает локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц.

23. Live Share. Расширение для совместной разработки, редактирования и отладки в режиме реального времени. Позволяет мгновенно и безопасно делиться проектами. Разработчики, которые подключаются к сеансам, получают необходимые файлы по текущему проекту и могут начать работу без необходимости клонирования репозиториев или SDK.

25. Mongo Snippets for Node-js. Расширение для проектов Node-js. Содержит:

27. npm Intellisense. Плагин Visual Studio Code, который автоматически заполняет модули nmp в операторах импорта.

28. Placeholder Images. Расширение позволяет создавать и вставлять так называемые изображения-заполнители в HTML-код в VS Code с помощью сторонних сервисов, таких как Unsplash, placehold.it и LoremFlickr.

29. Polacode. Позволяет делать скриншоты кода с пользовательскими шрифтами и темами.

30. Prettier — Code formatter. Средство для форматирования кода. Нацелено на использование жестко заданных правил по оформлению программ. Обеспечивает согласованный стиль, анализируя код и повторно воспроизводя его с особыми правилами, которые принимают во внимание максимальную длину строки.

31. Tabnine Autocomplete. Помощник на основе искусственного интеллекта (ИИ). Помогает кодировать быстрее и уменьшить количество ошибок. Изучает общедоступный код и использует алгоритмы глубокого обучения ИИ.

32. Tailwind CSS IntelliSense. Расширяет возможности разработки Tailwind, предоставляя пользователям VS Code больше функций, например, автозаполнение, выделение синтаксиса и линтинг (процесс проверки исходного кода на программные и стилистические ошибки).

33. Luna Paint. Позволяет редактировать растровые изображения из VS Code.

Is there a way to make VS Code create HTML file by default?

2 Answers 2

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In VS Code, my separate folders for different HTML projects are stored under an UNTITLED (WORKSPACE).

For a new HTML file, I simply right-click on any folder in (WORKSPACE), select New File and then name that file with an HTML extension. The file is completely empty with no HTML whatsoever. Then, because the Emmet plugin is built into VS Code, I simply type an ! (exclamation point) and press TAB or ENTER and the empty file is filed with a complete HTML5 boilerplate.

5 simple steps to create an HTML file in Visual Studio Code

As far as I can see, there is no way to configure VS Code to do this out of the box so I wrote an extension to do it. You can download that extension from the marketplace.

It adds two types of commands:

So to set up one command to open new html files and another to open markdown files, you can add settings like this:

Using these settings you would then press «ctrl+shift+t» then «0» to open a new file with the same language as whatever file you have active, «ctrl+shift+t» then «1» to open a new file with «markdown» as the language mode, and «ctrl+shift+t» then «2» to open a new file with «html» as the language mode. Of course, you can customize the keybindings however you want and set the languages to whatever you want.

cantonios/vscode-project-templates

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Project Templates VSCode Extension

Visual Studio code extension that allows you to quickly create new projects based on custom templates.

This extension contributes the following settings:

See CHANGELOG for release notes.

Extension commands can be executed from the Command Palette or from the context menu when selecting a folder.

Creating a Project from a Template

Saving a Project as a Template

Variable placeholders can be used in templates in the following way:

When a file is created from a template containing placeholders, the user is prompted for a value to enter. Placeholders can also be used in filenames.

By default, this extension expects the project templates to be placed within the user’s data directory for VSCode, which is OS-specific. For the non-portable version of VSCode, this is typically

You can change the templates location by adding the following to your user or workspace settings:

A set of sample templates can be found here

Шаблоны поддержки веб-сайтов

Шаблоны проектов и элементов веб-сайта Visual Studio обеспечивают многократное использование и настраиваемые заглушки веб-сайта и элементов, которые ускоряют процесс разработки, удаляя необходимость создания новых проектов и элементов веб-сайта с нуля. Дополнительные сведения о шаблонах Visual Studio см. в статье «Создание шаблонов проектов и элементов».

Папка шаблона проекта

Шаблоны веб-проектов обычно устанавливаются на [путь установки Visual Studio]\Common7\IDE\ProjectTemplates\Web\, каждый из которых находится во вложенной папке, которая называется языком веб-программирования.

Файл проекта

Интегрированной среде разработки Visual Studio (IDE) требуется расширение файла проекта в качестве способа сопоставления шаблона с правильным типом проекта. Так как у веб-проектов нет файла проекта, расширение WEBPROJ-файла фиктивного проекта регистрируется для сопоставления шаблона с типом проекта.

При необходимости в шаблон можно добавить строку имени языка, чтобы включить систему веб-проектов, чтобы задать язык по умолчанию в диалоговом окне «Добавление нового элемента » для элементов на основе шаблона. Строка должна быть первой строкой файла. Оно должно совпадать как с именем, зарегистрированным в AddItemLanguageName в регистрации обработчика IntelliSense, так и именем, зарегистрированным в разделе Project Subtype(VsTemplate). Дополнительные сведения см. в разделе «Атрибуты поддержки веб-сайтов».

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

Шаблоны проектов

Шаблоны проектов веб-сайтов используются для создания новых веб-сайтов в ответ на команду «Создать веб-сайт » в меню «Файл «. В настоящее время поддерживаются три типа проектов веб-сайта:

Пустые проекты веб-сайта

Эти файлы создают пустой веб-сайт в ответ на команду «Пустой веб-сайт«, которая доступна после выборанового веб-сайта:>

Файл шаблона, который управляет созданием нового пустого веб-сайта.

Этот файл является артефактом системы шаблонов проекта. Он удовлетворяет ссылке на файл проекта в файле EmptyWeb.vstemplate.

Проекты веб-сайта

Домашняя страница по умолчанию для нового веб-сайта. Атрибут Language задает язык кода программной части, а атрибут CodeFile указывает зависимый файл, содержащий код программной части, связанный с этой страницей.

Зависимый файл, содержащий код программной части домашней страницы по умолчанию. Язык кода программной части определяет расширение этого файла.

Корневой файл конфигурации web.site.

Файл шаблона, который определяет содержимое решения веб-сайта и принудительно создает папку App_Data.

Этот файл является артефактом системы шаблонов проекта. Он удовлетворяет ссылке на файл проекта в файле WebApplication.vstemplate.

Проекты веб-служб

HTML-страница для новой веб-службы. Атрибут Language указывает язык кода, а атрибут CodeBehind указывает зависимый файл, содержащий код программной части, связанный с этой службой.

Зависимый файл, реализующий класс службы. Язык кода программной части определяет расширение этого файла.

Корневой файл конфигурации web.site.

Файл шаблона, который определяет содержимое решения веб-сайта и принудительно создает папки App_Data и App_Code. Служба. Файл расширения копируется в папку App_Code.

Этот файл является артефактом системы шаблонов проекта. Он удовлетворяет ссылке на файл проекта в файле WebService.vstemplate.

Папка шаблона элемента проекта

Шаблоны веб-элементов проекта обычно устанавливаются в папке [Путь установки Visual Studio]\Common7\IDE\ItemTemplates\Web\, каждая из которых называется вложенной папке, которая называется языком веб-программирования.

Шаблоны элементов проекта

Шаблоны элементов проекта веб-сайта используются для добавления новых веб-страниц на веб-сайт в ответ на команду «Добавить существующий элемент «. В настоящее время поддерживаются следующие типы веб-страниц:

Новая эталонная страница

Новый класс

Исходный файл, реализующий пустой класс. Язык кода программной части определяет расширение этого файла.

Файл шаблона, создающий исходный файл и определяющий его содержимое.

Новая HTML-страница

Этот шаблон создает новую веб-страницу в ответ на команду «Добавить новую HTML-страницу «.

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

Файл шаблона, создающий веб-страницу и определяющий его содержимое.

Новая веб-форма

Этот шаблон создает новую смарт-веб-страницу в ответ на команду «Добавить новую веб-форму «.

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

Чтобы создать страницу содержимого для выбранной главной страницы, выберите » Выбрать главную страницу«.

Начальная страница веб-страницы. Эта веб-страница не связана с зависимым файлом кода.

Начальная страница веб-страницы. На этой веб-странице есть связанный зависимый файл кода.

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

Начальное содержимое веб-страницы в качестве страницы содержимого. Эта веб-страница не связана с зависимым файлом кода.

Начальное содержимое веб-страницы в качестве страницы содержимого. На этой веб-странице есть связанный зависимый файл кода.

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

Новая эталонная страница

Этот шаблон создает новую главную страницу в ответ на команду «Добавить новую главную страницу «.

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

Начальная содержимое главной страницы. Эта эталонная страница не связана с зависимым файлом кода.

Начальная содержимое главной страницы. На этой главной странице есть связанный зависимый файл кода.

Зависимый файл, реализующий класс главной страницы. Язык кода программной части определяет расширение этого файла.

Файл шаблона, определяющий содержимое новой главной страницы и его зависимый файл( при наличии).

Ненужные расширения для VS Code

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

Здесь речь пойдёт о шести сферах применения расширений, в которых эти расширения могут быть заменены стандартными механизмами VS Code.

1. Автоматическое переименование и закрытие тегов

Речь идёт о двух возможностях. Во-первых — это возможность одновременного переименования открывающих и закрывающих тегов. Во-вторых — возможность автоматического закрытия тегов.

Автоматическое переименование открывающего и закрывающего тегов

▍Расширения

▍Возможности VS Code

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

Для включения этой возможности надо добавить следующее в settings.json :

Пока поддерживаются только HTML-файлы, но в трекере проекта есть открытая задача, касающаяся поддержки JSX-файлов.

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

2. Синхронизация настроек

Теперь VS Code поддерживает синхронизацию настроек между разными компьютерами. Эта возможность доступна, начиная с предварительной версии VS Code 1.48 (июльский релиз 2020 года).

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

▍Расширение

▍Возможности VS Code

Об этих возможностях можно почитать в документации к VS Code. Ниже показаны страницы с соответствующими настройками.

Для синхронизации можно пользоваться учётными записями Microsoft или GitHub, можно указывать то, что необходимо синхронизировать.

Выбор объектов, которые нужно синхронизировать

3. Управление импортом модулей

Управление импортом JavaScript- и TypeScript-модулей может представлять собой непростую задачу, особенно в том случае, если нужно реорганизовать проект или отрефакторить код. Разработчики стремятся, по возможности, это автоматизировать.

▍Расширения

▍Возможности VS Code

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

Её использование приводит к удалению неиспользуемых инструкций импорта и к размещению команд импорта таким образом, чтобы сначала шли бы команды, в которых используются абсолютные пути. Я — большой любитель таких механизмов, о которых можно попросту забыть, однажды настроив их.

4. HTML- и CSS-сниппеты

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

▍Расширения

▍Возможности VS Code

Добавление шаблонного HTML-кода в файл

Emmet поддерживает и сокращения, позволяющие вставлять в документы группы элементов. Их устройство напоминает CSS-селекторы.

Например, введём в HTML-файле такую конструкцию:

Это — лишь очень краткий рассказ о возможностях Emmet в сфере HTML. VS Code предлагает похожие возможности и для CSS. Среди этих возможностей мне больше всего нравится автоматическое добавление префиксов производителей браузеров. Подробности об Emmet вы можете найти в документации к этому набору инструментов. Кроме того, вам может пригодиться эта шпаргалка по Emmet.

Emmet поддерживает не только обычные HTML и CSS. Например, чтобы пользоваться Emmet при создании Vue-приложений и при написании JavaScript-кода, в settings.json нужно добавить следующее:

Если вы хотите включить поддержку Emmet для markdown, то вам следует знать об одной особенности (или, скорее, об ошибке). Она заключается в том, что для этого вам нужно, чтобы в emmet.excludeLanguages был бы записан пустой массив:

Обсуждение этого можно найти здесь.

5. Шаблонный текст

Возможно, вам, в ходе работы над страницей, понадобится заполнить её шаблонным текстом. Делают это обычно для того чтобы оценить внешний вид страницы, на которой имеется какое-то содержимое. В роли такого текста часто используется знаменитый «Lorem ipsum». Существуют расширения, позволяющие генерировать подобный текст, но соответствующие возможности есть и в VS Code.

▍Расширение

▍Возможности VS Code

Ввод сокращения lorem

Это сокращение можно использовать не только при создании одного абзаца текста, но и, например, для генерирования нескольких блоков каких-то элементов. Скажем, конструкция p*2>lorem приведёт к созданию двух элементов

, заполненных шаблонным текстом:

6. Автоматическое удаление хвостовых пробелов

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

▍Расширения

▍Возможности VS Code

Итоги

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

Стремитесь ли вы всегда, когда это возможно, пользоваться стандартными возможностями VS Code, а не расширениями?

ТОП-10 плагинов VS Сode для верстки

1. Live Server

2. Sass

Этот плагин помогает комфортно писать код с использованием препроцессоров, подсвечивая синтаксис Sass/Scss, автоматически расставляя отступы и давая нужные подсказки.

3. Live Sass Compiler

Live Sass Compiler является логическим продолжением плагина Sass. Для компиляции Sass кода больше не нужно переключаться на сторонние онлайн-компиляторы. Вы просто пишите код на Sass/Scss, а за кулисами происходит автоматическая компиляция Sass кода в готовые CSS файлы. При совместном использовании Live Server + Live Sass Compiler, можно в реальном времени сразу видеть в браузере готовый результат верстки.

4. All Autocomplete

Как работает плагин All Autocomplete? Вы начинаете писать код и сразу появляются всплывающие подсказки. Выбираете нужный вам вариант из предлагаемых подсказок и нажимаете ENTER. Это здорово помогает избежать глупых ошибок (опечаток). Даже когда вы работаете в нескольких открытых вкладках, например присвоили элементу класс, то начиная прописывать название этого класса в CSS коде, вам уже дается подсказка. Таким образом вероятность ошибки минимизируется, сколько же нервов мне стоили такие тупые ошибки в свое время.

5. Bootstrap v4 Snippets

Вставляет готовые кусочки кода (сниппеты) из Bootstrap. Например вы хотите использовать в своем проекте какой-нибудь Bootstrap компонент, установив плагин со сниппетами, больше не надо идти на сайт getbootstrap.com, открывать документацию и копировать оттуда код. Вы можете нужный код развернуть прямо из редактора, введя несколько символов.

Допустим вам нужно взять код карточки товаров из готовых компонентов Bootstrap и вставить в проект. Для этого набираете в редакторе ключевые символы b-c, выбираете в всплывающем окне нужный класс и плагин моментом развернет код карточки.

6. Jquery Code Snippets

Подставим в развернутом коде вместо selector и content, нужные нам значения.

7. WordPress Snippet

8. Polacode

Данный плагин умеет делать красивые скриншоты кода. Через комбинацию клавиш CTRL+SHIFT+P вызываем палитру команд, выбираем в списке Polacode, выделяете нужный кусок кода, сохраняете его и сразу можно им поделиться на веб мастерских форумах, чатах или на своем блоге.

9. Autoprefixer

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

header <
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
>

10. SFTP

Данное расширение позволяет больше не устанавливать специальную FTP программу, теперь работать с файлами на сервере можно не покидая редактора VS Code. После выбора в палитре команд SFTP config (CTRL+SHIFT+P), в проводнике появится файл sftp.json, где вы пропишите данные вашего сервера (предоставляются хостером) для соединения по FTP.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Пользовательские шаблоны и расширения для Visual Studio под проект (Часть 1: шаблоны элементов)

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

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

А что с общим функционалом? Если нам, например, нужно вынести общий функционал, который используется для ряда микросервисов, мы выносим его в Nuget. Очень удобно, кстати, создал новый микросервис, подсмотрел в соседнем инфраструктуру, склонировал, подцепил общие нагет пакеты, включил все это в построителе приложения. Раз плюнуть! Или два раза плюнуть? Или три? Хмм. Очень удобно, когда перечисленные процедуры приходится выполнять изо дня в день, рука набита и вообще это делает специально обученный человек, который больше ничем не занимается. На практике же приходится лезть в документацию и читать рекомендации, которые могут быть устаревшими на момент их использования. Начинаешь опрашивать членов команды, кто что помнит, собирать информацию по кусочкам. И в итоге на простую шаблонную инициализацию тратишь полдня или даже целый день. 8 ч/ч в рамках 1-3 годового проекта с командой из 5-10 человек это не так уж и много, но немного выбивает из колеи. Меня. А вас?

А как на счет вот такого контроллера?

Ну это легко. Мы просто создаем класс по шаблону, добавляем модификатор public (если это просто стоковый дотнетовский шаблон, решарперовский шаблон класса сразу создает public), добавляем базовый класс, дальше стандартными студийными средствами или средствами решарпера реализуем базовый класс, который сразу создает конструктор и реализует абстрактные члены. Кстати, все абстрактные члены будут по умолчанию либо пустыми либо выбрасывать NotImplementedException, в зависимости от ваших настроек.

Не то что бы это очень сложно, но все же. Это те рутинные вещи, которые нам приходится делать регулярно. А что инженеры обычно делают с рутинными вещами? Автоматизируют. Но как? Вынести в нагет мы эту рутину не можем. Зато, мы можем создавать собственные шаблоны классов, проектов и даже группы проектов.

Шаблоны классов

Итак, предположим, что у нас есть такой вот базовый контроллер

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

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

Здесь, кстати, вместо просто throw new System.NotImplementedException(); мы можем написать рекомендации и подсказки по реализации данного метода.

Далее в студии мы щелкаем по пункту меню Проект и выбираем пункт Экспорт шаблона.

Попадаем в это окно:

Выбираем пункт Шаблон элемента выбираем проект, в котором наша заготовка для шаблона (по умолчанию выбран проект, который выделен в обозревателе решений) и нажимаем Далее. Затем выбираем файл, в котором наша заготовка для шаблона, снова жмем Далее, следующий пункт пропускаем (если надо, можем это потом обсудить подробнее), снова жмем далее и попадаем в окно настройки шаблона:

Теперь, если мы в каком либо проекте решим создать элемент, мы сможем увидеть там наш шаблон.

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

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

Теперь немного о том, как внести правки в существующий шаблон.

Редактирование шаблона элемента

Для начала откроем cs.

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

С полным списком переменных можно ознакомиться здесь.

Теперь посмотрим что внутри vstemplate файла

Здесь формат XML. Давайте разберемся в тегах.

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

C:\Users\[user_name]\Documents\Visual Studio 2019\Templates\ItemTemplates

Там лежит копия архива с шаблоном, который вы видели ранее. Прямо в корне. Вот в нем и заменим наш файл.

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

Как видим, описание изменилось. Теперь еще один штрих. Мне не очень то хочется, чтобы наш шаблон светился в общей куче шаблонов. Поэтому я вырежу его из корневой папки шаблонов, зайду в папку Visual C#, создам там папку MyProject и вставлю файл туда. Вновь перезапустим студию и откроем диалог создания элемента.

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

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

Заключение

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

В следующих статьях (если зайдет эта), я расскажу:

Самые полезные плагины и красивейшие темы для VS Code

Visual Studio Code от Microsoft является очень легким, но при этом достаточно мощным и удобным инструментом для редактирования кода. Несмотря на его обширный встроенный функционал, он легко дополняется как сторонними, так и официальными плагинами.

Встречайте – подборка лучших плагинов, а также красивых и лаконичных тем оформления для VS Code!

Live Server

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

Polacode

Данный плагин подойдет тем, кто любит красиво оформлять свои репозитории в GitHub’е (либо делать красивые скриншоты кода, чтобы отсылать его потом друзьям). Всего в пару кликов вы можете поместить выделенный участок кода в красиво оформленную рамочку в стиле скриншотов с macOS, а также настроить эту рамочку и сохранить получившийся результат картинкой. Кстати, если у вас стоит какая-нибудь тема, то данный плагин сохранит цвет фона и подсветку синтаксиса для участка кода на самом скриншоте. Одним словом – очень полезный плагин.

P.S. У официальной версии плагина имеются проблемы с работоспособностью на свежих версиях VS Code, ниже прикреплена ссылка на рабочую версию уже от другого автора с добавленной настройкой получающихся скриншотов.

Prettier

Форматирование кода. Если данное словосочетание рождает в вашей голове ужасные ассоциации и гневные воспоминания, то данный плагин, скорее всего, станет для вас находкой даже похлеще, чем Америка для Христофора Колумба. Очень рекомендуется для использования в работе с коллегами, чтобы на споры по поводу стиля кода уходило намного меньше времени (его можно потратить на более полезные занятия).

Всего-то и нужно, что установить сам плагин. Вуаля – можете писать код, как вам заблагорассудится, а Prettier отбросит вопрос форматирования кода в дальний ящик, сделав все за вас по своему код-стайлу.

Quokka.js

Устали при написании кода каждый раз запускать его, чтобы проверить работоспособность какого-то участка? Данный плагин решит вашу проблему, ведь он отображает результат выполнения кода прямо в самом редакторе кода. Удобно ведь, да? А сколько времени экономит, убирая нужду в постоянном запуске кода после каждой правки!

Скачать плагин можно на этой странице.

Rest client

При работе с различными API, чтобы не тыкать пальцем в небо, вы, наверное, используете различные сторонние программы для отправки HTTP-запросов, вроде Postman, да? Забудьте про все это, ведь данный плагин позволяет вам отправлять HTTP-запросы и просматривать ответы на них прямо в окне VS Code, отбрасывая нужду в переключении между окнами и задействовании иных программ, кроме самого редактора.

Auto Rename Tag

И снова полезный плагин для верстальщиков. При редактировании HTML/XML-тегов в начале он автоматически редактирует их и в конце. Простой плагин, но как сильно сокращает количество рутинных действий в работе. Как говорится, мелочь, а приятно!

TODO Highlight

Очень любите помечать участки кода тегами TODO и FIXME, но затем забываете о том, что нужно что-то починить или переделать? Данный плагин решит вашу проблему и будет выделять в коде фразы TODO или FIXME. А если таковыми вы ничего не помечаете, то вам не составит труда вставить туда и свои любимые теги, плагин будет и их выделять.

Страница в магазине расширений VS Code.

Faker

Предположим, у вас есть участок кода, который работает с данными из базы данных, но вам нужны просто случайно сгенерированные данные, а не взятые из БД. На помощь вам придет Faker, а точнее, сделанный на его основе плагин для VS Code. Достаточно при заполнении полей лишь вызвать соответствующую категорию данных – в нужное поле впишется случайно сгенерированное значение. Категории бывают разные, начиная с имен и заканчивая ссылкой на случайное фото.

Ознакомиться с возможностями инструмента можно на данной странице.

Bookmarks

Данный плагин упрощает перемещение в огромном пространстве кода, оставляя «книжные » закладки на определенных строчках. В общем, название плагина говорит само за себя.

Image Preview

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

Бонус: лучшие темы для Visual Studio Code

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

На этом мой топ подходит к концу. Надеюсь, что разработка в Visual Studio Code теперь будет приносить вам намного больше удовольствия. Удачи!

VS Code shortcuts and tricks that I wish I knew sooner

After teaching myself for a year I started coding full time when I joined the Founders and Coders web development bootcamp in March 2020. Two weeks into the course we went into lockdown in the UK and our cohort had to go remote for the remaining 16 weeks. Thanks to the collaborative power of the VS Code Live Share extension we were still able to pair program and go through the syllabus as planned, but one of the things we missed out on from not being in person was organically sharing the little tips and tricks that you would normally pick up from working next to each other.

You can watch someone demonstrate something while sharing their screen, but unless you see them typing on the keyboard you don’t necessarily pick up on the key presses that could also save you seconds of your day! As a result there are a lot of nifty VS Code tricks that I have learned since starting my first role as a Full Stack Developer that I wish I had know during the course.

I compiled these into a talk for the next Founders and Coders cohort, entitled «Why The F*** Didn’t I Know This Sooner?!», and I also wanted to share them here for those starting out on their own coding journeys.

VS Code shortcuts

HTML boilerplates

Exit fullscreen mode

A lot of my frequently used HTML tags are missing from this boilerplate so I have configured my own.

To do this you need to navigate to Code > Preferences > User Snippets and search for ‘html.json’. Then you add your custom snippets into this file.

I would recommend writing out the desired structure into an HTML file first, and then you can copy it into a tool like this to parse your HTML file into a JSON string with escaped characters to get the right indentation.

My html.json file looks like this:

Exit fullscreen mode

HTML abbreviations

Sometimes you can spend longer learning to type out shortcuts than if you just manually typed the code. I personally don’t find Emmet abbreviations a time saver for writing CSS, but some of the HTML abbreviations I find useful include:

Nested elements

The shortcut nav>ul>li creates:

Exit fullscreen mode

Multiple elements

The shortcut li*5 creates:

Exit fullscreen mode

Tags with text

The shortcut a creates:

Exit fullscreen mode

Elements with multiple classes

The shortcut div.first-class.second-class creates:

Exit fullscreen mode

Elements with IDs

The shortcut div#main creates:

Exit fullscreen mode

A full list of shortcuts for can be found on the Emmet Docs Cheat Sheet.

VS Code Source Control Tab

Using VS Code’s built in Source Control feature, you can stage your files and write commit messages with the VS Code UI, rather than using the terminal.

What I like about this is:

Useful VS Code extensions

Bracket Pair Colorizer 2

This extension colorizes matching opening and closing brackets in your code so you can scope your functions and statements at a glance.

Edit: This article originally linked to Bracket Pair Colorizer v1, thank you to @indcoder for pointing out in the comments that there is a v2 out there which is faster and more accurate!

Relative File path

This extension gives you a shortcut for getting the relative filepath of another file from your current file. This is really helpful in a large codebase with lots of nested folders where you have a lot of imports and exports between files, for instance in a React.js project.

Search for the file you want the relative path for:

The relative path will appear:

GitLens

This extension is Git supercharged for your editor with loads of features that I don’t yet know how to use.

What I do use it for is the Git blame feature, which annotates the most recent commit history for each line in your files. This is especially useful when working on a group project so you can see at a glance when the last changes were made, who made them, and the relevant commit message.

Prettier

Prettier is a lifesaver because it automatically formats your code! You can download it as an extension on VS Code, and it will run your settings that you configure in the application (go to Settings and search for ‘Prettier’).

To format your current file, right click and select Format Document, or to turn on automatic formatting when you save your files go to Settings and search for ‘format on save’ and tick the checkbox.

I use this Prettier Config Generator to generate the JSON for the file, and the Prettier docs explain more about what each of the format options mean.

Exit fullscreen mode

Into this, with consistent spacing, an average line width of roughly 80 characters, 2 spaces for indentation and not tabs, semicolons printed at the end of every statement, and double quotes instead of single quotes:

This is just an example to demonstrate the formatting changes Prettier applies, and is not a recommendation of code style. Most of the time you won’t have to play around with the settings too much and you can go with the basic config to keep your codebase consistent, or when you start working as a developer your company will already have a «house style».

Color Themes

Color themes let you modify the colors in Visual Studio Code’s user interface to suit your preferences and work environment.

Selecting the Color Theme

The active color theme is stored in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+, ) ).

Tip: By default, the theme is stored in your user settings and applies globally to all workspaces. You can also configure a workspace specific theme. To do so, set a theme in the Workspace settings.

Color Themes from the Marketplace

There are several out-of-the-box color themes in VS Code for you to try.

Many more themes have been uploaded to the VS Code Extension Marketplace by the community. If you find one you want to use, install it and restart VS Code and the new theme will be available.

You can search for themes in the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) search box using the @category:»themes» filter.

Auto switch based on OS color scheme

To customize the themes that are used when a color scheme changes, you can set the preferred light, dark, and high contrast themes with the settings:

Customizing a Color Theme

Workbench colors

You can customize your active color theme with the workbench.colorCustomizations and editor.tokenColorCustomizations user settings.

You can use IntelliSense while setting workbench.colorCustomizations values or, for a list of all customizable colors, see the Theme Color Reference.

To customize a specific theme only, use the following syntax:

If a customization applies to more than one themes, you can name multiple themes or use * as wildcard at the beginning and the end of the name:

Editor syntax highlighting

To tune the editor’s syntax highlighting colors, use editor.tokenColorCustomizations in your user settings settings.json file:

Note: Directly configuring TextMate rules is an advanced skill as you need to understand on how TextMate grammars work. Go to the Color Theme guide for more information.

Again, to customize specific themes, you can do this in one of the following ways:

Editor semantic highlighting

Some languages (currently: TypeScript, JavaScript, Java) provide semantic tokens. Semantic tokens are based on the language service’s symbol understanding and are more accurate than the syntax tokens coming from the TextMate grammars that are driven by regular expressions. The semantic highlighting that is computed from the semantic tokens goes on top of syntax highlighting and can correct and enrich the highlighting as seen in the following example:

The «Tomorrow Night Blue» color theme without semantic highlighting:

The «Tomorrow Night Blue» color theme with semantic highlighting:

Notice the color differences based on language service symbol understanding:

Users can override the theme setting by:

When semantic highlighting is enabled and available for a language, it is up to the theme to configure whether and how semantic tokens are colored. Some semantic tokens are standardized and map to well-established TextMate scopes. If the theme has a coloring rule for these TextMate scopes, the semantic token will be rendered with that color, without the need for any additional coloring rules.

Additional styling rules can be configured by the user in editor.semanticTokenColorCustomizations» :

To see what semantic tokens are computed and how they are styled, users can use the scope inspector (Developer: Inspect Editor Tokens and Scopes), which displays information for the text at the current cursor position.

More information on semantic tokens and styling rule syntax can be found in the Semantic Highlighting Guide.

Creating your own Color Theme

Creating and publishing a theme extension is easy. Customize your colors in your user settings then generate a theme definition file with the Developer: Generate Color Theme From Current Settings command.

VS Code’s Yeoman extension generator will help you generate the rest of the extension.

See the Create a new Color Theme topic in our Extension API section to learn more.

Remove default Color Themes

You can disable a built-in theme extension as you would any other VS Code extension with the Disable command on the gear context menu.

File Icon Themes

File icon themes can be contributed by extensions and selected by users as their favorite set of file icons. File icons are shown in the File Explorer and tabbed headings.

Selecting the File Icon Theme

By default, the Seti file icon set is used and those are the icons you see in the File Explorer. Once a file icon theme is selected, the selected theme will be remembered and appear again whenever VS Code is restarted. You can disable file icons by selecting None.

VS code ships with two file icon themes; Minimal and Seti. To install more file icon themes, select the Install Additional File Icon Themes item in the file icon theme picker and you’ll see a query for file icon themes (tag:icon-theme) in the Extensions view.

You can also browse the VS Code Marketplace site directly to find available themes.

The active File Icon theme is persisted in your user settings (keyboard shortcut ⌘, (Windows, Linux Ctrl+, ) ).

Creating your own File Icon Theme

You can create your own File Icon Theme from icons (preferably SVG), see the File Icon Theme topic in our Extension API section for details.

Next steps

Themes are just one way to customize VS Code. If you’d like to learn more about VS Code customization and extensibility, try these topics:

Веб-компоненты. Часть 3: html шаблоны и импорты

Вступление

Приветствую коллеги. Данная статья является третьей и последней статьей в серии статей о веб-компонентах.Первые две статьи доступны по ссылкам:

В данной статье речь пойдет о элементе а также об HTML импортах.

HTML Templates элемент

Элемент представляет собой инструмент, позволяющий хранить контент на стороне клиента без его рендеринга на страницу, однако с возможностью его отображения в процессе исполнения посредством JavaScript.

Содержимое элемента при парсинге страницы обрабатывается исключительно в части валидации содержимого, но без его рендеринга (согласно спецификации, при рендеринге этот элемент ничего не представляет). Содержимое элемента можно клонировать и вставлять в документ из скриптов, что и используется как самостоятельно для шаблонизации так и при создании веб-компонентов.

Содержимое

однако, вне элемента такой синтаксис валидным не является. При этом пропуск закрывающего тега

Все элементы указанные внутри тега в html коде не являются его дочерними элементами.

Бразуеры при создании элемента создают DocumentFragment чьим документом является т.н. approptiate template contents owner document, определяемый по этому алгоритму, документа в котором указан и указывает значением свойства .content созданный DocumentFragment.

То есть свойство .content у элемента template содержит DocumentFragment, и элементы, которые в html коде были указаны внутри тегов являются дочерними элементами именно этого DocumentFragment.

Клонирование шаблона

Show me the code ©

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

В конструкторе каждого класса я сохраню свойство template. Для TabNavigationItem это будет:

a для TabContentItem:

Получившийся код можно посмотреть тут

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

HTML импорты

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

Общая схема видна на изображении:

Для того чтобы реализовать импорты был добавлен новый тип в HTML link types (значения атрибута rel).

Расширения, предлагаемые черновиком спецификации предлагаются в АПИ HTMLLinkElement: добавляется свойство import, доступное только для чтения и содержащее импортируемый документ.

В спецификации отдельно указано что один и тот же объект должен будет возвращаться всегда.

В контексте импортов, есть так называемый мастер-документ (master document), которым является тот документ, который импортирует ресурсы одновременно не являясь при этом чьим либо импортируемым ресурсом.

ContentSecurityPolicy такого документа должна ограничивать все импорты. Так, если Content Security Header Field поставлен в значение импорта, браузер должен принудительно исполнять политику именно мастер-документа к импортируемому документу.

На практике

Для компонента таб, я создаю папку templates. В ней я создам два файла, в которые я перенесу разметку компоненты.

В файла index.html я импортирую шаблоны:

Финальную версию можно взять тут.

О поддержке

Поддержка HTML templates: Edge c 16, Firefox c 59, Chrome c 49, Safari c 11.
С поддержкой импортов печальнее: Chrome c 49.
Потому примеры из этой статьи можно посмотреть только в последних Chrome.

Почтитать подробнее о шаблонах и импортах:

На этом все, спасибо за внимание,
Таня

How can I create templates for file extensions in Visual Studio Code?

In my Vue.js projects almost all the times I need this code snippet as a template.

Is there a way to tell Visual Studio Code each and every time I create a file with the extension .vue to automatically add that snippet to the file?

Simply, when I create new file with a certain extension, the predefined template for that extension should automatically be added to the file.

3 Answers 3

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

There isn’t, not natively. But there is an extension called File Templates for VSCode that allows you to create your own file templates and generate from them. But I think you’d benefit from making an extension to do just that and maybe even more.

In the meantime, you can use a snippet to generate this instead of having to copy paste.

Go to File > Preferences > User Snippets and choose Vue from the dropdown. Vue will only show up if you have installed an extension that supports this file type. In this case, I’d recommend Vetur, but you probably have it already.

Then just add this entry to your vue.json file:

Of course, you can also use a Snippet Generator to make your own snippets.

The extension Auto Snippet does exactly that.

You only need to configure two things:

Recommendation

The author has some very custom defaults, so as soon as you install it, modify its settings and remove those patterns that you won’t need.

Otherwise, it will complain every time you create a file and doesn’t find the snippet configured.

This is being worked on now and is built-in to vscode v1.70 Insiders and may be in Stable v1.70 early August, 2022.

1. Make sure you haven’t disabled this setting by setting it to hidden :

2. Make some snippets that will serve as templates for whatever languages you are interested in in a snippets file (here they are in a global snippets file):

The isFileTemplate option is key here. Any snippet with this option will appear in the following workflows.

If you have the «scope»: «someLangID here» set in the keybinding then vscode can and will automatically change the current editor’s language to that language ID.

3. Create a new file:

a. with the command File: New Untitled File Ctrl + N

Then you will see the message at the top of the file as in this demo:

Clicking on that will show any snippets with that «isFileTemplate»: true, set. Choosing one from the resulting QuickPick thaht opens up will input the snippet contents AND change the editor’s language association to the scope value.

b. You can also modify an existing file to the snippet content and language by using the command (found in the Command Palette)

[This command workbench.action.populateFileFromSNippet does not have a default keybinding.]

As you can see in the demo, using this command will delete all the current contents of the file AND change the language association of that editor.

So making your initial snippets will probably be the hardest part, you might look into the snippet generator app.

VS Code

Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами. Интерфейс программы приведен на рисунке:

Настройка VS Code

Изменение настроек в VS Code осуществляется в соответствующем окне. Открыть его можно несколькими способами:

Список дополнительных расширений.

Better Comments – разукрашивает комментарии.

Highlight Matching Tag – подчеркивает соответствующий выделенному закрывающий или открывающий тег, находится ли он на той же строке или далеко внизу страницы.

Google Fonts – позволяет просматривать список шрифтов Google и вставлять их в HTML или CSS код.

SCSS BEM Support – это расширение добавляет область TextMate к элементу и модификатору BEM, которые могут быть полезны при подсветке синтаксиса.

Как подключить GitHub к Visual Studio code

Если вы ранее не работали с GIT, то для начала его нужно установить. В зависимости от системы нужно выбрать свой вариант. Загрузить Git для Windows можно здесь. Последняя версия Visual Studio Code. Затем конфигурируем Git. Для этого переходим Все программы ⇒ Git и запускаем Git Bash, в терминал вводим поочереди команды:

подставив ваши данные.

Затем регистрируемся на GitHub и создаем репозиторий. Репозиторий – это рабочая директория с вашим проектом. Это та же папка с HTML, CSS, JavaScript и прочими файлами, что хранится у вас на компьютере, но находится на сервере GitHub. Так вы можете работать с проектом удалённо на любой машине, не переживая, что какие-то из ваших файлов потеряются — все данные будут в репозитории при условии, что вы их туда отправите.

После описанных выше действий переходим в VS Code ⇒ Панель действий (Левая панель) ⇒ Source Control ⇒ Clone Repository, указываем ссылку на созданный репозиторий, указываем локальный каталог для проекта и жмем “Open”. На этом этапе мы подключили репозиторий к VS Code.

Для примера работы с проектом создадим файл index.html в каталоге проекта. После этого на панели Source Control вы увидите, что рядом с именем вашего нового файла отображается буква U. Обозначение U (untracked) означает, что файл не отслеживается, то есть, что это новый или измененный файл, который еще не был добавлен в репозиторий. Открываем вкладку Source Control (Ctrl+Shift+G), тут показаны все изменения сделанные в проекте. Вы можете нажать значок плюс (+) рядом с файлом index.html, чтобы включить отслеживание файла в репозитории. После этого рядом с файлом появится буква A (added). A обозначает новый файл, который был добавлен в отслеживание.

Теперь внесем изменения в файл и сохраним его (Ctrl+S). На панели исходного кода вы увидите, что ваш файл изменился. Рядом с именем файла появится буква M (modified), означающая, что файл изменен. Перейдем на вкладку Source Control (Ctrl+Shift+G) и выберем файл index.html. Перед нами откроется окно разделенное на две части. Левая половина показывает файл до изменений, а правая-что изменилось.

Теперь необходимо отправить измененный файл в репозиторий на GitHub. Для этого в верхней части окна Source Control вводим описание изменений и нажимаем галочку Commit. Этим действием мы зафиксировали изменения в проекте.

Для отправки файла на сервер GitHub нужно в верхней части окна Source Control нажать на многоточие и выбрать команду в меню Pull, Push ⇒ Push. При установке соединения GitHub попросит авторизоваться и сообщит токен для авторизации. Токен вводится в поле при нажатии сообщения “Signing in to github.com” в строке состояния VS Code. Если все сделано правильно, то файлы будут отправлены на сервер GitHub. При последующих отправках файлов авторизация не требуется.

Для добавления нового проекта в репозиторий необходимо открыть этот каталог проекта в VS Code, перейти во вкладку Source Control и выбрать “Publish to GitHub”, выбрать репозиторий, выбрать файлы для добавления и нажать “OK”.

Для загрузки файлов из репозитория необходимо выбрать команду Pull.

WordPress VSCode Extension Pack

Коллекция расширений для работы с сайтами WordPress в VSCode в пакет расширений WordPress VSCode включены:

Загрузить пакет можно по ссылке.

А также рекомендуемые инструменты для WordPress:

27 удивительных инструментов VS Code для современных JavaScript-разработчиков

Visual Studio Code (его ещё называют VS Code и VSCode) — это экономичный но мощный кросс-платформенный редактор кода, выполненный в виде настольного приложения. По словам автора материала, перевод которого мы сегодня публикуем, VS Code поддерживает множество инструментов разработки — вроде TypeScript и отладчика Chrome. Это, а также то, что к нему написано невероятное количество опенсорсных расширений, делает VS Code весьма популярным и любимым многими редактором.

Если вы хотите добавить в свой арсенал JavaScript-программиста что-то новое — автор материала надеется, что вы встретите здесь что-нибудь такое, что вам пригодится. Не все из рассмотренных здесь двадцати семи инструментов предназначены исключительно для JS-разработки. Но все они с успехом могут применяться теми, кто пишет на JavaScript.

1. Project Snippets

Расширение Project Snippets, мой фаворит на все времена, создано на основе встроенного в VS Code инструмента User Snippets.

Если вы не знакомы с этой стандартной возможностью VS Code, то знайте, что она позволяет пользователю оформлять собственные фрагменты кода в виде так называемых сниппетов. Делается это для того, чтобы многократно использовать их в своих проектах. Что значит «многократно использовать»?

Рассмотрим пример. Предположим, вы обнаруживаете, что вам часто приходится писать один и тот же шаблонный код. Например — такой:

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

Создадим сниппет на основе фрагмента вышеприведённого кода. Для этого файл typescriptreact.json нужно привести к следующему виду:

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

Предположим, в некоем проекте используется особая структура папок. Для упрощения работы над этим проектом в файле typescriptreact.json может быть подготовлено нечто, подобное следующему коду:

Такие конструкции совершенно нормально могут применяться в JavaScript. Но что если мы используем в качестве инструмента для стилизации проекта библиотеку styled-components? В таком случае подобный синтаксис нас не устроит. Ведь в styled-components используются обычные CSS-конструкции!

Собственно говоря, здесь нам на помощь и приходит расширение Project Snippets.

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

2. Better Comments

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

С помощью расширения Better Comments можно выделять комментарии разными цветами.

Использование расширения Better Comments

3. Bracket Pair Colorizer

Когда мне довелось впервые увидеть скриншоты с результатами работы расширения Bracket Pair Colorizer, мне стало ясно, что это расширение просто обязано появиться в моём наборе инструментов.

Программирование — это моя страсть, и цветовое выделение скобок — это то, что, определённо, помогает мне полнее наслаждаться этим занятием.

Использование расширения Bracket Pair Colorizer

4. Material Theme

Тема Material, представленная расширением Material Theme, это грандиозное явление, которое теперь доступно и любителям VS Code. Её использование позволяет привести код к следующему виду.

Оформление кода с использованием темы Material

Это, должно быть, одна из лучших существующих тем.

5. @typescript-eslint/parser

Если вы пишете на TypeScript — вам, скорее всего, стоит рассмотреть возможность перевода своих TSLint-конфигураций на typescript-eslint. Дело в том, что, по некоторым данным, поддержка TSLint компанией Palantir будет через некоторое время прекращена. Вместо TSLint там будет использоваться typescript-eslint.

Проекты постепенно переходят на использование пакета @typescript-eslint/parser и связанных с ним пакетов. Делается это в стремлении подготовиться к будущим изменениям экосистемы TS-разработки. Если вам нравится Prettier, то вы сможете пользоваться этим инструментом, задействовав при этом большинство правил ESLint.

6. Stylelint

Stylelint — это тот инструмент, который всегда используется в моих проектах. Это так по нескольким причинам:

7. Markdownlint + docsify

Не знаю о том, как другие разработчики делают заметки во время мозговых штурмов, но мне нравится делать записи в формате Markdown. Это простой и удобный формат. Существует множество инструментов, которые помогают писать Markdown-тексты. Среди таких инструментов можно отметить markdownlint.

Я, кроме того, обычно использую во всех своих проектах docsify. Этот инструмент поддерживает формат Markdown и другие полезные возможности.

8. TODO Highlight

У меня есть привычка — писать прямо в коде заметки по поводу того, что нужно сделать в проекте. В результате мне интересны расширения вроде TODO Highlight. Это расширение помогает работать с TODO-заметками.

9. Import Cost

Расширение Import Cost принадлежит к разряду инструментов, полезность которых можно ощутить при их первом применении. Однако после того как подобным инструментом некоторое время попользуются, может оказаться так, что нужды в нём больше не возникнет. Дело в том, что со временем разработчик уже точно знает о том, какие именно сведения выдаст подобное средство. Однако я, всё равно, рекомендую некоторое время этим расширением попользоваться. Вполне может оказаться так, что оно принесёт вам пользу.

10. Highlight Matching Tag

Иногда поиск закрывающей части некоего тега может превратиться в непростое занятие. В таких случаях полезным может оказаться расширение Highlight Matching Tag.

Использование расширения Highlight Matching Tag

11. vscode-spotify

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

Эту проблему мне помогает решить расширение vscode-spotify, которое позволяет управлять проигрывателем Spotify прямо из VS Code.

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

12. GraphQL for VSCode

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

Это расширение поддерживает подсветку синтаксиса GraphQL, линтинг, автозавершение кода.

Я много пользуюсь Gatsby, поэтому мне ежедневно приходится читать GraphQL-код. Расширение GraphQL for VSCode мне в этом помогает.

13. Indent-Rainbow

Расширение Indent-Rainbow похоже на вышеописанное расширение Highlight Matching Tag. Если иногда вам непросто бывает разобраться в отступах — это расширение поможет вам справиться с проблемой, улучшив читаемость кода. Вот пример его использования.

Использование расширения Indent-Rainbow

14. Color Highlight

Color Highlight — это одно из тех расширений, о котором меня спрашивают: «Где удалось его найти?». Данное расширение помогает в работе с цветом. Выглядит это так, как показано ниже.

Использование расширения Color Highlight

15. Color Picker

Color Picker — это расширение для VS Code, которое предлагает пользователю графический интерфейс, помогающий выбирать цвета для использования в CSS.

16. REST Client

Когда мне довелось впервые попробовать расширение REST Client — мне оно не показалось особенно полезным. Оно не выдерживало сравнения с чем-то вроде Postman.

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

При работе с ним достаточно, например, создать новый файл, в котором будет всего одна строчка:

Использование расширения REST Client

Это расширение, кроме того, позволяет настраивать параметры или данные для POST-запросов. Делается это с помощью буквально пары строк кода:

Подобная конструкция приведёт к выполнению POST-запроса с параметрами < "email": "someemail@gmail.com", "password": 1 >.

И это, на самом деле, лишь предельно сжатое описание возможностей данного расширения.

17. Settings Sync

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

Автоматизировать этот процесс мне удалось с помощью расширения Settings Sync.

18. Todo Tree

Расширение Todo Tree помогает находить TODO-комментарии в коде проектов. Оно оформляет эти комментарии в формате дерева, выводимого в левой части экрана.

Использование расширения Todo Tree

19. Toggle Quotes

Toggle Quotes — это интересное расширение, которое позволяет менять вид используемых в коде кавычек. Оно оказывается очень кстати, например, в тех случаях, когда нужно изменить обычные кавычки на обратные кавычки (backticks). Это может понадобиться при интерполяции строк и может оказаться особенно полезным тогда, когда Prettier оформил строки с использованием обычных одинарных кавычек.

Использование расширения Toggle Quotes

20. Better Align

Расширение Better Align позволяет выравнивать код без его предварительного выделения.

21. Auto Close Tag

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

22. Sort Lines

Мне не нравятся массивы, элементы которых расположены не в алфавитном порядке. Быстро справиться с этой проблемой мне помогает расширение Sort Lines. Если вам тоже не нравятся подобные массивы — оно может пригодиться и вам.

23. VSCode Google Translate

Возможно, я — единственный человек, который считает полезным расширение VSCode Google Translate. Но мне оно помогает, так как мне приходится принимать участие в работе над проектами, над которыми вместе со мной трудятся люди, говорящие на разных языках. Это расширение может пригодиться тем, кто, для перевода чего-либо, не хочет сворачивать VS Code.

24. Prettier

Prettier — это расширение для VS Code, которое умеет автоматически форматировать код, написанный на JavaScript, на TypeScript и на других языках.

25. Material Icon Theme

Значки из пакета Material Icon Theme мне нравятся больше, чем другие. С их помощью гораздо легче различать типы файлов. Особенно это справедливо для тех случаев, когда в VS Code используется тёмная тема.

26. IntelliSense for CSS class names in HTML

27. Path Intellisense

Расширение Path Intellisense помогает автоматически завершать ввод имён файлов.

Итоги

Надеемся, среди расширений для VS Code, о которых вы только что прочли, найдётся что-то такое, что вам пригодится.

Уважаемые читатели! Какие расширения для VS Code вы добавили бы к тем, о которых шла речь в этой статье?

Шаблоны поддержки веб-сайтов

Папка шаблона проекта

Файл проекта

Шаблоны проектов

Пустые проекты веб-сайта

Файл шаблона, который управляет созданием нового пустого веб-сайта.

Проекты веб-сайта

Корневой файл конфигурации web.site.

Файл шаблона, который определяет содержимое решения веб-сайта и принудительно создает папку App_Data.

Проекты веб-служб

Зависимый файл, реализующий класс службы. Язык кода программной части определяет расширение этого файла.

Корневой файл конфигурации web.site.

Папка шаблона элемента проекта

Шаблоны элементов проекта

Новая эталонная страница

Новый класс

Исходный файл, реализующий пустой класс. Язык кода программной части определяет расширение этого файла.

Файл шаблона, создающий исходный файл и определяющий его содержимое.

Новая HTML-страница

Этот шаблон создает новую веб-страницу в ответ на команду «Добавить новую HTML-страницу «.

Файл шаблона, создающий веб-страницу и определяющий его содержимое.

Новая веб-форма

Этот шаблон создает новую смарт-веб-страницу в ответ на команду «Добавить новую веб-форму «.

Чтобы создать страницу содержимого для выбранной главной страницы, выберите » Выбрать главную страницу«.

Начальная страница веб-страницы. Эта веб-страница не связана с зависимым файлом кода.

Начальная страница веб-страницы. На этой веб-странице есть связанный зависимый файл кода.

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

Новая эталонная страница

Этот шаблон создает новую главную страницу в ответ на команду «Добавить новую главную страницу «.

Начальная содержимое главной страницы. Эта эталонная страница не связана с зависимым файлом кода.

Начальная содержимое главной страницы. На этой главной странице есть связанный зависимый файл кода.

Файл шаблона, определяющий содержимое новой главной страницы и его зависимый файл( при наличии).

Visual Studio Code: Treat other extensions as HTML

For the purposes of syntax highlighting and colouring and intellisense is it possible to treat other extensions (tpl, master, etc) as HTML?

I know it’s possible on a file by file basis by pressing CTRL+SHIFT+P and selecting «Change Language Mode» BUT I want it to work off file extension, and not have to redo it every time I open a new file.

I also know it’s possible for some languages by editing the json files in the plugins directory, BUT there doesn’t seem to be one for HTML.

5 Answers 5

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Update for VS Code 1.0:

There is a setting files.associations that can be used to assign file patterns to languages. For example:

~~This is a commonly asked feature request and we are looking into this issue for the future.~~

~~As a workaround if you need to have a solutio now:~~

~~Note: this change will not survive automatic updates but the hopes are that there is a better solution in the future update 🙂~~

How to quickly create

Also, would it be easier to switch to Sublime, my buddies think that it is the way to go.

6 Answers 6

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

If you do not see this working:

I tried everything written in the answers but it wouldnt work, I had to do the following;

go to settings in the bottom left, search for ’emmet’

scroll down to and tick:

‘Trigger expansions on Tab’

Check out this Cheat Sheet for VSC: Cheat sheet for VSC

Ensure that VScode recognises your file as HTML5 or CSS file. In my case I had emmet enabled, but while I could get emmet abbreviation in a CSS file, they wouldn’t work in an HTML file. The issue was that I also had Django template extension installed and the file had Django template code as well, hence VScode considered the file as Django template file, not HTML. You can check this the status bar at the bottom of VScode. Once I changed the file from Django template to HTML by clicking on Django Template in the VScode status bar, emmet started working.

Tried mentioned thing from emmet vs code document

it worked for me for reference : Emmet in visual studio code

Not the answer you’re looking for? Browse other questions tagged css or ask your own question.

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Как повысить скорость верстки в VS Code: Emmet и другие фишки

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

Какие есть фишки в Visual Studio Code для ускорения производительности

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

Emmet

Главный инструмент любого верстальщика. В Visual Studio Code Emmet в самой базовой версии уже установлен по умолчанию. Его суть в том, что он позволяет записывать большие HTML-конструкции в виде формулы или набора сокращений и потом раскрывать их. Например, чтобы сделать базовую развертку шаблона под HTML-страницу достаточно прописать знак “!” без кавычек и нажать клавишу Enter.

Развертка базовой структуры HTML-документа

Все доступные сокращения и формулы можно изучить в документации к Emmet или на специализированных форумах. Не забывайте, что их можно комбинировать между собой, делать вложения и так далее. Если базового функционала Emmet, встроенного в Visual Studio будет недостаточно, то можно расширить его, установив отдельные Emmet-дополнения для решения более узкоспециализированного круга задач.

Совсем начинающему верстальщику, который ранее не сталкивался с Emmet рекомендуется посмотреть, как работают с ним коллеги. Если такой возможности нет, то можно открыть любой туториал по верстке на YouTube. Там ведущие очень часто прибегают к использованию Emmet. Запомнив основные сокращения и формулы можно очень быстро оптимизировать свой рабочий процесс верстки.

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

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

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

Сторонние HTML-сниппеты в разделе с плагинами для VS Code

IntelliSense

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

Всплывающие подсказки инструмента IntelliSense

Система также способна “предсказывать” некоторые действия разработчика, но это будет полезно преимущественно бэк и фулл-стак разработчикам. Во время ввода названия объекта, команды, ключевого слова и так далее появляется выпадающее окошко с подсказками. Когда код дописывается подсказки становятся более релевантными. Выбрать их можно в появляющемся контекстном меню с помощью клавиш со стрелками и клавиши Enter. Также стоит отметить, что система обучается на основе того, какие вы выбираете подсказки в выпадающих списках.

Данный инструмент в первую очередь будет полезен при написании JavaScript-кода, PHP, Python, которые тоже используются в процессе верстки, правда, в бэкенд-разработке.

Использовать интегрированный терминал

Тоже пригодится больше для бэкенда или организационного процесса, например, связи с директориями на GitHub. Терминал, интегрированный в среду разработки Visual Studio Code ничем не уступает стандартному Терминалу в Linux, Mac OS или Командной строке в Windows. Он экономит в первую очередь время тем, что вам не нужно переключаться между окно редактора и терминала для отладки определенных процессов.

Интегрированный терминал VS Code

По умолчанию раздел со встроенным терминалом VS Code расположен в нижней части окна. Вы можете при необходимости настроить его расположение в редакторе. Быстро включить встроенный терминал можно с помощью сочетаний клавиш Ctrl+`. Терминал откроется для корневой папки проекта, над которым в данный момент ведется работа. Если требуется открыть несколько окон терминала, то воспользуйтесь сочетанием клавиш Ctrl+Shift+`. Таким образом можно будет открыть несколько окон встроенного терминала для работы. Они будут в собственных вкладках.

Быстрый поиск объектов и классов

Работая над большим проектом разработчик может присвоить один и тот же класс в нескольких местах одновременно. Функционал VS Code позволяет отобразить все эти места, а также выполнить автоматическую замену обнаруженных элементов. Чтобы получить нужную информацию по интересующему элементу в документе, разработчику достаточно просто кликнуть по нему правой кнопкой мыши. Также можно выделить нужный участок кода и воспользоваться сочетанием клавиш Shift+F12.

Работа с элементами в VS Code

Клавиатурные сокращения

Верстальщику и программисту желательно как можно реже убирать руки от клавиатуры во время работы, дабы не терять время зря. Чтобы как можно это делать, нужно запомнить клавиатурные сокращения для работы в программе. Однако начинающему разработчику может быть трудно это все их запомнить. Для быстрого обращения ко встроенной в VS Code “шпаргалки” нужно воспользоваться сочетанием клавиш Ctrl+K+S.

Список клавиатурных сочетаний в VS Code

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

Взаимодействие с Git-репозиториями

Еще в Visual Studio Code встроена возможность взаимодействия с Git-репозиториями. Это можно делать как в графическом режиме, так и через встроенный терминал. В специальном разделе можно готовить к коммитам изменённые файлы, делать коммиты, откатывать изменения, делать комментарии. Благодаря тому, что все действия с репозиториями можно проводить прямо внутри редактора экономится много времени, так как не требуется отдельно открывать окно терминала, а тем более веб-интерфейс GitHub.

Полезные плагины для ускорения работы в Visual Studio Code

Рассмотренные выше “фишки” касались преимущественно встроенного функционала редактора, на который неопытные разработчики не обращают должного внимания. Однако некоторые момент для верстальщика в VS Code все равно остаются непродуманными, поэтому исправить это можно только через загрузку плагинов из встроенного каталога редактора.

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

CSS Peek

Полезный плагин для работы с CSS-стилями, а также классами и идентификаторами в HTML-разметке. С его помощью можно отслеживать изменения таблиц стилей нужного класса или идентификатора. Для этого просто достаточно кликнуть правой кнопкой мыши на селектор в HTML-файле и воспользоваться функцией “Перейти к определению” или “Подсмотреть определение”.

Color Info

SVG Viewer

В верстке все чаще используются SVG-изображения, например, для установки иконок и других векторных обозначений в документе. По умолчанию SVG-картинка в редакторе кода выглядит как просто набор параметров, что усложняет ее правильную идентификацию, особенно, когда таких изображений в документе много. С помощью SVG Viewer картинки можно просматривать прямо в документе, а также редактировать их, конвертировать их в PNG и создавать data URL схемы.

Faker

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

Live Server

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

Image preview

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

Path Intellisense

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

Заключение

Visual Studio Code сам по себе уже оснащен всем необходимым для продуктивной работы верстальщика, благодаря чему тратиться минимум времени на настройку и отладку рабочего пространства. Некоторые недостающие моменты можно добавить с помощью плагинов прямо из встроенной библиотеки. Все это делается в два клика, что позволяет максимально быстро приступить к работе. Рассмотренные инструменты рекомендуется применять в работе все вместе для достижения максимальной продуктивности.

vscode html autoformat on django template

I love VSCode on save autoformat until it messed up with my template code.

It wrongly formats my django template syntax into one line code (sometimes really long line). So instead of having this code

I end up have this code

I tried to disable format on save by changing user settings into <"editor.formatOnSave": false>but still haven’t gotten any luck.

Is there any configuration that I can use to make it work better?

PS: I’m using VSCode version 1.9 on Sierra MacOSx

9 Answers 9

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

I used the beautify extension instead which worked right away while prettier was still putting on one line. Credit goes to kimanihuon on this stackoverflow page.

Alexa has a good point in her answer. The file mode needs to be changed in «Django/HTML» to prevent VS CODE for formatting it.

How to change the file mode?

A quick solution is to use this extension called vscode-Django and adjust your setting like this as said in his documentation.

With those setting any file located in the template folder will be considered as a Django template file and will not be affected by HTML autoformat.

PS: The extension is still in preview mode, hope it will get better with time.

VSCode не заполняет HTML автоматически

Введите имя тега (без запуска ), затем нажмите Tab

например, введите, div затем нажмите вкладку, и VS преобразует его в

Или введите открывающий тег и дважды нажмите Tab.

он добавит закрывающий тег

Вот крутой трюк (на самом деле аббревиатура Эммета) :

Вы можете попробовать это расширение для VS Code. В нем реализована функция автоматического закрытия тегов и будет соответствовать вашим требованиям:

Файл> Настройки> Раскладки, найдите «Автоматическое закрытие» и нажмите «Установить». Если не работает, перезагрузите плагин.

У меня была та же проблема, затем я удалил ненужные расширения из VS Code вместе с расширением JavaScript (SE), и это сработало для меня.

Нажмите, Ctrl + Shift + P чтобы открыть команду. Затем введите Change Language Mode выбранный HTML или любой другой желаемый язык.

Просто проверьте нижнюю часть своего vscode и измените языковой режим на HTML. Возможно, он показывал django-html, или нажмите ctrl + shift + p, чтобы изменить языковой режим. Скриншот

Если вы напечатаете

В этом случае перейдите в настройки пользователя VS Code и вставьте следующий код:

Теперь, если вы наберете

Но если вы хотите сделать это только для файла HTML, достаточно следующей строки:

mjbvz/vscode-lit-html

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Adds syntax highlighting and language support for html inside of JavaScript and TypeScript tagged template strings, such as used in lit-html and other frameworks.

The lit-html extension adds highlighting and IntelliSense for lit-html template strings in JavaScript and TypeScript. It works out of the box when you use VS Code’s built-in version of TypeScript.

If you are using VS Code 1.30 or older and are using a workspace version of typescript, you must currently configure the TS Server plugin manually by following these instructions

You can either configure this plugin using a tsconfig or jsconfig as described here, or configure the plugin using VS Code. This requires VS Code 1.30+ and TS 3.2+. Note the VS Code based configuration override the tsconfig or jsconfig configuration.

This extension adds html IntelliSense to any template literal tagged with html or raw :

You can enable IntelliSense for other tag names by settings «lit-html.tags» :

The plugin formats html code by default. You can disable this by setting «lit-html.format.enabled»: false :

About

Adds syntax highlighting for html inside of JavaScript and TypeScript tagged template strings

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

Текстовые редакторы, созданные на основе web-технологий, переживают настоящий бум. Atom, VS Code, Brackets, подобно монстрам рока, завоевывают популярность среди web-разработчиков (погоди, какой там сейчас на календаре год у «популярных монстров рока»? 🙂 — Прим. ред.). На них переходят как с IDE, так и просто с нативных редакторов. Причина предельно проста: репозитории кишат полезными плагинами, а недостающие каждый может создавать самостоятельно, применяя сугубо web-технологии.

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

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

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

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

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

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

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

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

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

Сниппеты

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

VS Code:

Обертка для HTML

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

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

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

VSCode

Линтеры

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

VS Code:

Цена импорта

«Import Cost» однозначно пригодится, если вы часто устанавливаете пакеты из NPM. В погоне за быстрыми и готовыми решениями не все уделяют внимание размерам пакетов. Ладно, если проект на Node.js, где размер директории с модулями мало заботит. С фронтенд-проектами ситуация противоположная.

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

VS Code:

Сам себе генератор

Во время разработки всегда требуются наборы сгенерированных данных, будь то набор случайных чисел, email, IP-адресов и прочее. Стоит ли говорить, что самостоятельная заготовка перечисленного добра — занятие не из приятных. Упростить дело помогут два интересных расширения: VSCode-random и Random.

Расширение включает в себя несколько генераторов случайных данных, их количество от версии к версии пополняется. Прямо сейчас доступны генераторы, позволяющие получить: случайные числа, случайные числа из заданного диапазона, валидные email, IPv4/IPv6, названия стран, URL-адреса, цвета, имена людей, названия улиц… Перечисленные плагины ориентированы в первую очередь на JavaScript-разработчиков, а если твоя работа связана лишь с версткой, то тебе пригодится генератор Lorem ipsum, позволяющий быстро формировать заготовки шаблонного текста.

VS Code:

Автоматизированное тестирование

Если для написания автотестов вы применяете Jest, обязательно присмотритесь к расширениям Jest и Jest Runner. Первое делает применение Jest более комфортным за счёт нескольких полезных функций:

Второе расширение (Jest Runner) добавляет в файлы с тестами возможность выборочного запуска с тестами. В редакторе появляются кнопки для запуска одного или группы тестов. Незаменимая функциональность, когда тестов много или активно применяется подход TDD.

Открываем проект в браузере

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

Расширение «Open in default browser» элегантно решает эту задачу. Достаточно воспользоваться горячей клавишей и в одно мгновение поднимется веб-сервер, запустится браузер по умолчанию и откроется страница макета с которой вы работали в редакторе.

Менеджер проектов

В Atom и VS Code, в отличие от IDE, такая сущность, как проект, не применяется. Мы просто работаем с файлами в определенных директориях. Если говорить еще точнее, то «проект» в перечисленных редакторах — корневая директория. К сожалению, из коробки в редакторах отсутствует возможность быстрого переключения между ними. Когда в работе сразу несколько проектов, переключаться между ними долго и неудобно. Плагин Project Manager добавит недостающую функциональность.

REST Client

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

Перечисленные решения прекрасно работают и выполняют поставленные задачи. Однако, установив расширение REST Client, появляется возможность выполнять запросы прямо из редактора.

Работает это так. Текст HTTP-запроса пишется прямо в файле. Рядом с ним появляется кнопка, позволяющая его выполнить. Результат выполнения запроса будет показан в отдельной вкладке редактора. Это удобно по нескольким причинам. Главная из которых: можно разом собрать все запросы в одном файле и быстро между ними переключаться. Зачастую это получается быстрей, чем при работе с GUI.

Подсветка для скобок

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

Оставим за кадром обсуждение антипаттерна передачи результатов функций в качестве параметров, а посмотрим на скобки. В этой строке их слишком много и есть вложенные. Далеко не сразу понятно, что к чему. Стандартные возможности редактора пытаются помочь подсветкой парных скобок, но расширение вроде Bracket Pair Colorizer делает это более элегантно. Оно раскрашивает парные скобки случайным цветом, тем самым позволяя разработчику быстро найти пару для скобки.

Автокомплит для npm

Идея плагина проста: начинаем писать первые символы названия модуля и получаем варианты для автокомплита. При активной разработке под Node.js вещь незаменимая.

Повышаем узнаваемость файлов

При работе над проектами с большим количеством разношерстных файлов (HTML, CSS, SQL, PHP, JS и так далее) удобно определять тип файла не по расширению, а по знакомой глазу иконке. Подобный подход применяется во многих IDE, а вот текстовые редакторы по умолчанию с этим не парятся. Прокачать редактор и облегчить зрительное восприятие поможет расширение с набором иконок — VSCode-icons и Seti Icons. Расширение добавляет каждому файлу соответствующую иконку, после чего ориентироваться становится проще.

Вредное выравнивание

Некоторые разработчики питают особые чувства к выравниванию текста. Речь идет про выравнивание значений относительно оператора =. Если ты не понял, о чем я говорю, то посмотри на эти несколько строчек кода:

Длина имен переменных различается, но все значения находятся на одном уровне. Выглядит это хорошо, и читаемость действительно возрастает. Правда, появляется другая сложность — лишние пробелы. Сторонников и противников представленного подхода к оформлению много. Если ты один из приверженцев выравнивания по =, присмотрись к плагинам Atom Alignment и Better Align.

Шаблон для JSDoc

JSDoc — стандарт оформления комментариев в JavaScript. Несмотря на общую лаконичность формата, набивать руками заготовку долго. Плагины Document this и Atom easy ускорят дело, добавив возможность быстрого формирования заготовок будущих комментариев.

Парсер TODO

Не вспомню, откуда повелось, но еще со времён программирования на Delphi было принято помечать комментарием TODO те участки кода, которые планировалось отрефакторить в будущем. Все взрослые IDE предоставляют подобную функцию из коробки: кликаем и получаем список «задач из кода». Добиться примерно такого же эффекта в редакторах позволяют расширения «Todo+» и Todo Show Package для Atom. Расширения позволяют просканировать файл/проект и вывести в отдельную панель все TODO, FIXME, NOTE и другие комментарии.

Для VSCode доступно также более продвинутое расширение «Todo Tree». Он позволяет вывести все TODO прямо в сайдбар, предварительно сгруппировав их по файлам языкам программирования.

Детектим цвета

Во время верстки очередной страницы указывать цвета принято в HEX/RGB/HWB/HSL. Проблема одна: если в голове отсутствует база используемых в оформлении цветов, то для определения цвета по его текстовому представлению придется копипастить значения в графический редактор. Задача рутинная и легко решается благодаря плагину Color Picker.

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

Приручаем C#

Комфортное программирование на языке C# давно не ограничивается одной лишь Visual Studio. Писать код на этом популярном языке вполне возможно на VS Code и Atom, предварительно установив соответствующее расширение. Скажу сразу и честно: VS Code вне конкуренции. Для него доступно как официальное расширение Microsoft, так и стороннее с несколькими оригинальными фишками.

Что касается Atom, то здесь все несколько грустней. Самое популярное расширение для C# — language-csharp по факту добавляет только подсветку синтаксиса и различные сниппеты.

Поддержка EditorConfig

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

Шаблонизаторы

При разработке на JavaScript активно приходится прибегать к помощи шаблонизаторов, которых существует бесчисленное множество. Однако наибольшую популярность завоевали handlebars и Pug. Первая проблема, с которой сталкиваешься, — подсветка синтаксиса. В случае с handlebars она решается установкой плагинов handlebars/atom-handlebars. Также не помешают решения вроде handlebars preview, умеющие на лету показывать результат компиляции шаблона.

С Pug чуточку сложней — синтаксис особо подсвечивать смысла нет, но есть плагины, упрощающие конвертацию HTML в синтаксис Pug и обратно. При вёрстке больших шаблонов такой конвертер (например, htmlPugConverter) сэкономит кучу времени и сил.

VS Code:

Синхронизируем настройки

Выше я говорил, что муторнее всего при переезде на очередной редактор учить новые сочетания клавиш и отвыкать от тех, что давно укоренились в мозгу. Вторая по значимости проблема — синхронизация настроек. Если у тебя несколько рабочих компьютеров, ты меня поймешь. Мне приходится работать за двумя машинами — на работе Windows, а дома Mac. Дико раздражает, когда на работе установишь какой-нибудь полезный плагин или подкрутишь несколько настроек, а придя домой, понимаешь, что эти же действия надо повторить. Было бы здорово иметь возможность синхронизации настроек и установленных расширений, как в браузерах. И такая возможность есть.

Расширение Settings Sync позволяет синхронизировать установленные расширения, настройки, темы, раскладки клавиш и многое другое. Причем для синхронизации не требуется сторонний облачный сервис — все работает через GitHub. После базовой настройки (описание доступно на странице проекта) требуется запомнить две комбинации клавиш: Shift + Alt + u (выгрузка настроек) и Shift + Alt + d (загрузка настроек).

Выборочный запуск кода

Хочешь запустить код на исполнение прямо здесь и сейчас? Причем не весь проект, а, например, один модуль или вовсе проверить работу одной функции? Согласись, запускать весь проект ради такой мелочи — кощунство. Специально для таких случаев есть плагин Code Runner. Он умеет запускать код в текущем табе или выделенный код. Результат исполнения выводится в консоль вывода. Во время отладки функций вещь чрезвычайно полезная.

Code Runner поддерживает не только JavaScript, но и другие популярные языки программирования: Java, PHP, Ruby… Требуется лишь установить в системе необходимые компиляторы/интерпретаторы и прописать в конфиг Code Runner пути к ним.

Сортировка строк

Некоторые разработчики обожают описывать свойства объектов или CSS-правила в алфавитном порядке. Плюсы и минусы такого подхода обсуждать не будем, но согласимся, что проблема сортировки возникает в самых разных ситуациях. Расширение Sort lines умеет сортировать выделенные в редакторе строки несколькими способами: по алфавиту, по длине, в случайном порядке и так далее. Я как-то видел, что подобные задачи, связанные с сортировкой списков значений, многие решают с помощью Excel. Если ты делаешь так же, то присмотрись к плагину, будет проще.

Интегрируемся с Git

Без Git в наше время никуда. За годы практики я выработал для себя правило: работаешь с Git либо через консоль, либо через встроенный инструментарий в редакторе кода. Заставить себя пользоваться отдельными приложениями так и не получилось. Неудобно мне постоянно менять фокус, инструмент нужен здесь и сейчас. VS Code, а с недавних пор и Atom умеют работать с Git на базовом уровне. Серьезно расширить базовые возможности готовы специальные расширения вроде Git Easy, Git Lens и Git History.

Git History решает проблему просмотра истории коммитов. По факту это хорошо визуализированный вывод команды git log с возможностью быстрого просмотра авторов изменений и другой полезной информации. Легко узнать, кто менял выделенную строку кода, посмотреть изменения между версиями и так далее.

Git Lens — одно из самых мощных расширений для работы с Git из редактора. Добавляет возможности визуального сравнения изменений между версиями файлов, подсвечивает измененные строки, выводит информацию об измененных строках в виде аннотаций (имя автора и время добавления строки отображается на фоне кода), показывает превью перед слиянием и много другой полезной информации. Аннотации — одна из ключевых функций, позволяющих сразу понять, кто автор данного кода и когда код был закоммичен. Полный список возможностей смотри на странице проекта.

Git rebase shortcuts — предоставляет горячие клавиши (шорткаты) для выбора действий при интерактивном преобразовании (rebase). Все шорткаты соответствуют сокращениям команд интерактивного ребейза. Например, чтобы применить действие «squash» достаточно перейти в редакторе на соответствующий коммит и нажать клавишу `s`.

VS Code:

Автозакрытие тегов

При написании HTML/XML-кода важно не забывать прописывать закрывающие теги. Понятное дело, что «забывчивость» быстро отображается в виде поехавшей разметки. Чтобы не пропустить закрывающие теги там, где они действительно нужны, есть удобный плагин Auto Close Tag. Расширение поддерживает HTML/XML, закрывает только парные теги, поддерживает закрытие тегов в стиле Sublime Text 3, автоматически перемещает курсор между открывающим и закрывающим тегом.

Плагинов много не бывает

В статье мы успели рассмотреть наиболее популярные плагины для веб-разработчика. Это лишь малая часть из того, что есть в официальных репозиториях. Дальше все зависит от конкретных задач. Напоследок хочу дать один совет: не переборщи. Помни — чем больше установлено плагинов, тем скорей ты поймаешь тормоза (да-да, слова «скорей» и «тормоза» странно смотрятся в одной фразе :)). Не стоит при помощи плагинов делать из редактора IDE. Они создавались как легковесные решения и такими должны оставаться. Если требуется более серьезная и сложная функциональность — присмотрись к IDE. Выигрыш в производительности будет колоссальный.

Плюсы и минусы редакторов на веб-технологиях

Плюсы:

Минусы:

Одной строкой

Последнее обновление материала: 29.12.2020.

Оригинал статьи подготовлен и опубликован в журнале «Хакер». Июль 2017.

Пошаговое руководство. Создание фрагмента кода

Фрагмент кода можно создать всего в несколько шагов. Все, что необходимо сделать, — это создать XML-файл, заполнить соответствующие элементы и добавить в него код. При необходимости вы можете использовать параметры замены и ссылки на проект. Импортируйте фрагмент в папку установки Visual Studio с помощью кнопки Импорт в диспетчере фрагментов кода (Сервис>Диспетчер фрагментов кода).

Шаблон фрагмента

Ниже приведен XML-код простого шаблона фрагмента:

Создание фрагмента кода

Создайте XML-файл в Visual Studio и добавьте показанный выше шаблон.

Введите заголовок фрагмента в элементе Заголовок. Используйте заголовок Square Root (Квадратный корень).

Чтобы просмотреть все доступные значения языка, просмотрите раздел об атрибутах элементов кода на странице Справочник по схеме фрагментов кода.

Добавьте код фрагмента в раздел CDATA внутри элемента Code.

Либо для Visual Basic:

Для строк кода в разделе CDATA фрагмента кода нельзя указать отступы или форматирование. Языковая служба автоматически форматирует вставленный код.

Сохраните фрагмент как SquareRoot.snippet (его можно сохранить в любом месте).

Импорт фрагмента кода

Вы можете импортировать фрагмент в установку Visual Studio с помощью диспетчера фрагментов кода. Чтобы открыть его, выберите Сервис>Диспетчер фрагментов кода.

Нажмите кнопку Импорт.

Перейдите к папке, в которой был сохранен фрагмент кода в предыдущей процедуре, выделите его и нажмите кнопку Открыть.

Откроется диалоговое окно Импорт фрагмента кода, в котором будет предложено выбрать место добавления фрагмента (из вариантов в правой области). Один из вариантов должен быть Мои фрагменты кода. Выберите его и нажмите кнопку Готово, а затем — кнопку ОК.

В зависимости от языка кода фрагмент копируется в одно из следующих расположений:

%USERPROFILE%\Documents\Visual Studio 2019\Code Snippets\Visual C#\My Code Snippets%USERPROFILE%\Documents\Visual Studio 2019\Code Snippets\Visual Basic\My Code Snippets

Протестируйте фрагмент, открыв проект C# или Visual Basic. Открыв файл кода в редакторе, выберите пункты Фрагменты>Вставить фрагмент в контекстном меню, а затем щелкните Мои фрагменты кода. Вы должны увидеть фрагмент с именем Square Root. Дважды щелкните его.

Код фрагмента вставляется в файл кода.

Поля Description и ярлыков

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

Добавьте элементы Author и Description в элемент Header и заполните их.

Элемент Header должен выглядеть примерно так:

Откройте диспетчер фрагментов кода и выберите фрагмент кода. В правой области обратите внимание на то, что поля Description и Author теперь заполнены.

Чтобы добавить ярлык, добавьте элемент Shortcut внутрь элемента Header:

Сохраните файл фрагмента еще раз.

Чтобы протестировать ярлык, откройте использованный ранее проект, введите sqrt в редакторе и нажмите клавишу TAB (один раз для Visual Basic или два раза для C#).

Код фрагмента должен быть вставлен.

Параметры замены

Возможно, вам нужно предоставить пользователю возможность заменять части фрагмента кода. Например, может потребоваться, чтобы пользователь заменил имя переменной на используемое в текущем проекте. Возможны два типа замен: литералы и объекты. Элемент Literal используется для определения замещающего элемента для отрывка кода, который полностью заключен во фрагмент, но, скорее всего, будет изменен после вставки в код (например, строка или числовое значение). Элемент Object используется для определения элемента, который необходим во фрагменте кода, но, скорее всего, будет определен вне самого фрагмента (например, экземпляр объекта или элемент управления).

Чтобы пользователь мог легко заменить число, квадратный корень которого требуется вычислить, измените элемент Snippet в файле SquareRoot.snippet следующим образом:

Сохраните файл фрагмента.

Откройте проект и вставьте фрагмент.

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

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

Импорт пространства имен

HTML to CSS autocompletion

solnurkarim

HTML to CSS completion suggestions

Extension features

How to configure

Configuration options

html-to-css-autocompletion.triggerCharacters Shows completion list only on ‘#’/’.’ character entries. Default: disable

html-to-css-autocompletion.autocompletionFilesScope
Defines scope for extension to work with. Options :
multi-root : all selectors found within all root folders will be visible to defined stylesheets. This is Default autocompletion provider’s scope.
workspace : all selectors found within particular workspace folder/project will be visible to stylesheets within that workspace folder.
linked files : selectors will be provided only for linked stylesheets.

html-to-css-autocompletion.getSelectorsFromFileTypes
Defines file types to be searched for classes and ids. Default: html, php

html-to-css-autocompletion.folderNamesToBeIncluded
Defines only specific folder names to be searched. Default: »

html-to-css-autocompletion.folderNamesToBeExcluded
Defines folder names to be excluded from being searched. Default: node_modules

html-to-css-autocompletion.includePattern
Set custom glob pattern to get classes/ids from matched files. E.g.: **//*.

html-to-css-autocompletion.excludePattern
Set custom glob pattern to exclude search on pattern matches. E.g.: **//**

Contribute

If you have any issues or would like to contribute to the development of this extension please drop by at github/github issues.

Forks, pull request are welcome.

Donate

If you find this extension helpful consider donating to help keep it alive.

You can become a member at patreon or check sponsor button at github page for more donation options.

Русские Блоги

пользовательские настройки шаблона VsCode

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

Ну, тогда вам нужно только ввести следующее в файл JSON внутри

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

Конечно, если вы чувствуете, что это не достаточно, мы можем по-прежнему продолжают поступать в JSON файл внутри

После этого вы можете ввести «JS», тело внутри кода ниже будет иметь возможность появляться.

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

Теперь мы входим в «Vue», будет иметь возможность направлять столько из появления кода, это не особенно удобно?

Конечно, вы можете сказать, я не вю, я просто хочу изменить в HTML файл шаблона, то это намного проще, просто выберите html.json в начале, вы можете настроить.

Интеллектуальная рекомендация

Java Onlink Notes (что такое Java)

Режим прокси [сначала режим структуры]

Создайте небольшой экземпляр spingboot, включая CRUD

HTML Configurable Autocomplete

BrightSoul

HTML Configurable Autocomplete

Autocomplete your HTML content, navigate to definitions and find references by providing simple matching rules. Be proud of your frameworkless / non-conformant project and be productive again with this extension!

Features

This extension provides:

It needs your configuration so it can find completion items and definitions in your project. Here’s a sample configuration you can see in action in this GitHub project.

Requirements

Extension Settings

This extension contributes the following settings:

The following configuration keys indicate glob patterns:

They support the following placeholders which will be replaced at runtime. Suppose the user has the editor opened on src/components/layout/MainLayout.html :

Additionally, the following placeholders are also supported for glob patterns of completion item providers. They need at least one configured definition provider which is matching code at the current cursor position. If a definition is found, its file path will be used to replace these placeholders. Supposed a definition is found in src/components/shared/LoadingIndicator.js :

Transformers

Using regular expressions to match parts of a JavaScript file might yield imprecise results. For instance, suppose you wanted to find all properties in a ES6 class like this.

By using transformers, this extension can pre-process content before a regular expression is executed. For instance, by using the es6-module-nodes transformer, the previous ES6 class would be transformed like so:

As you can see, each line represents a class or member definition and its node position in the original file. This way, it becomes way easier to write a regular expression that matches all properties. Try with instance public property ([a-z0-9_]+)

List of supported transformers

es6-module-nodes

Internally uses babel-eslint to create a textual representation of a ES6 class that’s easier for regexp to work on.

It can be used for the following settings:

Here’s a more complete example. The following ES6 class:

It’s going to be transformed to

Class info is repeated for each of its members, in case you wanted to match members of just a particular class. Each output line starts with the zero-based position (line,character) where the original node started.

The previous example showed the ES6-style exports but it also works with node-style exports (e.g. module.exports = class Foo <> ).

flatten-html

Sometimes you want to display some completion items only when you’re in a specific portion of the HTML document, such as an ancestor element having a specific attribute. This transformer uses htmlparser2 to parse the HTML content and then it will flatten the HTML hierarchy of elements so it will be easier for you to write a regular expression.

It can be used for the following settings:

Suppose the current editor has this HTML content:

flatten-json

In case you want to autocomplete the hierarchy of properties found in a json file, then this is the transformer for you. It uses clarinet to parse the JSON content and flatten its hierarchy of properties so it will be easier for you to write a regular expression.

It can be used for the following settings:

Suppose the current editor has this JSON content:

It will be transformed as follows, by outputting the full path of each property.

camelcase-to-kebabcase

It can be used for the following setting:

kebabcase-to-camelcase

It can be used for the following setting:

Logging

Known Issues

Oh well, some things could be improved.

Release Notes

1.4.2 (2020-11-03)

1.4.1 (2020-10-28)

1.4.0 (2020-10-10)

1.3.1 (2020-09-22)

1.3.0 (2020-08-26)

1.2.0 (2020-08-19)

1.1.0 (2020-07-29)

1.0.0 (2020-07-26)

Initial release of these two features for HTML files:

Профессиональная работа в VS Code: 4 совета

VS Code — это, в наши дни, один из самых популярных редакторов кода. Продуманный подход к использованию этого редактора способен значительно повысить продуктивность программиста. В этом материале представлено несколько советов по профессиональному использованию VS Code. Хочется надеяться, что эти советы вам пригодятся.

1. Использование нескольких курсоров

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

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

Код в редакторе

Как решить эту задачу? Раньше я поступал так: вводил нечто вроде текста class=«odd» в одном месте, а потом копировал его в буфер обмена и вставлял везде, где он нужен. Правда, после того, как я узнал о возможности работать с несколькими курсорами в VS Code, я так делать перестал. Это значительно повысило эффективность моего труда.

В частности, речь идёт о следующем. Для добавления в текст нескольких курсоров нужно удерживать клавишу Alt на клавиатуре (в macOS — клавишу Option ) и щёлкать по тем местам, где должны появиться курсоры. После этого всё, что вводится с клавиатуры, будет одновременно появляться везде, где имеются курсоры.

Использование нескольких курсоров

Напомню, что речь идёт о следующих сочетаниях клавиш:

2. Переименование сущностей и команда Rename Symbol

Теперь давайте изучим ещё один простой приём.

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

Если вручную менять каждую строку, то у такого подхода будет пара недостатков:

Использование команды меню Rename Symbol

Это меню вызывается при выполнении щелчка правой кнопкой мыши по выделенному тексту. Другой способ вызова этой команды — нажать F2 после выделения текста, который надо отредактировать.

3. Перемещение выделенных строк вверх и вниз

Иногда нужно переместить какой-то программный код или обычный текст вверх или вниз в документе. Эту задачу можно решить так:

Перемещение текста вверх и вниз

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

4. Сниппеты

В ходе написания кода нам постоянно приходится вводить с клавиатуры одни и те же повторяющиеся конструкции.

Например, HTML5-файлы всегда содержат следующую базовую структуру документа:

А при написании for-циклов на JavaScript мы всегда вводим такие фрагменты кода:

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

К счастью, VS Code даёт в наше распоряжение настраиваемый механизм автодополнения ввода. Вот как это выглядит.

Автодополнение ввода

Поговорим о том, как настроить VS Code и обзавестись тем, что показано на предыдущем рисунке.

▍Создание конфигурационного файла

Команда меню User Snippets

После этого появится следующая панель.

Панель для работы со сниппетами

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

Мы создадим локальный файл.

После выбора команды New Snippets file for ‘test’ система запросит имя файла.

Ввод имени нового файла

Конфигурационный файл мы создали, но пока он пуст.

Новый пустой конфигурационный файл

Я, чтобы вам было удобнее, записал весь вышеописанный процесс и представил его здесь в виде анимированного gif-файла.

Создание нового конфигурационного файла

▍Создание сниппетов

Конфигурационный файл хранит данные в формате JSON. Вот пример его содержимого.

Содержимое конфигурационного файла

Вот — то же самое, но уже в виде обычного текста:

Элемент «body»: […] содержит тот код, который редактор должен вставить в документ вместо введённого нами префикса. Так как этот код может состоять из множества строк, данное поле представлено массивом. Каждый элемент массива — это одна строка кода. Если «перевести» конструкцию, которую мы только что рассматривали, на язык обычного HTML-кода, то получится, что она равносильна следующему:

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

Испытание конфигурационного файла

▍Область действия сниппетов

Ограничение области действия сниппета HTML-файлами

Испытаем нашу систему снова. Попробуем префикс html5 в HTML-файле и в JS-файле.

Испытание сниппета в HTML- и в JS-файле

В JS-файле, как видно, ввод html5 ни к чему особенному не приводит. А это — именно то, что нам нужно.

▍Курсор

Давайте снова испытаем автодополнение ввода, выполняемое на основе созданного нами файла. Присмотримся к нему. Нет ли в нём каких-нибудь изъянов?

Исследование автодополнения ввода

Настройка местоположения курсора

Курсор устанавливается в нужном месте

▍Пример

А теперь, чтобы закрепить то, что мы только что изучили, давайте рассмотрим новый пример.

Можете пока не смотреть на решение этой задачи. Попытайтесь решить её самостоятельно.

В общем-то, решение этой задачи может быть представлено таким конфигурационным файлом:

Использование сниппета fori

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

Какие возможности VS Code помогают вам в повседневной работе?

Создание представлений HTML с помощью шаблонов Razor

В мире разработки мобильных приложений термин «гибридное приложение» обычно относится к приложению, которое представляет некоторые (или все) его экраны как HTML-страницы внутри размещенного элемента управления веб-просмотра.

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

Xamarin предлагает лучшие возможности обоих миров, особенно при использовании обработчика шаблонов Razor HTML. Благодаря Xamarin вы можете создавать кроссплатформенные шаблонные ПРЕДСТАВЛЕНИЯ HTML, использующие JavaScript и CSS, но также иметь полный доступ к базовым API-интерфейсам платформы и быстрой обработке с помощью C#.

В этом документе объясняется, как использовать обработчик шаблонов Razor для создания представлений HTML+JavaScript+CSS, которые можно использовать на мобильных платформах с помощью Xamarin.

Использование веб-представлений программным способом

Xamarin предоставляет полный доступ к базовым API платформы как в iOS, так и в Android, поэтому легко создавать и отображать HTML с помощью C#. Ниже показан базовый синтаксис для каждой платформы.

Отображение HTML в элементе управления UIWebView в Xamarin.iOS также занимает всего несколько строк кода:

Дополнительные сведения об использовании элемента управления UIWebView для iOS см. в описании инструкций по использованию элемента управления UIWebView.

Android

Отображение HTML в элементе управления WebView с помощью Xamarin.Android выполняется всего в нескольких строках кода:

Указание базового каталога

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

ссылаются на следующие файлы: style.css, monkey.jpg и jscript.js. Параметр базового каталога сообщает веб-представлению, где находятся эти файлы, чтобы их можно было загрузить на страницу.

Выходные данные шаблона отображаются в iOS со следующим кодом C#:

Действие сборки для всех статических файлов содержимого должно иметь значение BundleResource:

Android

Android также требует, чтобы базовый каталог передавался в качестве параметра при отображении html-строк в веб-представлении.

Действие сборки для всех статических файлов содержимого должно быть androidAsset.

Вызов C# из HTML и JavaScript

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

Если ссылка связана с внешним сервером (например, google.com), веб-представление попытается загрузить внешний веб-сайт (при условии, что установлено подключение к Интернету).

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

Действия формы следуют тому же правилу.

Вы не собираетесь размещать веб-сервер на клиенте; однако вы можете использовать те же методы взаимодействия с сервером, которые используются в современных шаблонах быстродействующего проектирования для вызова служб по протоколу HTTP GET, а также асинхронно обрабатывать ответы путем создания JavaScript (или вызова JavaScript, уже размещенного в веб-представлении). Это позволяет легко передавать данные из HTML-кода обратно в код C#, а затем отображать результаты на HTML-странице.

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

Событие ShouldStartLoad в веб-представлении в iOS можно переопределить, чтобы разрешить коду приложения обрабатывать запрос навигации (например, щелкнуть ссылку). Параметры метода предоставляют все сведения.

а затем назначьте обработчик событий:

Android

В Android просто подкласс WebViewClient, а затем реализуйте код для ответа на запрос навигации.

а затем задайте клиент в веб-представлении:

Вызов JavaScript из C #

Помимо того, что веб-представление нужно загрузить новую HTML-страницу, код C# также может запускать JavaScript на текущей отображаемой странице. Можно создавать целые блоки кода JavaScript с помощью строк C# и выполнять их или создавать вызовы методов к JavaScript, которые уже доступны на странице с помощью script тегов.

Android

Создайте код JavaScript для выполнения, а затем префиксируйте его с помощью «javascript:» и укажите веб-представлению загрузить следующую строку:

Веб-представления iOS предоставляют метод для вызова JavaScript:

Итоги

В этом разделе представлены функции элементов управления веб-представлениями как в Android, так и в iOS, которые позволяют создавать гибридные приложения с помощью Xamarin, в том числе:

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

Что такое Razor?

Razor — это модуль создания шаблонов, который был представлен с ASP.NET MVC, изначально выполняющийся на сервере и создающий HTML для работы в веб-браузерах.

Модуль шаблонов Razor расширяет стандартный синтаксис HTML с помощью C#, чтобы можно было легко выразить макет и включить таблицы стилей CSS и JavaScript. Шаблон может ссылаться на класс Model, который может быть любым пользовательским типом и свойства которого можно получить непосредственно из шаблона. Одним из основных преимуществ является возможность легко сочетать синтаксис HTML и C#.

Шаблоны Razor не ограничиваются использованием на стороне сервера, их также можно включить в приложения Xamarin. Использование шаблонов Razor вместе с возможностью программной работы с веб-представлениями позволяет создавать сложные кроссплатформенные гибридные приложения с помощью Xamarin.

Основы шаблонов Razor

Ниже показан простой шаблон Razor (RazorView.cshtml).

Обратите внимание на следующие отличия от обычного HTML-файла:

Затем окончательный вывод HTML можно создать с помощью следующего кода C#. Обратите внимание, что модель должна быть строкой «Hello World», которая будет включена в отображаемые выходные данные шаблона.

Ниже приведены выходные данные, показанные в веб-представлении в симуляторе iOS и Android Emulator:

Другие синтаксиса Razor

В этом разделе мы рассмотрим базовый синтаксис Razor, который поможет вам приступить к работе с ним. Примеры в этом разделе заполняют следующий класс данными и отображают их с помощью Razor:

Во всех примерах используется следующий код инициализации данных

Отображение свойств модели

Если модель является классом со свойствами, они легко ссылаются в шаблоне Razor, как показано в этом примере шаблона:

Это можно преобразовать в строку с помощью следующего кода:

Окончательные выходные данные показаны в веб-представлении в симуляторе iOS и Android Emulator:

Операторы C#

Более сложный C# можно включить в шаблон, например обновление свойств модели и вычисление age в этом примере:

Операторы If-else

Ветви кода можно выразить, @if как показано в этом примере шаблона.

Циклы

Также можно добавить конструкции foreach циклов. Префикс @ можно использовать в переменной цикла ( @food в данном случае) для отрисовки в HTML.

Выходные данные приведенного выше шаблона отображаются в симуляторе iOS и Android Emulator:

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

Использование шаблонов Razor с Xamarin

В этом разделе объясняется, как использовать сборку собственного гибридного приложения с помощью шаблонов решений в Visual Studio для Mac. В окне «Создание > файла>» доступно три шаблона:

Окно создания решения выглядит следующим образом для проектов iPhone и Android. Описание решения в правой области выделяет поддержку обработчика шаблонов Razor.

Содержимое решения шаблона по умолчанию для проектов iPhone и Android приведено ниже.

Шаблоны предоставляют готовую инфраструктуру приложений для загрузки шаблона Razor с объектом модели данных, обработки ввода данных и обратного взаимодействия с пользователем с помощью JavaScript.

Важные части решения:

В следующем разделе объясняется, как работают проекты.

Статическое содержимое

Статическое содержимое включает таблицы стилей CSS, изображения, файлы JavaScript или другое содержимое, которое можно связать с HTML-файлом, отображаемым в веб-представлении или ссылаться на нее.

Проекты шаблонов включают минимальную таблицу стилей для демонстрации включения статического содержимого в гибридное приложение. Таблица стилей CSS ссылается в шаблоне следующим образом:

Вы можете добавить любые необходимые файлы стилей и JavaScript, включая такие платформы, как JQuery.

Шаблоны Razor cshtml

Шаблон содержит CSHTML-файл Razor, который содержит предварительно написанный код для обмена данными между HTML/JavaScript и C#. Это позволит создавать сложные гибридные приложения, которые не просто отображают данные только для чтения из модели, но также принимают входные данные пользователя в HTML и передают его обратно в код C# для обработки или хранения.

Отрисовка шаблона

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

Вызов кода C# из шаблона

Обмен данными из преобразованного веб-представления в C# выполняется путем задания URL-адреса веб-представления, а затем перехвата запроса в C# для обработки собственного запроса без перезагрузки веб-представления.

Пример можно увидеть в том, как обрабатывается кнопка RazorView. Кнопка имеет следующий HTML-код:

Функция InvokeCSharpWithFormValues JavaScript считывает все значения из HTML-формы и задает location.href веб-представление:

При попытке перейти к веб-представлению по URL-адресу с настраиваемой схемой (например, hybrid: )

Когда собственное веб-представление обрабатывает этот запрос навигации, у нас есть возможность перехватить его. В iOS это делается путем обработки события HandleShouldStartLoad uiWebView. В Android мы просто подкласс webViewClient, используемый в форме, и переопределяем ShouldOverrideUrlLoading.

Внутренние элементы этих двух перехватчиков навигации по сути одинаковы.

Сначала проверьте URL-адрес, который веб-представление пытается загрузить, и если он не начинается с пользовательской схемы ( hybrid: ), разрешите навигацию выполняться в обычном режиме.

Для пользовательской схемы URL-адресов все в URL-адресе между схемой и «?» — это имя метода, обрабатываемого (в данном случае — UpdateLabel). Все, что в строке запроса будет рассматриваться как параметры для вызова метода:

UpdateLabel в этом примере выполняется минимальное количество операций со строкой в параметре текстового поля (добавление «C# говорит» к строке), а затем выполняется обратный вызов веб-представления.

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

Управление шаблоном из C #

Обмен данными с веб-представлением HTML из C# осуществляется путем вызова JavaScript в веб-представлении. В iOS это делается путем вызова EvaluateJavascript UIWebView:

В Android JavaScript можно вызвать в веб-представлении, загрузив JavaScript в качестве URL-адреса с помощью «javascript:» схемы URL-адресов:

Создание приложения действительно гибридной

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

HTML-код может быть отличным для создания прототипов и отображения типов вещей, которые лучше всего использовать в Интернете, например форматированный текст и адаптивный макет. Однако не все задачи подходят для HTML и JavaScript— прокрутка длинных списков данных, например, лучше работает с помощью собственных элементов управления пользовательского интерфейса (таких как UITableView в iOS или ListView на Android).

Веб-представления в шаблоне можно легко дополнить с помощью элементов управления, зависящих от платформы, — просто измените mainStoryboard.storyboard с помощью Xcode на компьютере Mac или Resources/layout/Main.axml в Android.

Пример RazorTodo

Репозиторий RazorTodo содержит два отдельных решения для отображения различий между полностью управляемым HTML-приложением и приложением, объединяющим HTML с собственными элементами управления:

Эти приложения Xamarin работают как в iOS, так и в Android, используя переносимые библиотеки классов (PCL) для совместного использования общего кода, такого как классы базы данных и модели. Шаблоны Razor .cshtml также можно включить в PCL, чтобы они легко совместно используются на разных платформах.

Оба примера приложений включают API общего доступа к Twitter и API преобразования текста в речь с собственной платформы, демонстрируя, что гибридные приложения с Xamarin по-прежнему имеют доступ ко всем базовым функциям из представлений на основе шаблонов HTML Razor.

Приложение RazorTodo использует шаблоны Razor HTML для списка и редактирования представлений. Это означает, что приложение можно создать практически полностью в общей переносимой библиотеке классов (включая базу данных и шаблоны Razor .cshtml ). На снимках экрана ниже показаны приложения iOS и Android.

Приложение RazorNativeTodo использует шаблон HTML Razor для представления редактирования, но реализует собственный список прокрутки на каждой платформе. Это обеспечивает ряд преимуществ, в том числе:

Ключевым преимуществом создания гибридных приложений с помощью Xamarin является то, что вы можете начать с полного пользовательского интерфейса на основе HTML (например, первого примера), а затем добавить функциональные возможности для конкретной платформы (как показано во втором примере). Ниже показаны экраны собственного списка и HTML Razor для редактирования на устройствах iOS и Android.

Итоги

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

Наконец, он представил примеры RazorTodo, демонстрирующие объединение веб-представлений с собственными пользовательскими интерфейсами и API.

Современный стартовый HTML-шаблон

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

Позвольте представить вам мой новый проект — современный стартовый HTML-шаблон.

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

Код проекта находится здесь.

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

Если же вы хотите повторить мой «исследовательский» путь, то можете начать со следующих ресурсов:

А если вы хотите освежить или проверить свои знания по JavaScript, то специально для этого в свободное от работы время я занимаюсь разработкой этого замечательного приложения (сам себя не похвалишь. ).

Расширения VSCode, которые облегчат разработку на JavaScript и Vue

На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка JavaScript и основанных на нем фреймворков. Вопрос выбора конкретного инструмента стоит вне этой статьи, тут же я постараюсь описать свой пользовательский опыт работы с Visual Studio Code и средствах, которые призваны облегчить жизнь JS разработчикам, в частности тем, кто использует Vue.

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

HTML & CSS

Верстка и написание стилей — это часто монотонная задача, поэтому вашу работу могут облегчить и ускорить следующие расширения:

JavaScript

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

VSCode имеет поддержку работы с git из коробки, но всё же встроенных функций хватает не всегда. Ниже приведены расширения, которые сделают работу с git немного проще:

Рабочее окружение и процесс разработки

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

Оформление редактора

Так же может быть интересно

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

Краткое руководство. Создание шаблонов ARM с помощью Visual Studio Code

Средства Azure Resource Manager для Visual Studio Code предоставляют языковую поддержку, фрагменты ресурсов и функцию автозавершения ресурсов. Эти средства помогают создавать и проверять шаблоны Azure Resource Manager (шаблоны ARM). В этом кратком руководстве показано, как с помощью расширения создать шаблон ARM с нуля. При этом вы воспользуетесь возможностями расширений, например фрагментами кода шаблона Resource Manager, функциями проверки и завершения, а также поддержкой файла параметров.

Для работы с этим кратким руководством вам необходимо установить Visual Studio Code с расширением средств Azure Resource Manager. Вам также потребуется установить и аутентифицировать Azure CLI или модуль Azure PowerShell.

Если у вас еще нет подписки Azure, создайте бесплатную учетную запись Azure, прежде чем начинать работу.

Мы рекомендуем использовать Bicep, так как он предоставляет те же возможности, что и шаблоны ARM, и имеет более простой синтаксис. Подробнее см. статью Краткое руководство. Создание BICEP-файлов с помощью Visual Studio Code.

Создание шаблона Resource Manager

Создайте и откройте файл azuredeploy.json с помощью Visual Studio Code. Введите arm в редактор кода, который инициирует фрагмент кода Azure Resource Manager для формирования шаблона Resource Manager.

В этом фрагменте кода создаются стандартные блоки для шаблона Resource Manager.

Обратите внимание, что языковой режим Visual Studio Code изменился с JSON на шаблон Azure Resource Manager. Расширение включает в себя языковой сервер, который предоставляет возможности проверки и завершения, и другие языковые службы, предназначенные для шаблонов Resource Manager.

Добавление ресурса Azure

Расширение содержит фрагменты кода для многих ресурсов Azure. С помощью этих фрагментов кода можно легко добавить ресурсы к развертыванию шаблона.

Поместите курсор в блок ресурсов шаблона, введите storage и выберите фрагмент кода arm-storage.

В результате этого действия в шаблон будет добавлен ресурс хранилища.

Вы можете переключаться между настраиваемыми свойствами в учетной записи хранения с помощью клавиши TAB.

Завершение и проверка

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

Добавление параметров шаблона

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

Если ввести одинарную кавычку ‘ внутри круглых скобок, откроется список всех параметров, определенных в шаблоне, в данном случае — storageAccountName. Выберите параметр.

Создание файла параметров

Файл параметров шаблона Resource Manager позволяет сохранять значения параметров среды и передавать их в виде группы во время развертывания. Например, у вас может быть один файл параметров со значениями для конкретной тестовой среды, а второй — для рабочей среды.

Щелкните New > All Parameters > выберите имя и расположение файла параметров.

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

Теперь, когда файл параметров сопоставлен с шаблоном, расширение проверит шаблон и файл параметров вместе. Чтобы увидеть эту проверку на практике, добавьте двухсимвольное значение в параметр storageAccountName в файле параметров и сохраните файл.

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

Установите соответствующее значение, сохраните файл и вернитесь к шаблону. Обратите внимание, что ошибка в параметре устранена.

Развертывание шаблона

Очистка ресурсов

Если ресурсы Azure больше не нужны, используйте Azure CLI или модуль Azure PowerShell, чтобы удалить группу ресурсов, созданную для краткого руководства.

Шаблоны проектов и элементов

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

шаблоны Visual Studio

При установке Visual Studio устанавливается ряд предопределенных шаблонов проектов и элементов. Эти шаблоны, такие как Веб-приложение ASP.NET и Библиотека классов, доступны для выбора при создании проекта. Шаблоны элементов, такие как файлы кода, XML-файлы, HTML-страницы и таблицы стилей, отображаются в диалоговом окне Добавление нового элемента.

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

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

Содержимое шаблона

Все шаблоны проектов и элементов, установленные с Visual Studio или созданные пользователем, работают на основе одних и тех же принципов и имеют схожее содержимое. Все шаблоны содержат следующие элементы:

Дополнительные сведения о VSTEMPLATE-файлах см. в статьях о тегах шаблона и параметрах шаблона.

Если эти файлы сжаты в ZIP-файл и помещены в соответствующую папку, Visual Studio автоматически отображает их в следующих расположениях:

Создание текста во время выполнения с помощью текстовых шаблонов T4

Текстовые строки в приложении можно создавать во время выполнения с помощью текстовых шаблонов среды выполнения Visual Studio. Компьютер, на котором выполняется приложение, не должен иметь Visual Studio. Шаблоны среды выполнения иногда называются предварительно обработанными текстовыми шаблонами, так как во время компиляции шаблон создает код, выполняемый во время выполнения.

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

Например, следующий шаблон можно использовать в приложении, которое создает HTML-отчет.

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

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

Создание текстового шаблона Run-Time в любом приложении

Создание текстового шаблона времени выполнения

В Обозреватель решений в контекстном меню проекта выберите команду «Добавить>новый элемент«.

В диалоговом окне «Добавление нового элемента » выберите шаблон текста среды выполнения. (В Visual Basic искатьобщиеэлементы>.)

Введите имя файла шаблона.

Имя файла шаблона будет использоваться в качестве имени класса в созданном коде. Поэтому оно не должно иметь пробелов или знаков препинания.

Выберите Добавить.

Создается новый файл с расширением .tt. Свойству Custom Tool присвоено значение TextTemplatingFilePreprocessor. Он содержит следующие строки:

Преобразование существующего файла в шаблон Run-Time

Хорошим способом создания шаблона является преобразование существующего примера выходных данных. Например, если приложение создаст HTML-файлы, можно начать с создания обычного HTML-файла. Убедитесь, что он работает правильно и что его внешний вид правильный. Затем добавьте его в проект Visual Studio и преобразуйте его в шаблон.

Преобразование существующего текстового файла в шаблон времени выполнения

Включите файл в проект Visual Studio. В Обозреватель решений в контекстном меню проекта выберите «Добавить>существующий элемент«.

Задайте свойству Custom Tools файла значение TextTemplatingFilePreprocessor. В Обозреватель решений в контекстном меню файла выберите пункт «Свойства«.

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

Удалите все пробелы или знаки препинания из основной части имени файла. Например, «My Web Page.tt» будет неправильным, но «MyWebPage.tt» является правильным. Имя файла будет использоваться в качестве имени класса в созданном коде.

Вставьте следующую строку в начало файла. Если вы работаете в проекте Visual Basic, замените «C#» на «VB».

Содержимое шаблона Run-Time

Директива template

Оставьте первую строку шаблона так, как это было при создании файла:

Параметр языка будет зависеть от языка проекта.

Простое содержимое

Внедренный код программы

Обратите внимание, что операторы вставляются между выражениями. Дополнительные сведения см. в статье «Написание текстового шаблона T4».

Использование шаблона

Код, созданный на основе шаблона

Обратите внимание, что дочерний файл содержит разделяемый класс, содержащий вызываемого TransformText() метода. Этот метод можно вызвать из приложения.

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

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

Чтобы поместить созданный класс в определенное пространство имен, задайте свойство custom Tool Namespace файла текстового шаблона.

Отладка текстовых шаблонов среды выполнения

Отладка и тестирование текстовых шаблонов среды выполнения так же, как и обычный код.

Точку останова можно задать в текстовом шаблоне. Если запустить приложение в режиме отладки с Visual Studio, можно выполнить пошаговое выполнение кода и оценить выражения контрольных значений обычным образом.

Передача параметров в конструкторе

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

Например, можно создать отдельный файл MyWebPageCode.cs:

В файле шаблона MyWebPage.tt можно написать следующее:

Чтобы использовать этот шаблон в приложении, выполните следующие действия.

Параметры конструктора в Visual Basic

В Visual Basic отдельный файл MyWebPageCode.vb содержит:

Файл шаблона может содержать:

Шаблон может вызываться путем передачи параметра в конструкторе:

Передача данных в свойствах шаблона

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

Использование разделяемых классов для кода

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

Сборки и ссылки

Если вы хотите импортировать пространство имен так же, как using оператор, это можно сделать с помощью директивы import :

Общая папка.

Если у вас есть текст, который совместно используется несколькими шаблонами, его можно поместить в отдельный файл и включить в каждый файл, в котором он должен отображаться:

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

Директиву include можно использовать в любом месте текста файла шаблона или включенного файла.

Наследование между текстовыми шаблонами Run-Time

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

Шаблон наследования: фрагменты в базовых методах

В приведенном ниже примере обратите внимание на следующие моменты.

Базовый класс SharedFragments определяет методы в блоках признаков класса.

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

Базовые и производные классы являются текстовыми шаблонами среды выполнения; То есть свойству Custom Tool присвоено значение TextTemplatingFilePreprocessor.

SharedFragments.tt:

MyTextTemplate1.tt:

MyProgram.cs:

Итоговые выходные данные:

Шаблон наследования: текст в базовом тексте

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

AbstractBaseTemplate1.tt:

DerivedTemplate1.tt:

Код приложения:

Полученные выходные данные:

Связанные разделы

Шаблоны времени разработки. Если вы хотите использовать шаблон для создания кода, который становится частью приложения, см. статью «Создание кода во время разработки» с помощью текстовых шаблонов T4.

Шаблоны времени выполнения можно использовать в любом приложении, где шаблоны и их содержимое определяются во время компиляции. Но если вы хотите написать расширение Visual Studio, которое создает текст из шаблонов, изменяющихся во время выполнения, см. статью «Вызов преобразования текста» в расширении VS.

Как настроить оформление Visual Studio Code

В Visual Studio Code (VSCode) темы оформления можно настроить несколькими способами. Самый простой — это установить уже готовый вариант. Поскольку выбор, действительно, очень большой, то можно подобрать наиболее привлекательный вариант. Второй способ — это воспользоваться он-лайн редактором тем, где можно самостоятельно настроить все цвета. И третий вариант — это используя уже готовую тему, внести необходимые коррективы в локальные настройки.

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

Готовые темы для Visual Studio Code

Для переключения установленных тем используются горячие клавиши Ctrl+K+T (нажать Ctrl, потом не отпуская, «K» и «T»). Дальше курсором выбираем любой вариант.

В Marketplace не очень удобно сделан предпросмотр тем, поэтому можно выбрать тему с других сайтов, например:

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

Создание своей темы для VSCode

Параметр uiTheme указывает на базовый UI — в данном примере «vs» означает светлую тему. Если вы используется темную, то нужно указать «vs-dark».

После этого в Visual Studio Code переключаемся на вкладку расширений и включаем его.

Свои настройки оформления Visual Studio Code

У готовых светлых тем существенный недостаток — низкий контраст цветов на белом фоне. Из-за этого подобрать нормальный цвет не такое простое занятие. Например многие используют светло-серый цвет текста: выгладит красиво, но для зрения получается слишком малый контраст. Другие, наоборот, ставят насыщенные цвета: синий, красный — для нас они несут ещё и смысловой оттенок, поэтому их нужно подбирать с умом. В общем, если вы такой же капризный как я, 🙂 то самым лучшим способом будет собственная настройка оформления VSCode. И делается это, на самом деле, достаточно просто.

Общий принцип

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

Оформление самого редактора

Я использую стандартную тему оформления Visual Studio Light и секция workbench.colorCustomizations у меня такая:

Параметр foreground задаёт базовый черный цвет текста. Второй параметр задает полупрозрачный желтый цвет для подсветки текущей линии. Параметров очень много: все они описаны в официальной документации Theme Color.

После сохранения settings.json изменения сразу же вступают в силу.

«Подводные камни»

Некоторые расширения могут перекрывать ваши настройки. Я столкнулся с тем, что например расширение Git (сейчас это стандартное расширение, доступное в общих настройках), изменяет цвет списка файлов. То есть я указываю цвет #000000, но он принудительно меняет их на малоконтрастный серый. В данном случае Git нашёл существующий репозиторий и решил, что изменения не заcommit’чены. Настройки оформления для Git’а другие (они есть в документации). Поэтому, если какой-то параметр вдруг не работает, то возможно его перебивает какое-то расширение.

Если расширение не нужно, то его можно просто отключить (enable).

Подсветка кода в VSCode

Покажу на примере:

Если оформление для разных элементов одно и тоже, то в scope можно их перечислить через запятую, например так (здесь два элемента):

Предусмотренных элементов очень много, более того, они ещё и имеют привязку к языку, поэтому Visual Studio Code предлагает готовый инструмент Inspect TM Scopes, который показывает всю необходимую информацию.

После этого можно поставить курсор на любой элемент и откроется окно с описанием этого элемента.

Здесь указывается текущее оформление. Строчка:

показывает какой именно элемент сейчас работает. А ниже приведена иерархия элементов:

Верхние элементы имеют более высокий приоритет. В данном примере сработал entity.name.function.php, но в коде могут встречаться и другие, например source.php.

Таким вот нехитрым способом можно настроить Visual Studio Code под любые «капризы». 🙂

How to Set Up VS Code for Web Development in A Few Simple Steps

Visual Studio Code has become the most popular source code editor out there. It is lightweight but powerful, and it is no doubt my favorite.

In this article, I am going to walk you through how to get started and set up VS Code for Web Developers.

Here’s a video you can watch if you want to supplement this article:

VS Code Setup Video

Introduction to VS Code

If you don’t yet have VS Code installed on your computer, head to code.visualstudio.com to download it. You can open the dropdown to choose the versions you want to download, but usually, the big button should do the work.

VS Code Welcome Tab

Once you have it installed and opened, the first thing you will see is a Welcome tab. Here, you’ll find 5 sections:

Welcome Tab

Start: You can choose to either create a new file or open a folder.

Recent: You can find any recently opened folders

Help: You can find some handy information. For example, the printable keyboard cheatsheet or a series of introduction videos.

Customize: You can see that you can install settings and keyboard shortcuts from other code editors like Vim or Atom. So in case you are used to using these editors at the moment, you can go ahead and check it out.

But what we want to look into is the color theme. If you select it you can see that there is a list of themes to choose from. You can also use the up and down arrow keys to preview the themes. But my favorite theme is the default one, so I am gonna stick with it.

Color Theme

The second selection is Interface Overview. If we select it, we can see the most common elements on the user interface and we can also see the shortcut to toggle the elements:

Interface Overview

The last selection is the Interactive Editor Playground. Here, you can find the highlight features from VS Code with instructions and examples.

Let’s select Emmet, for instance. With Emmet, we can write shortcuts and then expand them into a piece of code.

Emmet in Interactive Editor Playground

You can also see that in the existing example ( ul>li.item$*5 ), they tried to create an unordered list element and 5 items with a class name of item inside. But the class name also comes with numbering:

In this section, you can also find a link to the Emmet Cheat Sheet, which is super useful.

Alright, I recommend that you check out all of these features. There are a lot of them, and it’s okay if you don’t understand it all now. You can always come back in the future.

VS Code File Explorer

Terminal In VS Code

Generating HTML with Emmet in VS Code

Now let’s open the Command Palette again, and search for Format Document and select it. You can see that it add spacings between different sections and cleans up our code.

This is a super useful feature from VS Code. But we don’t want to search for Format Document all the time and we want it to format whenever we save the file.

In the Commonly Used tab, we can change the Tab size to be 2 and under Text Editor/Formatting, we can select Format on Save. Now whenever we save, the files will be properly formatted.

VS Code Extensions

Here we can filter the extensions by, for example, Most Popular or Recommended.

There are many extensions to choose from. But the first extension that we need to install is Live Server. With this, we can have a local server reload static web pages.

Live Server Extension

For example, if we go to our index.html and open the Command Palette and search for Live Server: Open with Live Server you can see that a new tab on the browser is opened.

And if we create a new element on our HTML, for example

VScode Introduction

Conclusion

There are many other useful extensions, but I will cover them in another article and video.

For now, with this introduction and setup guide, I am sure that you are ready to start your Web Development Journey.

That concludes the article. You can follow me on social media for future updates. Otherwise, stay happy coding and see you in future posts.

__________ 🐣 About me __________

Creator of devchallenges.io

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Создание кода во время разработки с помощью текстовых шаблонов T4

Текстовые шаблоны T4 во время разработки позволяют создавать программный код и другие файлы в проекте Visual Studio. Как правило, вы пишете шаблоны таким образом, чтобы они изменяли код, создаваемый в соответствии с данными из модели. Модель — это файл или база данных, содержащая ключевые сведения о требованиях приложения.

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

Модель — это источник данных, описывающий конкретный аспект приложения. Она может быть представлена в любой форме, в виде файла или базы данных. Она не должна соответствовать определенной форме, например как модель UML или модель для доменного языка (DSL). Типичные модели создаются в форме таблиц или XML-файлов.

Вероятно, вы уже знакомы с созданием кода. При определении ресурсов в RESX-файле в решении Visual Studio набор классов и методов создается автоматически. Файл ресурсов обеспечивает более простое и надежное редактирование ресурсов по сравнению с внесением изменений в классы и методы. Используя текстовые шаблоны, можно создавать код таким же образом на основе вашего собственного источника.

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

Создание текстового шаблона Design-Time T4

Создайте новый проект Visual Studio или откройте существующий.

Добавьте в проект текстовый файл шаблона и присвойте ему имя с расширением TT.

Для этого в Обозреватель решений в контекстном меню проекта выберите «Добавить>новый элемент«. В диалоговом окне «Добавление нового элемента » выберите «Текстовый шаблон » на средней панели.

Обратите внимание, что свойством custom Tool файла является TextTemplatingFileGenerator.

Откройте файл. Он будет содержать следующие директивы:

Если вы добавили шаблон в проект Visual Basic, атрибут языка будет иметь значение » VB «.

Добавьте любой текст в конец файла. Пример:

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

В Обозреватель решений разверните узел файла шаблона и найдите файл с расширением .txt. Файл содержит текст, созданный на основе шаблона.

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

Повторное создание кода

Шаблон выполняется, создавая дочерний файл, в следующих случаях:

Измените шаблон, а затем переведите фокус на другое окно Visual Studio.

при сохранении шаблона;

Щелкните «Преобразовать все шаблоны » в меню «Сборка «. Это приведет к преобразованию всех шаблонов в решении Visual Studio.

В Обозреватель решений в контекстном меню любого файла выберите команду «Запустить настраиваемое средство«. Используйте этот метод для преобразования выбранного набора шаблонов.

Вы также можете настроить проект Visual Studio таким образом, чтобы шаблоны выполнялись при изменении файлов данных, которые они читали. Дополнительные сведения см. в разделе «Автоматическое повторное создание кода».

Создание текста переменной

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

Сохраните TT-файл и снова проверьте созданный TXT-файл. В нем перечисляются квадратные корни чисел от 0 до 10.

Отладка текстового шаблона времени разработки T4

Отладка текстового шаблона

Задайте точки останова в шаблоне таким же образом, как для обычного кода.

Выберите «Отладка шаблона T4» в контекстном меню файла текстового шаблона в Обозреватель решений.

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

debug=»true» делает созданную схему кода более точной с текстовым шаблоном, вставляя дополнительные директивы нумерирования строк в созданный код. Если опустить эту строку, точки останова могут останавливать выполнение в неверном состоянии.

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

Создание кода или ресурсов для решения

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

Создание программного кода или ресурсов

Вставьте код, который создаст нужный вам код решения. Например, если требуется создать три объявления поля Integer в классе, используйте код:

Сохраните файл и проверьте созданный файл, который теперь содержит следующий код:

Создающий код и созданный текст

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

Предыдущий пример имеет две версии. В одной версии создающий код написан на языке C#. В другой версии создающий код написан на языке Visual Basic. Однако создаваемый ими текст одинаков и является классом C#.

Таким же образом можно использовать шаблон Visual C# для создания кода на любом языке. Созданный текст не обязательно должен быть на определенном языке и вообще может не быть программным кодом.

Структура текстовых шаблонов

Как правило, рекомендуется разделять код шаблонов на две части.

Ее иногда называют частью «модели», так как она создает хранимую модель и обычно считывает файл модели.

Часть, создающая текст, ( foreach(. ) <. >в примере), которая использует значения переменных.

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

Чтение файлов или других источников

Чтобы получить доступ к файлу модели или базе данных, код шаблона может использовать сборки, такие как System.XML. Чтобы получить доступ к этим сборкам, необходимо вставить директивы, такие как следующие:

Директива assembly делает указанную сборку доступной для кода шаблона так же, как и раздел References проекта Visual Studio. Ссылку не требуется включать в System.dll, так как она создается автоматически. Директива import позволяет использовать типы, не используя полные имена, тем же способом, что и директива using в обычном файле программы.

Например, после импорта System.IO можно написать следующее:

Открытие файла с относительным путем

Затем можно написать код, например:

Получение данных из Visual Studio

Текстовый шаблон выполняется в собственном домене приложений; доступ к службам предоставляется путем маршалинга. В этих обстоятельствах метод GetCOMService() надежнее, чем GetService().

Автоматическое повторное создание кода

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

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

Если вы установили пакет SDK для моделирования Visual Studio, вы можете автоматически преобразовывать все шаблоны при выполнении сборки. Для этого внесите изменения в файл проекта (CSPROJ или VBPROJ) в текстовом редакторе и добавьте следующие строки ближе к концу файла после любых других операторов :

Пакет SDK преобразования «Текстовый шаблон» и пакет SDK для моделирования Visual Studio устанавливаются автоматически при установке определенных компонентов Visual Studio. Дополнительные сведения см. в этой записи блога.

Отчеты об ошибках

Чтобы разместить сообщения об ошибках и предупреждениях в окне ошибки Visual Studio, можно использовать следующие методы:

Преобразование существующего файла в шаблон

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

Преобразование существующего файла в шаблон времени разработки

Проверьте созданный файл, чтобы убедиться, что он работает.

В Обозреватель решений измените расширение имени файла на .tt.

Проверьте следующие свойства TT-файла :

Свойство.	Параметр
Пользовательский инструмент =	TextTemplatingFileGenerator
Действие построения =	None

Вставьте следующие строки в начало файла:

Создается дочерний файл с заданным расширением. Его свойства будут правильными для данного типа файла. Например, свойство «Действие сборки » CS-файла будет компилироваться.

Убедитесь, что созданный файл содержит то же содержимое, что и исходный.

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

Источники: