保存TypeScript文件时自动修改代码触发ESLint分号报错的原因

在Vue+TypeScript项目开发过程中，保存App.vue文件时，代码会被自动修改——import语句末尾被添加分号，随即触发ESLint报错，提示该位置存在多余分号，违反semi和@typescript-eslint/semi规则。

相关配置 #

package.json 中的 scripts 配置：

"scripts": { 
  "dev": "npm run build:icons && vite --host", 
  "build": "npm run build:icons && vite build", 
  "preview": "vite preview --port 5050", 
  "typecheck": "vue-tsc --noEmit", 
  "lint": "eslint . -c .eslintrc.js --fix --rulesdir eslint-internal-rules/ --ext .ts,.js,.vue,.tsx,.jsx", 
  "build:icons": "tsc -b src/@iconify && node src/@iconify/build-icons.js" 
}

代码示例 #

保存前的App.vue #

<script setup lang="ts">
import { useThemeConfig } from '@core/composable/useThemeConfig'

const { syncInitialLoaderTheme, syncVuetifyThemeWithTheme: syncConfigThemeWithVuetifyTheme, isAppRtl } = useThemeConfig()

// ℹ️ Sync current theme with initial loader theme
syncInitialLoaderTheme()
syncConfigThemeWithVuetifyTheme()
</script>

<template>
  <VLocaleProvider :rtl="isAppRtl">
    <VApp>
      <VMain>
        <RouterView />
      </VMain>
    </VApp>
  </VLocaleProvider>
</template>

保存后的App.vue（第2行被添加分号） #

保存后随即出现如下ESLint报错：

Extra semicolon.eslintsemi
Extra semicolon.eslint@typescript-eslint/semi

修改后的代码：

<script setup lang="ts">
import { useThemeConfig } from '@core/composable/useThemeConfig';

const { syncInitialLoaderTheme, syncVuetifyThemeWithTheme: syncConfigThemeWithVuetifyTheme, isAppRtl } = useThemeConfig()

// ℹ️ Sync current theme with initial loader theme
syncInitialLoaderTheme()
syncConfigThemeWithVuetifyTheme()
</script>

<template>
  <VLocaleProvider :rtl="isAppRtl">
    <VApp>
      <VMain>
        <RouterView />
      </VMain>
    </VApp>
  </VLocaleProvider>
</template>

内容的提问来源于stack exchange，提问作者Alyamin Smail