为何npm run serve不检测未导入错误？如何让其执行失败？

问题描述 #

我有一个Vue视图，代码如下：

<script setup lang="ts">
import { firstItem } from "@/path/to/my/file";

onMounted(async () => {
  let f1 = getFirstItem();
  let f2 = getSecondItem();
});
</script>

如上述代码所示，我导入了firstItem，但忘记导入secondItem。实际网站无法正常运行，但npm run serve却能成功执行，不会报错。我想让npm run serve直接执行失败，避免误以为代码无错的情况；另外npm run lint能检测出该错误，但我不想每次启动服务前手动执行lint。

原因分析 #

npm run serve对应Vue CLI或Vite的开发服务启动命令，默认只负责语法转译和模块打包：只要代码语法符合JS/TS规范（无语法错误），打包流程就能通过。未导入变量属于运行时错误，只会在浏览器执行代码时才会暴露，不会阻断开发服务的启动。

而npm run lint是ESLint等代码检查工具的命令，它通过静态代码分析，能提前发现未定义变量、未导入依赖这类问题。

解决方案 #

1. 开启TypeScript严格校验（TS项目） #

在tsconfig.json中开启严格模式，让TypeScript在打包阶段就检测未导入变量：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

开启后，npm run serve时会触发TypeScript类型检查，发现未导入变量直接终止服务启动。

2. 让开发服务自动执行ESLint检查 #

• Vue CLI项目：修改package.json的serve命令，让它先执行lint再启动服务：

  {
    "scripts": {
      "serve": "vue-cli-service lint && vue-cli-service serve"
    }
  }
  

• Vite项目：安装vite-plugin-eslint插件并配置，让开发服务启动时自动执行lint：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import eslintPlugin from 'vite-plugin-eslint'
  
  export default defineConfig({
    plugins: [
      vue(),
      eslintPlugin({
        include: ['src/**/*.ts', 'src/**/*.vue', 'src/**/*.js']
      })
    ]
  })
  

配置后，启动服务时检测到错误会直接终止流程。

3. 强化Vite开发模式错误检测 #

在vite.config.ts中配置，让Vite在终端抛出错误并终止服务：

export default defineConfig({
  server: {
    fs: {
      strict: true
    }
  }
})

内容的提问来源于stack exchange，提问作者RK Coder