This repo intentionally contains eslint and stylelint linting errors in src/components/HelloWorld.vue so you know everything is working. You won't be able to git commit (only if you edit that file though) because the pre-commit linting action won't let you - until you fix the errors. Run npm run lint to see the errors
Vue 3 with:
- ESLint
- eslint-plugin-vue (find common mistakes in .vue files & make ESLint recognize .vue files)
- eslint-plugin-prettier (formatting rules)
- stylelint (lint
<style>block from .vue files) - Stylelint is a separate program, not an ESLint plugin. To get Stylelint warnings in the IDE, download the Stylelint extension - husky & lint-staged, which prevent your git commit if code you staged (with
git add) has linting errors - they'll only let you through to the commit message prompt if you fix the errors
To see all of the above in action install ESLint and Stylelint extensions (type @recommended in extension search menu in VS Code), then open src/components/HelloWorld.vue. That file intentionally contains linting errors that check if all of these linting plugins work.
This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur).
Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can run Volar: Switch TS Plugin on/off from VSCode command palette.
See Vite Configuration Reference.
npm installnpm run devnpm run build