posts/vite-vue3-typescript/

[utterances-bot]

Building a Vue3 Typescript Environment with Vite | miyauci.me

Building a Typescript Vue3 environment using the No bundle tool Vite, along with ESLint and Prettier configuration to create a high DX environment.

https://miyauchi.dev/posts/vite-vue3-typescript/?utterances=8cc08b6fb9c2c533386c60bafrSa3H3e4ah8V%2BEUrswZK5CjMoTjXCs7C07Bn9GHZ0j4CY4jjajLKX5iLpzCYEWiOADy8aV%2B8LMKELdLdKf6NL%2BDYBMm1yJsanLdt%2FAeL69T18a7JnFuyGeWAxk%3D

[tonghoangvu]

In config path alias, using '/@' work for me, not '/@/' (may be a typo).

[TomokiMiyauci]

Thanks for the comment!

This article is a bit old. It was correct at the time this article was written, but there have been changes.

I will update the entire article soon.

[TomokiMiyauci]

I update latest

[DanielOaks]

Thank you for this article, it's very useful!

Just a note, right near the end it looks like the code block isn't closed properly, here: https://github.com/TomokiMiyauci/me/blob/main/posts/vite-vue3-typescript/index.mdx#checking-template-statically-with-vue-tsc (see the visible ```json:package.json at the bottom)

[TomokiMiyauci]

@DanielOaks Thanks for the comment! I've fixed the article.

[JohnPAfr]

Hello, thanks for the article.

Why the TS part is crossed ? Is it because TS is used by vue ?

[TomokiMiyauci]

@JohnPAfr Thanks for the comment.

Why the TS part is crossed ? Is it because TS is used by vue ?

The vite template now includes the TypeScript settings. Thus, the work in this section is no longer necessary.

[JohnPAfr]

@TomokiMiyauci I've follow the article but I encountered a problem at the Path Alias part.

Module 'path' cannot be found in "import { resolve } from 'patht'". And also Same for __dirname in the resolve.

I'm on a Mac.

Any idea ?

[TomokiMiyauci]

@JohnPAfr You can try the following:

npm i -D @types/node
// or
yarn add -D @types/node

I need to update the article. Thanks for the report.

[Galex88]

Hello !

First, thanks, it's a nice tutorial !

I have a little issue: If I put "semi: true" in .prettierrc, eslint show me error (because I put a rule to have error on prettier issue) when there is a semi at the end of the line. I followed ur tutorial for the eslint config, is there anything missing ?

[Galex88]

Oh ! nevermind, I found the soluce.

It is needed to restart the eslint server in vs-code, and it did the trick. Anyway, good job mate !

[jimmiejackson414]

When adding the line "@vue/prettier/@typescript-eslint" to the extends array in the aslant config file, I receive an error:

ESLint: Failed to load config "@typescript-eslint" to extend from. Referenced from: /path/to/project/.eslintrc.js. Please see the 'ESLint' output channel for details.

Is this a typo, or am I missing something? Thanks for putting together such a great article!

[TomokiMiyauci]

@jimmiejackson414 Can you show me the eslint config and package.json?

[jimmiejackson414]

@TomokiMiyauci sure thing!

.eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  parserOptions: {
    ecmaVersion: 2021,
  },
  plugins: [],
  rules: {},
};

package.json:

{
  "name": "vue3-vite-test",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
    "@vitejs/plugin-vue": "^2.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "eslint": "^8.7.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.3.0",
    "prettier": "^2.5.1",
    "stylelint": "^14.3.0",
    "stylelint-config-recommended": "^6.0.0",
    "stylelint-config-standard": "^24.0.0",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-tsc": "^0.29.8"
  }
}

[TomokiMiyauci]

@jimmiejackson414

Sorry for the inconvenience.There was a typo in the article. @vue/prettier/@typescript-eslint is correctly prettier/@typescript-eslint.

Also, starting with eslint-config-prettier8.0.0, prettier/@typescript-eslint seems to have been merged into prettier. https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21

So all you have to do is just delete @vue/prettier/@typescript-eslint.

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
  ],
  parserOptions: {
    ecmaVersion: 2021,
  },
  plugins: [],
  rules: {},
};

[jimmiejackson414]

Ah perfect, thank you so much!

[LapassetAlexis]

Hello and thanks for your work !

I have just a little issue with next command :

npm run prettier -w -u .

I have the following result :

npm ERR! No workspaces found:
npm ERR!   --workspace=-u

My package.json :

{
  "name": "yggtorrentchecker",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint:script": "eslint --ext .ts,vue --ignore-path .gitignore .",
    "lint:markup": "vue-tsc --noEmit"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@types/node": "^17.0.14",
    "@typescript-eslint/eslint-plugin": "^5.10.2",
    "@typescript-eslint/parser": "^5.10.2",
    "@vitejs/plugin-vue": "^2.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.8.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-tailwindcss": "^3.4.3",
    "eslint-plugin-vue": "^8.4.1",
    "husky": "^7.0.4",
    "lint-staged": "^12.3.3",
    "postcss": "^8.4.6",
    "prettier": "^2.5.1",
    "tailwindcss": "^3.0.18",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-tsc": "^0.29.8"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,vue}": "eslint --fix",
    "*": "prettier -w -u"
  }
}

[TomokiMiyauci]

---

npm: 7.24.0

Try the following command.

npm exec -- prettier -w -u . 

It seems that npm run only executes the script field of package.json. For more information about npm exec, please see https://docs.npmjs.com/cli/v8/commands/npm-exec.

[LapassetAlexis]

Super !

Thanks a lot !

[jackchoumine]

nice article. i have a issue. use tsx to write Component, the vscode show some errors: Button.tsx:

const style = {
  width: '200px',
  height: '37px',
}
const Button = defineComponent({
  setup(props, { slots }) {
    console.log('*****slots')
    console.log(slots)
    const { default: _default, left, right } = slots
    return () => (
      <button style={style}>
        {left ? left() : null}
        {_default ? _default() : 'BUTTON'}
        {right ? right() : null}
      </button>
    )
  },
})

export default Button

error: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.ts(2746)

my tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2015",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowJs": true,
    "strict": false,
    "jsx": "preserve",
    "typesRoot": ["./node_modules/@types", "./types"],
    "sourceMap": true,
    // "strictNullChecks": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"],
      "#c": ["./components/index"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.js",
    "auto-imports.d.ts",
    "src/test-lit.js"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

How to fix it?