[vue-tsc] How to use with lint-stage

[seho-dev]

I want to use vue-tsc for type checking in vue.
I want to use lint-stage now, but vue-tsc can't seem to find my tsconfig.json

  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "eslint --fix",
      "tsc --noEmit --pretty false --skipLibCheck",
      "git add"
    ],
    "*.{json,js,jsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ],
    "*.vue": [
      "prettier --write",
      "eslint --fix",
      "vue-tsc --noEmit --skipLibCheck",
      "git add"
    ]
  },

I want to verify only the vue file in the temporary storage area. Do you know how to do it?

[seho-dev]

this is demo: https://github.com/seho-code-life/project_template/tree/vue3-vite2-ts-template(dev)

[Shinigami92]

Are you sure that this will work?
As far as I know lint-stage passes each touched file individually to the command.
But vue-tsc needs the whole context starting from src/main.ts, does it?
In worse case you start vue-tsc for each file and if you have 100 files, it will check the project 100 times

[seho-dev]

yes, i agree

I know that vue-tsc will recheck the entire program, but is there a better way to check vue files?

[Shinigami92]

Maybe just use precommit 🤔

See lint-staged/lint-staged#185

[seho-dev]

But what I use now is pre_commit 😭
Does vue-tsc plan to do type checking on a batch of vue files in the future?

[johnsoncodehk]

@1018715564 Please treat vue-tsc as just tsc, maybe tsc can specify files in cli, I think there have been some discussions: lint-staged/lint-staged#468

[seho-dev]

I already have an optimal lint-stage configuration. If anyone needs it, just use vue-tsc as tsc.

// lint-staged.config.js
module.exports = {
  '*.{ts,tsx}': ['prettier --write', 'eslint --fix', 'tsc --noEmit'],
  '*.vue': ['prettier --write', 'eslint --fix', 'vue-tsc --noEmit'],
  '*.{json,js,jsx}': ['prettier --write', 'eslint --fix']
}

 "scripts": {
   "lint-staged": "lint-staged",
 }

[joker77877]

I already have an optimal lint-stage configuration. If anyone needs it, just use vue-tsc as tsc.

// lint-staged.config.js
module.exports = {
  '*.{ts,tsx}': ['prettier --write', 'eslint --fix', 'tsc --noEmit'],
  '*.vue': ['prettier --write', 'eslint --fix', 'vue-tsc --noEmit'],
  '*.{json,js,jsx}': ['prettier --write', 'eslint --fix']
}

 "scripts": {
   "lint-staged": "lint-staged",
 }

This configuration is still wrong.

[seho-dev]

I run this configuration successfully without errors; you can send out the error to see

[joker77877]

This is your demo.

[seho-dev]

This is your demo.

please https://github.com/seho-code-life/project_template/issues/new

It has nothing to do with volar, we can change a place

[ningrunting]

Any update, I still have same issue with lint-stage

[Yill625]

it's ok!
vue-tsc version 0.29.3

//.lintstagedrc.js
const fs = require('fs')

module.exports = {
  'src/**/*.{js,jsx,vue,ts,tsx}': ['yarn lint'],
  '*.{vue,ts}': [
    () => {
      return `vue-tsc --noEmit --skipLibCheck`
    },
  ],
}

[Roc-zhou]

我想使用 vue-tsc 在 vue 中进行类型检查。 我现在想使用 lint-stage，但是 vue-tsc 似乎找不到我的 tsconfig.json

  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "eslint --fix",
      "tsc --noEmit --pretty false --skipLibCheck",
      "git add"
    ],
    "*.{json,js,jsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ],
    "*.vue": [
      "prettier --write",
      "eslint --fix",
      "vue-tsc --noEmit --skipLibCheck",
      "git add"
    ]
  },

我只想验证临时存储区的vue文件。你知道怎么做吗？

"scripts": {
"lint": "vue-tsc --noEmit && eslint --ext .vue,.js,.ts,.jsx,.tsx --fix",
},

"lint-staged": {
"*.{js,vue,ts,jsx,tsx}": [
"prettier --write",
"npm run lint"
]
}

[aalexlin]

See lint-staged/lint-staged#468 (comment)