Tips

[johnsoncodehk]

Here are some not obvious things... keeping update.

Formatting tab size config & Change formatter

Volar formatter respect VSCode tab size config, you can customize formatting tab size and use tabs/spaces. See https://code.visualstudio.com/docs/editor/codebasics#_indentation

If Volar formatter is not good for you, you can also change to other formatter extensions like Prettier.

Step:

1. Run Format Document With... command on a vue file.
2. Select Configure Default Formatter.....

Renaming

props, components, style class names renaming is working for <template> usings, and will retain the format same with before rename.

For example:

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
	<MyComponent></MyComponent>
	<my-component></my-component>
</template>

When you renaming MyComponent to OtherComponent, we will have:

<script setup>
import OtherComponent from './MyComponent.vue'
</script>

<template>
	<OtherComponent></OtherComponent>
	<other-component></other-component>
</template>

Instead of `tsc --noEmit`

In VSCode, you can use Volar: Verify All Scripts command to simulation tsc --noEmit for Vue scripts.

In command line, you can use vue-tsc.

Instead of other extensions

Auto rename tag

Make sure enabled "editor.linkedEditing": true.

Auto close tag

Make sure enabled "html.autoClosingTags": true.

Jump to tag

Volar supported VSCode Navigation, so you can use VSCode Go to Symbol feature.

Instead of `@typescript-eslint/no-unused-vars`

@typescript-eslint/no-unused-vars is not support <script setup> temporarily, but you can use tsconfig noUnusedLocals: true as a replacement.

Asset path resolve

Volar supports asset relative path resolve.

Absolute path resolve based on the tsconfig paths option.

Instead of `shims-vue.d.ts`

TS Plugin is supported in 0.20.9, you have to use Volar: Switch TS Plugin command to enable it.

Use TypeScript Vue Plugin or Take Over Mode.

Snippets

Volar do no includes snippets, but you can install https://marketplace.visualstudio.com/items?itemName=matijao.vue-nuxt-snippets or create .vscode/vue.code-snippets to make your own workspace snippets.

[bttger]

Hi, the snippets template link isn't available anymore. The new one: https://github.com/johnsoncodehk/volar/blob/master/extensions/vscode-vue-language-features/templates/vue.code-snippets

[johnsoncodehk]

Thanks!

[ranghaus]

Link is down again :(

[johnsoncodehk]

We don't have snippet template anymore, I just suggested another snippet extension.

[tinegaCollins]

does volar have a shortcut to scaffold the boiler plate code

[johnsoncodehk]

Yes, use Volar: Create Workspace Snippets command and https://snippet-generator.app/

[Doeke]

Where can I find supported settings? codeLens.references: false no longer seems to be working and I'd like to turn off references because they shift the page and take up vertical space

[ntnyq]

Where can I find supported settings? codeLens.references: false no longer seems to be working and I'd like to turn off references because they shift the page and take up vertical space

Use "vue.features.codeLens.enable": false instead.

[ntnyq]

All supported settings are documented in the FEATURE CONTRIBUTIONS tab of the detail page of an extension.

[Csszabi98]

Could we maybe add #3397 to the above list? Creating files named "X.vue.js" breaks Volar due to the way it works. My proposal:

Title:

Don't create files named xxx.vue.js/xxx.vue.ts

Description:

When creating a vue sfc, volar parses it, and convert it to a js/ts file, and write to a virtual file xxx.vue.js/ts. So when you edit your vue sfc, you are editing the virtual file actually. Creating a custom xxx.vue.js will override Volar's virtual file. This override can lead to breakage of the language features.

[johnsoncodehk]

Closed due to outdated content.