环境
- Win10
- VS code: 1.70.1
- vue: ^3.2.33
问题汇总
Vetur or Volar
原来用VS code写vue3好好的，不知道哪天升级了什么（估计是vetur插件），打开xx.vue就是一片醒目的红色警告，右下角可以看到弹窗提示
原因是因为vetur默认在工作空间根目录查找这两个文件，而我是一个monirepo，根据官方文档，可以创建一个vetur.config.js来配置多个子项目的目录，具体查看官方文档：
https://vuejs.github.io/vetur/guide/setup.html#advanced
增加了配置后，打开vue文件，发现template/script全是一大片的红色波浪线，鼠标移上去会发现全是vetur的错误提示，查了一下vue官网:
https://cn.vuejs.org/guide/typescript/overview.html#ide-support
其中有一段文字：
TIP
Volar 取代了我们之前为 Vue 2 提供的官方 VSCode 扩展 Vetur。如果你之前已经安装了 Vetur，请确保在 Vue 3 的项目中禁用它。
于是把vetur扩展卸了，安装Volar。
EsLint
波浪线少了些，但是还有：
这很明显应该是eslint配置有问题。
这里有人给出解决方案：
https://stackoverflow.com/questions/66597732/eslint-vue-3-parsing-error-expected-eslint
原本我的eslintrc.js中的配置：
{
// ...
'parser': '@typescript-eslint/parser',
'parserOptions': {
'ecmaVersion': 'latest',
'sourceType': 'module'
}
}
修改为
{
// ...
'parser': 'vue-eslint-parser',
'parserOptions': {
'parser': '@typescript-eslint/parser',
'ecmaVersion': 'latest',
'sourceType': 'module'
}
}
关于vue-eslint-parser的更多配置：https://www.npmjs.com/package/vue-eslint-parser
vscode中eslint的output还有如下错误信息：
[Info - 10:41:25] ESLint server is starting
[Info - 10:41:26] ESLint server running in node v16.13.2
[Info - 10:41:26] ESLint server is running.
[Info - 10:41:29] ESLint library loaded from: F:\tgit\smarttalk\app\chartknowscli\node_modules\eslint\lib\api.js
[Info - 11:41:18]
Failed to load the ESLint library for the document f:\tgit\smarttalk\tools\spider\typings\datacenter.d.ts
我的eslintrc.js配置文件位于F:\tgit\smarttalk\app\chartknowscli目录下，这也是vue3+typescript项目所在，它引用到另一个项目f:\tgit\smarttalk\tools\spider中的类型文件，根据eslint的提示，这种情况需要全局安装eslint：npm i eslint -g，安装后重启vscode即可。
<> 操作符
如下图所示，当我在vue文件的<script>中括号中使用了typescript的<> operator时，会有这样的错误。明显ts将其视为JSX，认为我应该写<keyof></keyof>。
也有人提出类似的问题：
https://stackoverflow.com/questions/58392378/typescript-type-cast
对此别无他法，只能改用as类型转换关键字。
'module' is not defined.eslint
.eslintrc.js中提示'module' is not defined.eslint
原因是在执行
npm init @eslint/config时选择的是browser环境，而实际上我是一个vue应用，改成
'env': {
'node': true,
'es2021': true
}
ESLint: Cannot read properties of undefined (reading 'loc') Occurred while linting xxx
每次一写const，右下角马上弹出
原因是没使用
@typescript-eslint/indent插件，把indent换成@typescript-eslint/indent即可。
- 'indent': [
+ '@typescript-eslint/indent': [
'error',
4
],
Cannot find name 'uni'.ts(2304)
在tsconfig.json中已经配置了"types": ["@dcloudio/types"]，按道理uni应该作为全局变量被导入了，但依旧报错，看uniapp论坛有人说是Volar升级后冲突了。
https://ask.dcloud.net.cn/question/149424
