DEV Community

Josip Ivancic
Josip Ivancic

Posted on • Originally published at jivancic.com

Vue 3 and Vite with typescript and tooling

Create-vue

See full example on repo: vue-ts-eslint-template.

Use the repo create-vue to get started, this will be the official way to set up a new Vue project with Vite in the future. After running npm init vue@next choose the options appropriate for your use case.

Volar

The first step is to enable the Volar extension and disable the Vetur extension.
Volar is the new recommended extension to use with Vue 3 and typescript.

Typescript

If you chose the Typescript option offered by the CLI tool you should be good to go.

If you run into some issues regarding types try adding the following to your tsconfig.json

{
  "compilerOptions": {
    ...
    "types": ["vite/cli"], // add this
  }
}
Enter fullscreen mode Exit fullscreen mode

ESLint

You will need several packages, run the commands below in your terminal:

ESLint:

npm i -D eslint eslint-plugin-vue eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Typescript:

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript
Enter fullscreen mode Exit fullscreen mode

Next, create a .eslintrc.js which will look something like this, can be extended to fit your use case.

module.exports = {
  env: {
    node: true,
  },
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    withDefaults: "readonly",
  },
  extends: [
    "@vue/typescript/recommended",
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "prettier",
  ],
};
Enter fullscreen mode Exit fullscreen mode

Prettier

You can add a .prettierrc.js with the config that fits your needs.

Example config:

module.exports = {
  singleQuote: true,
  trailingComma: "all",
};
Enter fullscreen mode Exit fullscreen mode

Format on commit

Read more about pre-commit hooks here.

In your terminal run the command:

npx mrm@2 lint-staged
Enter fullscreen mode Exit fullscreen mode

This will setup a precommit hook with husky and lint-staged.

You will see a new entry in your package.json

"lint-staged": {
    "*.js": "eslint --cache --fix"
  }
Enter fullscreen mode Exit fullscreen mode

You can also easily set up hooks to run on pre-push, learn more about this on the husky and lint-staged repos.

I will adjust the config to be:

"lint-staged": {
    "*.{js,vue}": [
      "prettier --write",
      "eslint --cache --fix"
    ],
    "*.{scss, css, md}": [
      "prettier --write"
    ]
  }
Enter fullscreen mode Exit fullscreen mode

So every staged .js or .vue file gets formatted, then fixed with ESLint.

Every .css, .scss, and .md file will just get formatted.

Discussion (0)