# Setup
# Extensions
- Install Sass (opens new window) for sass syntax highlighting.
- Install language-stylus (opens new window) for stylus syntax highlighting.
- Install ESLint extension (opens new window) for linting vue and js files.
# VS Code Config
Add
vue
to youreslint.validate
setting, for example:"eslint.validate": [ "javascript", "javascriptreact", "vue" ]
# Project Setup
At project root exist
package.json
file, Vetur use it for infer vue version and get component date.At project root create a
jsconfig.json
ortsconfig.json
thatinclude
all vue files and files that they import from, for example:jsconfig.json
{ "include": [ "./src/**/*" ] }
tsconfig.json
{ "include": [ "./src/**/*" ], "compilerOptions": { "module": "es2015", "moduleResolution": "node", "target": "es5", "sourceMap": true, "allowJs": true } }
# jsconfig vs tsconfig
- Use
tsconfig
for pure TS project. - Use
jsconfig
for pure JS project. - Use
jsconfig
ortsconfig
withallowJs: true
for mixed JS / TS project.
# Path mapping
If you are using Webpack's alias (opens new window) or TypeScript's path mapping (opens new window) to resolve components, you need to update Vetur's tsconfig.json
or jsconfig.json
.
For example:
└── src
├── components
│ ├── a.vue
│ └── b.vue
├── containers
│ └── index.vue
├── index.js
└── jsconfig.json
jsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"components/*": [
"src/components/*"
]
}
}
}
index.vue
import a from 'components/a.vue'
import b from 'components/b.vue'
# Typescript
You need to add a shim type file for import vue SFC in typescript file.
# Vue2
// shims-vue.d.ts
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
# Vue3
// shims-vue.d.ts
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
# Advanced
If you use monorepo or VTI or not exist package.json
and tsconfig.json/jsconfig.json
at project root,
You can use vetur.config.js
for advanced setting.
Please add vetur.config.js
at project root or monorepo project root.
// vetur.config.js
/** @type {import('vls').VeturConfig} */
module.exports = {
// **optional** default: `{}`
// override vscode settings
// Notice: It only affects the settings used by Vetur.
settings: {
"vetur.useWorkspaceDependencies": true,
"vetur.experimental.templateInterpolationService": true
},
// **optional** default: `[{ root: './' }]`
// support monorepos
projects: [
'./packages/repo2', // shorthand for only root.
{
// **required**
// Where is your project?
// It is relative to `vetur.config.js`.
root: './packages/repo1',
// **optional** default: `'package.json'`
// Where is `package.json` in the project?
// We use it to determine the version of vue.
// It is relative to root property.
package: './package.json',
// **optional**
// Where is TypeScript config file in the project?
// It is relative to root property.
tsconfig: './tsconfig.json',
// **optional** default: `'./.vscode/vetur/snippets'`
// Where is vetur custom snippets folders?
snippetFolder: './.vscode/vetur/snippets',
// **optional** default: `[]`
// Register globally Vue component glob.
// If you set it, you can get completion by that components.
// It is relative to root property.
// Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
globalComponents: [
'./src/components/**/*.vue'
]
}
]
}
# Yarn pnp
Vetur support this project now, but have some limits.
- Don't mix common project and pnp project in multi-root/monorepo
- Prettier don't support yarn pnp, so can't load plugin automatic.