logue/vite-vuetify-ts-starter

husky precommit

f1eeman opened this issue · 21 comments

vscode;
actual version for this template;

I added the component to the "components" directory, then imported it into homePage.vue. Tried to commit but got the following errors:
1)Could not find "stylelint-config-prettier"
2) problems with catalog node_modules.

your styleling.config:

customSyntax: postcss-html
extends:
  - stylelint-config-html/vue
  - stylelint-config-recommended-scss
  - stylelint-config-recommended-vue/scss
  - stylelint-config-prettier
plugins:
  - stylelint-order
  - stylelint-scss
ignoreFiles:
  - 'dist/**/*'
rules:
  color-function-notation: legacy
  function-no-unknown: null
  no-descending-specificity: null
  scss/no-global-function-names: null

image

logue commented

What package manager are you using?
Currently, it is confirmed that pnpm causes a problem.

yarn - v3.3.0
node - v16.17.1

if i use npm(8.15.0) and node v16.17.1:

  1. I need to add a pre-commit file to the husky directory with the following content:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install lint-staged --relative
  1. install @babel/types in dev deps

As a result, I get the following:
image

logue commented

Node LTS version (current is 18.12.1) or later is supported...

"node": ">=18.12.1",

I'm sorry, that was my mistake. However, after updating the node (now version is 18.12.1, npm version is 8.19.2), re-cloning the current repository, I ran into the same problems as when using, among other things, the yarn package

image

logue commented

It looks like tsconfig.json and env.d.ts are not recognized.

Restart vscode after clearing cache with yarn run clean. Also try takeover mode if possible.

Nothing helps. The problem with the "alias" seems to me, because if all aliases (@ ) are replaced with relative paths, there are no problems with types 

logue commented

It seems that eslint recognizes @ normally, and it seems that vue-tsc is outputting an error, so tsconfig is suspicious. Is this in vanilla state?

tsconfig state fully corresponds to tsconfig from this repository

logue commented

There may be a cause in the environment on the vscode side, such as veutr was included.
Try resetting your vscode settings.

Did not help....
I don't think it has anything to do with the ide, because firstly, this kind of errorserrors occur in any ide, and secondly, the problem is clearly with the alias in the configs(ts, eslint, vite)

logue commented

There was an update of Vuetify yesterday, so I updated this project accordingly. (also merged createVuetify)
Did you reproduce it?

Notice: eslint-plugin-vuetify v2, which supports Vuetify3, but it is in beta.

I have exactly the same problem, isn't there any solution yet?

There was an update of Vuetify yesterday, so I updated this project accordingly. (also merged createVuetify) Did you reproduce it?

Notice: eslint-plugin-vuetify v2, which supports Vuetify3, but it is in beta.

yes, a have cloned actual version for this template, but the problem remains

logue commented

I don't know for a moment.

What happens if the value of lint-staged in package.json is just prettier like below?

{
 "lint-staged": {
    "*": "prettier -w -u"
  }
}

I don't know for a moment.

What happens if the value of lint-staged in package.json is just prettier like below?

{
 "lint-staged": {
    "*": "prettier -w -u"
  }
}

The problem is with vue-tsc. If type checking via vue-ts is removed, then husky exits successfully without doubt

  "lint-staged": {
    // "*.vue": "vue-tsc --noEmit",
    "*.{js,ts,json,jsonc,json5,yaml,yml,toml,yml,yaml,vue,htm,html,md}": "eslint --fix --cache --cache-location ./node_modules/.vite/vite-plugin-eslint",
    "*.{css,sass,scss,vue,htm,html}": "stylelint --fix --cache --cache-location ./node_modules/.vite/vite-plugin-stylelint",
    "*": "prettier -w -u"
  },
logue commented

Thank you for your report.

I've found a solution to the problem, but I'm not sure if it is right:

  "lint-staged": {

    !!!!!!!!!!!!!
    "*.{ts,vue}": "vue-tsc --noEmit",
    !!!!!!!!!!!!!

    "*.{js,ts,json,jsonc,json5,yaml,yml,toml,yml,yaml,vue,htm,html,md}": "eslint --fix --cache --cache-location ./node_modules/.vite/vite-plugin-eslint",
    "*.{css,sass,scss,vue,htm,html}": "stylelint --fix --cache --cache-location ./node_modules/.vite/vite-plugin-stylelint",
    "*": "prettier -w -u"
  },

AND

image

logue commented

In principle, it's probably irrelevant since it's based on createVue.

see also:
https://github.com/vuejs/create-vue-templates/tree/main/typescript-router-pinia-vitest

npm run type-check
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",

image

logue commented

This is a normal behavior because it refers to meta information such as the last build datetime that is automatically generated at build time. (This is the same reason why it says to run build-only when deploying.)

It is included in .gitignore because its nature causes file changes every time it is built.

If you really care, just comment out ./src/Meta.ts from .gitignore and include Meta.ts in your project.