vs code шаблоны кода
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.
Also, instead of using the snippet argument value to define your snippet inline, you can reference an existing snippet by using the langId and name arguments. The langId argument is the name of the JSON user snippet file and name is the snippet’s unique name from this file:
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.
Как сделать свой сниппет в Visual Studio Code
Пошаговая инструкция о том, как создавать свои собственные сниппеты для редактора VSCode: типы сниппетов, правила для названий, структура кода сниппета, примеры
Так что начнём с того, как создавать сниппеты в редакторе Visual Studio Code.
# Создание сниппета в Visual Studio Code
В меню редактора проходим по следующему пути:
Файл → Параметры → Фрагменты кода пользователя
После выбора типа сниппета, появится окно сохранения сниппета. Здесь необходимо задать название для файла со сниппетом(-ами).
Обратите внимание, что в VSCode есть правила для названий файлов со сниппетами.
# Типы сниппетов
В VSCode сниппеты бывают двух типов:
Такой подход снижает нагрузку на работу редактора.
# Код сниппета в VSCode
Как пример, вот файл глобальной видимости main.code-snippets с тремя сниппетами:
# Настройки сниппета
Весь код с настройками пишется внутри глобальный фигурных кавычек
Сначала идёт имя сниппета. В примере это: jQuery, Font_Awesome_5 и Image Placeholder. Как видно можно применять пробелы и нижние подчёркивания.
Каждый сниппет имеет ряд настроек:
Для сниппетов .json применяются такие же настройки кроме scope.
Сниппеты работают сразу после сохранения и не требуют перезагрузки редактора.
# Установка курсора и заполнитель
В сниппетах можно указывать место для установки курсора после развёртывания сниппета и переход курсора при нажатии таб.
В указанном выше примере со сниппетами, в сниппете Image Placeholder настройка body имеет следующий фрагмент:
# Примеры
Мне вот не нравится, что по умолчанию он прописывает
после чего у меня браузер гугл-хром пытается постоянно перевести страницу на русский язык. Приходилось редактировать на
Поэтому я запилил свой сниппет, чтобы развёртывал начальную разметку HTML так как мне нужно.
Удаляем всё что есть в этом файле (если правильно помню там закомментированая инструкция по созданию сниппетов) и вставляем такой код:
Не забудьте после вставки сохранить.
После сниппета с начальной загрузкой HTML на русском, вы можете задать разумный вопрос: «А где в сниппете Meta Keywords и Meta Description?»
Я их не стал вносить в начальную HTML-разметку, т.к. эти теги нужны для тех страниц которые выкладываются в интернет, а то что пишется в редакторе часто используется как тестовая площадка и не всегда попадает в интернет.
В упомянутом в предыдущем комментарии файле html.json я отдельно прописываю сниппеты для Meta Keywords и Meta Description.
Вот такой код для этих двух сниппетов:
Теперь чтобы вывести
Запоминать префиксы этих сниппетов хоть и не сложно, но необязательно. Достаточно начать набирать meta и редактор сам предложит варианты в всплывающей подсказке:
можно выбирать вариант как курсором, так и стрелками на клавиатуре + Enter. Ну или до конца набрать префикс сниппета и нажать клавишу Tab.
Так как два этих тега тесно связаны, то их можно объединить в один сниппет. Наверное так будет даже правильней.
И ещё один вот такой сниппет для вставки фавикона:
Для вывода набираем favicon и жмём Tab.
Самые полезные плагины и красивейшие темы для 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 теперь будет приносить вам намного больше удовольствия. Удачи!
9 полезных плагинов VS Code для вёрстки
Visual Studio Code — один из самых популярных редакторов кода. Многие разработчики предпочитают его, так как он удобен в использовании и содержит множество полезных расширений, с помощью которых легко оптимизировать работу.
Полезные плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы. Чтобы установить расширения, необходимо перейти во вкладку «Extensions» и с помощью поиска найти нужный плагин.
Сделали подборку популярных и полезных плагинов VS Code.
Emmet
Много разных фишек, с которыми можно разобраться и ускорить процесс работы. Поддержка emmet встроена прямо в редактор, устанавливать не нужно.
Material Theme
Приятная тема для редактора с разными акцентными цветами.
Live Server
Чтобы сразу увидеть результат работы. Нужно навести на строчку кода, нажать на правую кнопку мыши, выбрать «Open with Live Server» и в браузере отобразится страница, которая автоматически будет перезагружаться.
Это очень удобно, так как любые изменения будут отображаться без обновления страницы. Не забывайте отключать плагин с помощью «Stop Live Server»
CSS Peek
Показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом CSS-файле.
Bracket pair colorizer
Окрашивает открывающие и закрывающие скобки в определённые цвета, что минимизирует количество ошибок и позволяет быстрее разобраться в коде.
Prettier — code formatter
Приводит любой код в нормальный вид за считанные секунды. Комбинация Ctrl+Shift+P отформатирует документ и задаст структуру коду.
Auto rename tag
Удобен для переименования тегов в HTML. Если тег повторяется, при замене одного с помощью плагина, все другие будут переименованы автоматически.
Path autocomplete
Показывает возможный путь к файлу в кавычках. Не нужно искать папку вручную, путь будет предложен автоматически.
HTML CSS Support
Если вы используете много классов и тегов, могут возникнуть ошибки при их написании. Плагин автоматически дополняет название ID или HTML-атрибута для определений, найденных в рабочей области, на которые ссылается link.
Используйте эти плагины на курсе по вёрстке сайтов
Запишитесь на ближайший поток курса «HTML и CSS. Профессиональная вёрстка сайтов», чтобы попробовать всё на практике.
Нажатие на кнопку — согласие на обработку персональных данных
10 расширений для VS Code, без которых я не могу программировать
VS Code — мой любимый редактор кода. Это — самый популярный из существующих редакторов, возможности которого можно расширять практически до бесконечности. И, что удивительно, разработала его компания Microsoft. Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code. Одна из сильных сторон VS Code — это система расширений. Она позволяет создавать расширения буквально на все случаи жизни. Хочу рассказать вам о моём топ-10 расширений для VS Code.
1. Beautify
Расширение Beautify позволяет форматировать html-, js-, css-, JSON- и sass-код. Параметрами форматирования можно управлять. Это расширение является надстройкой над стандартной системой js-beautify и позволяет разработчику форматировать код именно так, как ему нужно.
2. Better Comments
Расширение Better Comments позволяет расширить возможности по работе с комментариями. В частности, оно позволяет делить комментарии на категории. Это могут быть уведомления, запросы, списки дел, примечания.
Использование Better Comments
3. Bookmarks
Расширение Bookmarks — это настоящий спасательный круг для программистов. Особенно для тех, которые потерялись среди тысяч строк кода. Это расширение позволяет прикреплять к строкам кода закладки. Если у строки кода есть закладка — к этой строке можно легко перейти, воспользовавшись списком закладок.
4. Bracket Pair Colorizer 2
Расширение Bracket Pair Colorizer 2 позволяет раскрашивать скобки, что облегчает нахождение пар открывающих и закрывающих скобок. Это очень полезно в тех случаях, когда приходится работать с вложенными друг в друга программными конструкциями.
Пары скобок выделены цветами
5. Format in Context Menus
Расширение Format in Context Menus позволяет форматировать файлы, выделяя их в боковой панели и вызывая команду контекстного меню. Это особенно удобно в тех случаях, когда имеется множество файлов, которые нужно отформатировать, но при этом в имеющемся окружении нет поддержки средств для форматирования и линтинга кода.
Работа с Format in Context Menus
6. Git Graph
Расширение Git Graph позволяет просматривать структуру репозитория и, пользуясь этой структурой, выполнять различные операции. Это расширение поддаётся тонкой настройкой и обладает множеством возможностей. Вероятно, для того, чтобы как следует его описать, понадобится целая отдельная статья.
Работа с Git Graph
7. GitLens
Расширение GitLens помогает выяснять авторство кода с использованием аннотаций git blame и линз. Это расширение, кроме прочего, позволяет очень удобно просматривать содержимое репозиториев и узнавать полезные сведения о коде.
8. Indent Rainbow
Расширение Indent Rainbow позволяет раскрашивать отступы, выделяя разными цветами отступы разных уровней. Это особенно полезно при работе с глубоко вложенными конструкциями в языках наподобие Python.
9. Path Intellisense
Расширение Path Intellisense оснащает редактор возможностями по автозавершению путей к файлам. Хотя VS Code поддерживает автозавершение путей и без расширений, эта возможность ограничена только HTML-, CSS- и JavaScript-файлами. Благодаря данному расширению автозавершением путей можно пользоваться при работе с любыми файлами и любыми языками.
Работа с Path Intellisense
10. Total Lines
Расширение Total Lines — это маленький удобный инструмент, который выводит в статус-баре сведения о количестве строк в открытом файле. Это — приятное дополнение к моей коллекции расширений.
А какими расширениями для VS Code пользуетесь вы?
Напоминаем, что у нас продолжается конкурс прогнозов, в котором можно выиграть новенький iPhone. Еще есть время ворваться в него, и сделать максимально точный прогноз по злободневным величинам.