Snippets vscode

Изо дня в день, из раза в раз мы пишем шаблонный код и как было бы круто это автоматизировать, самый простой способ - snippets

Поискал готовое решение для vue 3 и не нашел что мне нужно, решил не копаться в плагинах, а написать свой набор сниппетов, это оказалось очень просто для vscode.

vscode

1. ctrl + shift + p
2. Snippets: configure snippets
3. Выбрать существующий файл либо создать новый глобальный файл или для только для текущего проекта
4. Пишем свой сниппет

Формат и примеры

{
	"Vue 3 Component with TS base props and SCSS Module": {
		"prefix": "v3c",
		"body": [
			"<script setup lang=\"ts\">",
			"defineProps<{",
			"    testProp?: boolean;",
			"}>();",
			"</script>",
			"",
			"<template>",
			"    <div :class=\"\\$style[`${1:component-name}`]\"></div>",
			"</template>",
			"",
			"<style src=\"./${1:component-name}.scss\" lang=\"scss\" module />"
		],
		"description": "Vue 3 component template with TypeScript and SCSS module"
	},
	"Vue 3 Component with TS, with default props, and SCSS Module": {
		"prefix": "v3cd",
		"body": [
			"<script setup lang=\"ts\">",
			"withDefaults(",
			"    defineProps<{",
			"        testProp?: boolean;",
			"    }>(),",
			"    {",
			"        testProp: false",
			"    }",
			");",
			"</script>",
			"",
			"<template>",
			"    <div :class=\"\\$style[`${1:component-name}`]\"></div>",
			"</template>",
			"",
			"<style src=\"./${1:component-name}.scss\" lang=\"scss\" module />"
		],
		"description": "Vue 3 component template with TypeScript, props, and SCSS module"
	}
}

Заключение

Автоматизация рутинных задач — это один из ключевых способов повысить продуктивность разработки. Сниппеты в VS Code — это простой, но мощный инструмент, который позволяет значительно ускорить процесс написания шаблонного кода. В случае с Vue 3, где часто приходится создавать компоненты с TypeScript и SCSS модулями, использование сниппетов становится практически необходимостью.

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

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