|
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