|
1 | | -# html-snippets README |
| 1 | +# Advanced HTML Snippets for Visual Studio Code |
2 | 2 |
|
3 | | -This is the README for your extension "html-snippets". After writing up a brief description, we recommend including the following sections. |
| 3 | +A collection of handy HTML snippets designed to speed up your web development workflow. This extension includes basic HTML boilerplates, common HTML tags, and other useful snippets for HTML coding. |
4 | 4 |
|
5 | 5 | ## Features |
6 | 6 |
|
7 | | -Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file. |
| 7 | +- **Basic HTML5 Boilerplate**: Quickly insert a basic HTML5 structure with a single snippet. |
| 8 | +- **HTML Link Tag**: Add a link tag for external stylesheets. |
| 9 | +- **Other HTML Tags**: Includes snippets for tags like `div`, `a`, `img`, `button`, and more. |
8 | 10 |
|
9 | | -For example if there is an image subfolder under your extension project workspace: |
| 11 | +## Installation |
10 | 12 |
|
11 | | -\!\[feature X\]\(images/feature-x.png\) |
| 13 | +### Via VS Code Marketplace |
12 | 14 |
|
13 | | -> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow. |
| 15 | +1. Open **Visual Studio Code**. |
| 16 | +2. Navigate to the **Extensions** view by clicking the Extensions icon in the Activity Bar on the side of the window or pressing `Ctrl+Shift+X`. |
| 17 | +3. Search for `Advanced HTML Snippets` in the Extensions Marketplace. |
| 18 | +4. Click **Install**. |
14 | 19 |
|
15 | | -## Requirements |
| 20 | +### Manually (for development or testing) |
16 | 21 |
|
17 | | -If you have any requirements or dependencies, add a section describing those and how to install and configure them. |
| 22 | +1. Clone this repository: |
| 23 | + ```bash |
| 24 | + git clone https://github.com/your-repo/html-snippets.git |
| 25 | + ``` |
18 | 26 |
|
19 | | -## Extension Settings |
| 27 | +2. Open the project folder in Visual Studio Code. |
| 28 | +3. Press F5 to run and test the extension in a new VS Code window. |
20 | 29 |
|
21 | | -Include if your extension adds any VS Code settings through the `contributes.configuration` extension point. |
| 30 | +## Usage |
| 31 | +Once installed, you can use the following snippets by typing their prefix and hitting Tab to expand them: |
22 | 32 |
|
23 | | -For example: |
| 33 | +### Available Snippets |
24 | 34 |
|
25 | | -This extension contributes the following settings: |
| 35 | +- !html5: Inserts a basic HTML5 boilerplate structure. |
| 36 | +- !!html5: Inserts a advanced HTML5 boilerplate structure. |
| 37 | +- link: Adds an HTML <link> tag for including an external stylesheet. |
| 38 | +- div: Inserts a <div> tag. |
| 39 | +- a: Inserts an <a> tag for links. |
| 40 | +- img: Adds an <img> tag for images. |
| 41 | +- button: Inserts a <button> tag. |
26 | 42 |
|
27 | | -* `myExtension.enable`: Enable/disable this extension. |
28 | | -* `myExtension.thing`: Set to `blah` to do something. |
| 43 | +### Example: |
| 44 | +1. In an HTML file, type !html5 and press Tab. |
| 45 | +2. The following code will be inserted: |
29 | 46 |
|
30 | | -## Known Issues |
| 47 | +<img src="https://github.com/Codegyan-LLC/advanced-html-snippets |
| 48 | +/blob/main/images/code.png" width="600" alt="basic html snippets"> |
31 | 49 |
|
32 | | -Calling out known issues can help limit users opening duplicate issues against your extension. |
33 | 50 |
|
34 | | -## Release Notes |
35 | | - |
36 | | -Users appreciate release notes as you update your extension. |
37 | | - |
38 | | -### 1.0.0 |
39 | | - |
40 | | -Initial release of ... |
41 | | - |
42 | | -### 1.0.1 |
43 | | - |
44 | | -Fixed issue #. |
45 | | - |
46 | | -### 1.1.0 |
47 | | - |
48 | | -Added features X, Y, and Z. |
49 | | - |
50 | | ---- |
51 | | - |
52 | | -## Working with Markdown |
53 | | - |
54 | | -You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts: |
55 | | - |
56 | | -* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux). |
57 | | -* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux). |
58 | | -* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets. |
59 | | - |
60 | | -## For more information |
61 | | - |
62 | | -* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown) |
63 | | -* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/) |
64 | | - |
65 | | -**Enjoy!** |
0 commit comments