|
1 | | -# Vuetify |
| 1 | +# Vuetify for VS Code |
2 | 2 |
|
3 | 3 | [](https://marketplace.visualstudio.com/items?itemName=vuetify.vuetify) [](https://marketplace.visualstudio.com/items?itemName=vuetify.vuetify) [](https://kermanx.com/reactive-vscode/) |
4 | 4 |
|
5 | | -A VS Code extension created with [reactive-vscode](https://kermanx.com/reactive-vscode/). |
| 5 | +The official VS Code extension for [Vuetify](https://vuetifyjs.com/). |
6 | 6 |
|
7 | | -## Directory Structure |
| 7 | +## Features |
8 | 8 |
|
9 | | -- `package.json` - this is the manifest file in which you declare your extension and command. |
10 | | -- `src/extension.ts` - this is the main file where you write your extension. |
| 9 | +### ⚡️ Snippets |
| 10 | +Boost your productivity with auto-generated snippets for all Vuetify components. Simply type `v-` followed by the component name (e.g., `v-btn`, `v-card`). |
11 | 11 |
|
12 | | -## Get started |
| 12 | +### 📚 Documentation Integration |
| 13 | +Access Vuetify documentation directly from your editor: |
| 14 | +- **Hover**: Hover over any Vuetify component tag to see links to its API and Component documentation. |
| 15 | +- **Context Menu**: Right-click on a component and select **Vuetify > Open API/Component Documentation**. |
| 16 | +- **Quick Fix**: Use the lightbulb icon (Code Actions) to quickly open docs. |
13 | 17 |
|
14 | | -- Open this repository in VS Code. |
15 | | -- Run `pnpm install` to install the dependencies. |
16 | | -- Run `pnpm dev` to compile the extension and watch for changes. |
17 | | -- Press `F5` to open a new window with your extension loaded. |
18 | | -- Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`. |
19 | | -- Set breakpoints in your code inside `src/extension.ts` to debug your extension. |
20 | | -- Find output from your extension in the debug console. |
| 18 | +### 🚀 Project Creation |
| 19 | +Start a new project easily with the **Vuetify: Create Project** command. |
21 | 20 |
|
22 | | -## Make changes |
| 21 | +## Commands |
23 | 22 |
|
24 | | -- You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`. |
25 | | -- You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. |
| 23 | +- `Vuetify: Create Project` - Scaffold a new Vuetify project. |
| 24 | +- `Vuetify: Open API Documentation` - Open the API docs for the component under the cursor. |
| 25 | +- `Vuetify: Open Component Documentation` - Open the guide page for the component under the cursor. |
26 | 26 |
|
27 | | -## Go further |
| 27 | +## Development |
28 | 28 |
|
29 | | -- [Follow UX guidelines](https://code.visualstudio.com/api/ux-guidelines/overview) to create extensions that seamlessly integrate with VS Code's native interface and patterns. |
30 | | -- [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace. |
31 | | -- Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration). |
| 29 | +This extension is built with [reactive-vscode](https://kermanx.com/reactive-vscode/). |
| 30 | + |
| 31 | +### Directory Structure |
| 32 | + |
| 33 | +- `package.json` - Manifest file declaring the extension and commands. |
| 34 | +- `src/extension.ts` - Main entry point. |
| 35 | +- `src/commands/` - Command implementations. |
| 36 | +- `src/providers.ts` - Hover and Code Action providers. |
| 37 | + |
| 38 | +### Get Started |
| 39 | + |
| 40 | +1. Open this repository in VS Code. |
| 41 | +2. Run `pnpm install` to install dependencies. |
| 42 | +3. Run `pnpm dev` to compile and watch for changes. |
| 43 | +4. Press `F5` to open a new window with the extension loaded. |
| 44 | +5. Set breakpoints in `src/extension.ts` to debug. |
| 45 | + |
| 46 | +### Make Changes |
| 47 | + |
| 48 | +- Relaunch the extension from the debug toolbar after changing code. |
| 49 | +- Reload (`Ctrl+R` or `Cmd+R`) the VS Code window to apply changes. |
| 50 | +x |
0 commit comments