Frontend Framework Snippets

A VS Code extension that provides useful code snippets for various frontend frameworks including React, React Native, JSX, TSX, Vue, Svelte, and Astro.

Features

This extension includes snippets for:

• React (JavaScript & TypeScript)
• React Native
• Vue.js (Vue 2 & Vue 3)
• Svelte
• Astro

Snippet Prefixes

React Snippets

React Native Snippets

TypeScript React Snippets

Vue Snippets

Svelte Snippets

Astro Snippets

Installation

1. Open VS Code
2. Press Ctrl+P / Cmd+P to open the Quick Open dialog
3. Type ext install frontend-framework-snippets
4. Press Enter and restart VS Code

Usage

1. Open a file with an appropriate extension (js, jsx, ts, tsx, vue, svelte, astro)
2. Type one of the snippet prefixes
3. Press Tab or Enter to insert the snippet

Examples

React Arrow Function Component with Export (rafce)

import React from "react";

const ComponentName = () => {
  return (
    <>
      <div>ComponentName</div>
    </>
  );
};

export default ComponentName;

Vue 3 Component with script setup (v3ssetup)

<script setup>
import { ref, reactive } from "vue";
</script>

<template>
  <div></div>
</template>

<style scoped></style>

Svelte Component with script setup (svelte)

<script>

</script>

<main>

</main>

<style>
  main {
   text-align: center;
   padding: 1em;
   margin: 0 auto;
}
</style>

## Contributing

Feel free to submit issues or pull requests on the [GitHub repository](https://github.com/yourusername/frontend-framework-snippets).

## License

This extension is licensed under the [MIT License](https://github.com/yourusername/frontend-framework-snippets/blob/HEAD/LICENSE).