foreword
Recently, the computer system was updated once. After restarting, VsCodeI opened the project in , and found that a bunch of syntax prompts appeared in the original normal code. I searched the Internet, but I didn't find an answer to this question. I don't know if I am the first to encounter it. Record this experience here, if someone else encounters it, you can avoid stepping on the pit again.
1. Problems
As shown in the figure below, the originally normal code suddenly reported a bunch of syntax error prompts.此导入从不用作值，必须使用 "import type" ，因为 "importsNotUsedAsValues" 设置为 "error"。
Two, the reason
According to the content of the prompt, it is because the imported components are not used, but in fact the components have been used, but the "-"uppercase letters are separated by using .
To be sure, I didn't make any changes to the code, so the problem should not be caused by code changes. So I thought that there is a high probability that there is a problem with a certain plug-in of the editor, combined with the error message given above, 此导入从不用作值，必须使用 "import type" ，因为 "importsNotUsedAsValues" 设置为 "error"。so I guess it is TypeScripta problem with the related plug-in.
Next, verify, find the relevant plug-ins, and see if there are any recent updates.
As expected, it has been updated recently, the problem has been found, and the next step is to solve it.
Three, the solution
The first thing I thought of was to lower the version, but then I passed this option, because since this prompt is updated, new projects will encounter the same problem in the future, and I can't always use lower version plug-ins.
method 1
When using camelCase, the first letter is also capitalized. As shown in the figure below, the error message has disappeared.
Method 2
Do not "-"use components separately, so there will be no hint above. Although it will not report an error if the first letter is lowercased, it is still recommended to use uppercase for the first letter.
<script setup lang='ts'>
import HeaderTitle from '@/components/headerTitle.vue'
import basicInfo from '@/components/basicInfo.vue'
</script>
<template>
<HeaderTitle></HeaderTitle>
<basicInfo></basicInfo>
</template>
Method 3
Modify tsconfig.jsonthe configuration in the file so that it no longer checks for type errors. This method only needs to change one place to solve the prompt problem, without changing the name of each component, but it is not recommended.
Just change the compilerOptions- importsNotUsedAsValuesconfiguration to remove, there is no manual addition of this configuration.
tsconfig.json
{
"compilerOptions": {
"importsNotUsedAsValues": "remove",
},
}
END