Code Snippet Extension

This extension is a personal project developed based on my own needs and experiences at META. While it may not be suitable for everyone, I have found it to be a valuable tool for standardizing and streamlining my coding workflow.

Purpose

The Code Snippet Extension aims to provide a convenient way to quickly insert commonly used code snippets into files. By defining snippets with specific prefixes and associating them with file extensions(how a file ends not necessarly the extenstions only), developers can easily insert preformatted code segments that align with their preferred coding patterns or project conventions.

Key Features

• Easy configuration of code snippets for different file extensions/endings.
• Uses that standard code snippets defined in the user or workspace settings
• Simple and intuitive way to insert snippets using prefix matching.
• Promotes code standardization and consistency.
• Reduces repetitive typing and speeds up development.

Usage

1. Install the Code Snippet Extension in Visual Studio Code.
2. Configure the desired code snippets in the settings.json file of your workspace or user settings. Example configuration:

{
  "codeSnippetExtension.snippets": {
    ".tsx": {
      "Custom Hook": "Typescript Custom Hook",
      "React Component": "Typescript React Component",
      "React Component Test": "Typescript React Component Test"
    },
    ".js": {
      "Custom JS": "rc"
    },
    ".test": {
      "Test File": "rct"
    }
  }
}

3. Create a .code-snippets file in your workspace with the predefined code snippets. Example:

To generate he body content from a standard code you could you the followign online tool https://snippet-generator.app/

{
  "Typescript Custom Hook": {
    "prefix": "ch",
    "body": [
      "import * as React from \"react\";",
      "",
      "type ${TM_FILENAME_BASE}Props = {",
      "",
      "}",
      "",
      "export default function ${TM_FILENAME_BASE}(props: ${TM_FILENAME_BASE}Props): React.ReactElement {",
      "  return <div />;",
      "}"
    ],
    "description": "Custom React Hook"
  },
  "Typescript React Component": {
    "prefix": "rc",
    "body": [
      "import * as React from \"react\";",
      "",
      "type ${TM_FILENAME_BASE}Props = {",
      "",
      "}",
      "",
      "export default function ${TM_FILENAME_BASE}(props: ${TM_FILENAME_BASE}Props): React.ReactElement {",
      "  return <div />;",
      "}"
    ],
    "description": "React Component"
  },
  "Typescript React Component Test": {
    "prefix": "rct",
    "body": [
      "/* Test file code snippet */",
      "/* Test file code snippet */",
      "/* Test file code snippet */"
    ],
    "description": "React Component Test"
  }
}

4. Use the extension by either of the following methods:

• Press the designated keybinding for executing code snippets.
• Right-click in the active text editor and select the desired code snippet from the context menu.
• Create a new file with a supported extension, and the extension will automatically prompt you to choose a code snippet.

Contributions

While this extension is primarily developed for personal use, I welcome contributions, suggestions, and feedback from the developer community. If you have any ideas, bug reports, or feature requests, please feel free to submit them to the GitHub repository of this extension.

License

This extension is released under the MIT License.

Disclaimer

Please note that this extension is tailored to my personal needs and preferences. While it has proven beneficial for me, it may not be suitable for every developer or project. Use it at your own discretion, and consider customizing it to fit your specific requirements.

Thank you for considering the Code Snippet Extension! I hope it proves useful to you as it has been for me. If you have any questions or require further assistance, please don't hesitate to reach out. Happy coding!