Skip to content

Commit 0c4c509

Browse files
johnsoncodehkjohnsoncodehk
authored
docs: document all packages with consistent README structure (#5953)
1 parent df67002 commit 0c4c509

File tree

10 files changed

+955
-223
lines changed

10 files changed

+955
-223
lines changed

‎README.md‎

Lines changed: 74 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,63 @@
33
<p>
44
<a href="https://marketplace.visualstudio.com/items?itemName=Vue.volar"><img src="https://img.shields.io/visual-studio-marketplace/v/Vue.volar?labelColor=18181B&color=1584FC" alt="Version"></a>
55
<a href="https://marketplace.visualstudio.com/items?itemName=Vue.volar"><img src="https://img.shields.io/visual-studio-marketplace/i/Vue.volar?labelColor=18181B&color=1584FC" alt="Downloads"></a>
6-
<a href="https://github.com/vuejs/language-tools/tree/master/LICENSE"><img src="https://img.shields.io/github/license/vuejs/language-tools.svg?labelColor=18181B&color=1584FC" alt="License"></a>
6+
<a href="https://github.com/vuejs/language-tools/blob/master/LICENSE"><img src="https://img.shields.io/github/license/vuejs/language-tools.svg?labelColor=18181B&color=1584FC" alt="License"></a>
77
</p>
88

99
> ⚡ Vue language toolset with native TypeScript performance based-on [Volar.js](https://volarjs.dev/)
1010
1111
💬 **#language-tools** on our [Discord Server](https://discord.gg/vue)
1212

13+
## Quick Start
14+
15+
### For VSCode Users
16+
17+
Install the [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension to get full Vue language support.
18+
19+
### Command-Line Type Checking
20+
21+
```bash
22+
npm install vue-tsc typescript --save-dev
23+
```
24+
25+
```json
26+
{
27+
"scripts": {
28+
"type-check": "vue-tsc --noEmit"
29+
}
30+
}
31+
```
32+
1333
## Packages
1434

15-
- [Vue (Official)](https://github.com/vuejs/language-tools/tree/master/extensions/vscode) \
16-
*Vue, Vitepress, petite-vue language support extension for VSCode*
17-
- [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) \
18-
*Type-check and dts build command line tool*
19-
- [vue-component-meta](https://github.com/vuejs/language-tools/tree/master/packages/component-meta) \
20-
*Component props, events, slots types information extract tool*
21-
- [`@vue/language-server`](/packages/language-server/) \
22-
*The language server itself*.
23-
- [`@vue/typescript-plugin`](/packages/typescript-plugin/) \
24-
*TypeScript LanguageService Plugin for Vue*.
35+
### For End Users
36+
37+
| Package | Description |
38+
| :--- | :--- |
39+
| [Vue (Official)](./extensions/vscode) | Vue, Vitepress, petite-vue language support extension for VSCode |
40+
| [vue-tsc](./packages/tsc) | Type-check and dts build command line tool |
41+
42+
### For Editor Integration
43+
44+
| Package | Description |
45+
| :--- | :--- |
46+
| [@vue/language-server](./packages/language-server) | The language server itself |
47+
| [@vue/language-service](./packages/language-service) | Language service plugin collection |
48+
| [@vue/typescript-plugin](./packages/typescript-plugin) | TypeScript language service plugin |
49+
50+
### Core Module
51+
52+
| Package | Description |
53+
| :--- | :--- |
54+
| [@vue/language-core](./packages/language-core) | SFC parsing and virtual code generation |
55+
56+
### Helper Tools
57+
58+
| Package | Description |
59+
| :--- | :--- |
60+
| [vue-component-meta](./packages/component-meta) | Component props, events, slots types information extract tool |
61+
| [vue-component-type-helpers](./packages/component-type-helpers) | Component type helper utilities |
62+
| [@vue/language-plugin-pug](./packages/language-plugin-pug) | Pug template support |
2563

2664
## Community Integration
2765

@@ -59,11 +97,26 @@
5997
*Vue language server configuration for Eclipse*
6098

6199
<!-- Editor link: https://www.mermaidchart.com/app/projects/c62d8944-0e06-47f0-a8de-f89a7378490f/diagrams/91fd02c0-5c91-4f72-a8b4-7af21b7c4d86/version/v0.1/edit -->
62-
63100
<a href="https://www.mermaidchart.com/raw/91fd02c0-5c91-4f72-a8b4-7af21b7c4d86?theme=light&version=v0.1&format=svg">
64101
<img src="https://www.mermaidchart.com/raw/91fd02c0-5c91-4f72-a8b4-7af21b7c4d86?theme=light&version=v0.1&format=svg"/>
65102
</a>
66103

104+
## `vueCompilerOptions`
105+
106+
Configure Vue compiler options in `tsconfig.json`:
107+
108+
```jsonc
109+
{
110+
"compilerOptions": { /* ... */ },
111+
"vueCompilerOptions": {
112+
"target": 3.5,
113+
"strictTemplates": true
114+
}
115+
}
116+
```
117+
118+
For detailed options, please refer to the [@vue/language-core](./packages/language-core) documentation.
119+
67120
## Contribution Guide
68121

69122
If you want to work on the volar extension follow these commands to set up your local development environment.
@@ -78,6 +131,7 @@ npm run build
78131
```
79132

80133
The recommended way to develop the volar extension is to use the [Debug Tools](https://code.visualstudio.com/Docs/editor/debugging) provided by VSCode.
134+
81135
Alternatively, you can run one of the scripts defined in the [package.json](https://github.com/vuejs/language-tools/blob/master/package.json) file.
82136

83137
❗ You should always use the debug launch configs or package.json scripts defined in the root of the project.
@@ -86,12 +140,16 @@ Additional info for contributing to open source projects can be found here: http
86140

87141
To develop with upstream Volar.js modules, you can setup a workspace with https://github.com/volarjs/workspace.
88142

89-
## ❤️ Thanks to Our Sponsors
143+
## ❤️ Sponsors
90144

91145
This project is made possible thanks to our generous sponsors:
92146

93147
<p align="center">
94-
<a href="https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.svg">
95-
<img src="https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.png"/>
96-
</a>
148+
<a href="https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.svg">
149+
<img src="https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.png"/>
150+
</a>
97151
</p>
152+
153+
## License
154+
155+
[MIT](./LICENSE) License

‎extensions/vscode/README.md‎

Lines changed: 108 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,119 @@
11
# Vue (Official)
22

3-
## Quick Start
3+
<p>
4+
<a href="https://marketplace.visualstudio.com/items?itemName=Vue.volar"><img src="https://img.shields.io/visual-studio-marketplace/v/Vue.volar?labelColor=18181B&color=1584FC" alt="Version"></a>
5+
<a href="https://marketplace.visualstudio.com/items?itemName=Vue.volar"><img src="https://img.shields.io/visual-studio-marketplace/i/Vue.volar?labelColor=18181B&color=1584FC" alt="Downloads"></a>
6+
</p>
7+
8+
Vue language support extension for VSCode, providing a full development experience for Vue Single File Components (SFCs).
9+
10+
## Features
11+
12+
- **Syntax Highlighting** - Supports HTML, CSS, JavaScript, TypeScript, Pug, SCSS, Less, etc. in Vue SFCs
13+
- **Intelligent Completion** - Auto-completion for components, props, events, slots, and directives
14+
- **Type Checking** - Full TypeScript type inference, including expressions in templates
15+
- **Error Diagnostics** - Real-time display of Vue compiler errors
16+
- **Code Navigation** - Go to definition, find references
17+
- **Refactoring** - Rename, extract component
18+
- **Formatting** - Format SFCs by block
19+
20+
## Installation
21+
22+
Search for `Vue (Official)` or `Vue.volar` in the VSCode extension marketplace and click install.
23+
24+
## Configuration
25+
26+
### Editor Settings
27+
28+
| Option | Type | Default | Description |
29+
| :--- | :--- | :--- | :--- |
30+
| `vue.editor.focusMode` | `boolean` | `false` | Enable focus mode |
31+
| `vue.editor.reactivityVisualization` | `boolean` | `true` | Show reactivity variable visualization |
32+
| `vue.editor.templateInterpolationDecorators` | `boolean` | `true` | Show template interpolation decorators |
33+
34+
### Completion Settings
35+
36+
| Option | Type | Default | Description |
37+
| :--- | :--- | :--- | :--- |
38+
| `vue.suggest.componentNameCasing` | `string` | `preferPascalCase` | Component name casing style (`preferKebabCase`, `preferPascalCase`, `alwaysKebabCase`, `alwaysPascalCase`) |
39+
| `vue.suggest.propNameCasing` | `string` | `preferCamelCase` | Prop name casing style (`preferKebabCase`, `preferCamelCase`, `alwaysKebabCase`, `alwaysCamelCase`) |
40+
| `vue.suggest.defineAssignment` | `boolean` | `true` | Suggest assignments for `defineProps`, etc. |
41+
42+
### Auto-Insert Settings
43+
44+
| Option | Type | Default | Description |
45+
| :--- | :--- | :--- | :--- |
46+
| `vue.autoInsert.dotValue` | `boolean` | `false` | Auto-insert `.value` |
47+
| `vue.autoInsert.bracketSpacing` | `boolean` | `true` | Auto-insert spaces in `{{ }}` |
48+
49+
### Inlay Hints Settings
50+
51+
| Option | Type | Default | Description |
52+
| :--- | :--- | :--- | :--- |
53+
| `vue.inlayHints.destructuredProps` | `boolean` | `false` | Show types for destructured props |
54+
| `vue.inlayHints.inlineHandlerLeading` | `boolean` | `false` | Show parameters for inline handlers |
55+
| `vue.inlayHints.missingProps` | `boolean` | `false` | Show missing required props |
56+
| `vue.inlayHints.optionsWrapper` | `boolean` | `false` | Show Options API wrapper |
57+
| `vue.inlayHints.vBindShorthand` | `boolean` | `false` | Show v-bind shorthand hints |
58+
59+
### Formatting Settings
60+
61+
| Option | Type | Default | Description |
62+
| :--- | :--- | :--- | :--- |
63+
| `vue.format.script.enabled` | `boolean` | `true` | Enable script block formatting |
64+
| `vue.format.template.enabled` | `boolean` | `true` | Enable template block formatting |
65+
| `vue.format.style.enabled` | `boolean` | `true` | Enable style block formatting |
66+
| `vue.format.wrapAttributes` | `string` | `auto` | Attribute wrapping style |
67+
68+
### Server Settings
69+
70+
| Option | Type | Default | Description |
71+
| :--- | :--- | :--- | :--- |
72+
| `vue.server.path` | `string` | - | Custom language server path |
73+
| `vue.server.includeLanguages` | `string[]` | `["vue"]` | Language IDs to process |
74+
| `vue.trace.server` | `string` | `off` | Server trace level |
75+
76+
## Commands
77+
78+
| Command | Description |
79+
| :--- | :--- |
80+
| `Vue: Welcome` | Open the welcome page |
81+
| `Vue: Restart Server` | Restart the language server |
82+
83+
## Using Workspace TypeScript
84+
85+
It is recommended to use the TypeScript version from your project instead of the one built into VSCode:
86+
87+
1. Create `.vscode/settings.json` in your project root
88+
2. Add the following settings:
89+
90+
```json
91+
{
92+
"typescript.tsdk": "node_modules/typescript/lib",
93+
"typescript.enablePromptUseWorkspaceTsdk": true
94+
}
95+
```
96+
97+
## Troubleshooting
98+
99+
If you encounter any issues, you can try the following steps:
4100

5-
- [create-vue](https://github.com/vuejs/create-vue)
6-
- [Vitesse](https://github.com/antfu/vitesse)
7-
- [petite](https://github.com/JessicaSachs/petite)
8-
- [volar-starter](https://github.com/johnsoncodehk/volar-starter) (For bug report and experiment features testing)
101+
1. **Reload Window**: Run the `Developer: Reload Window` command in VSCode
102+
2. **Check `vue-tsc`**: Run `npx vue-tsc --noEmit` in the command line to check for type errors
103+
3. **Check Output Channel**: In VSCode's "Output" panel, select `Vue Language Server` to see if there are any error messages
9104

105+
If the problem persists, feel free to open an issue on [GitHub Issues](https://github.com/vuejs/language-tools/issues).
10106

11-
## ❤️ Thanks to Our Sponsors
107+
## ❤️ Sponsors
12108

13-
This project is made possible thanks to our generous sponsors:
109+
This project's continued development is made possible by our generous sponsors:
14110

15111
<p align="center">
16-
<a href="https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.svg">
17-
<img src="https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.png"/>
18-
</a>
112+
<a href="https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.svg">
113+
<img src="https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.png"/>
114+
</a>
19115
</p>
20116

21-
## Credits
117+
## License
22118

23-
- [vscode-extension-samples](https://github.com/microsoft/vscode-extension-samples) shows all the knowledge required to develop the extension.
24-
- [angular](https://github.com/angular/angular) shows how TS server plugin working with language service.
25-
- Syntax highlight is rewritten base on [vue-syntax-highlight](https://github.com/vuejs/vue-syntax-highlight).
26-
- [vscode-fenced-code-block-grammar-injection-example](https://github.com/mjbvz/vscode-fenced-code-block-grammar-injection-example) shows how to inject vue syntax highlight to markdown.
119+
[MIT](https://github.com/vuejs/language-tools/blob/master/LICENSE) License

0 commit comments

Comments
 (0)