PHPStorm не может правильно найти файл, если указать lang=ts

Рейтинг: 0Ответов: 1Опубликовано: 29.03.2023

Пишу приложеньку на Vue3+TS+Vite в PHPStorm. Сегодня возникла такая проблемка: PHPStorm не может зарезолвить созданные в Vite алиасы, если в атрибутах <scrypt> у компонента Vue указать lang="ts".

Само приложение собирается нормально, тут проблем нет. Просто напрягает, само наличие "ошибки". Ну и немного то что я не могу перемещаться быстро по файлам просто кликая по методам и свойствам.

При этом, если убрать lang="ts", то алиас резолвится, НО в таком случае PHPStorm начинает подсвечивать TS конструкции как ошибочные.

Вот код для примера:

<script lang="ts">
import { computed, Ref, ref } from "vue"
import { useRoute } from "vue-router"

// Если есть атрибут lang="ts", следующие 2 строки считаются ошибочними
// и PHPStorm говорит "Module is not listed in package.json dependencies"
import GroupRepository from "@data/repositories/GroupRepository"
import PivotsRepository from "@data/repositories/PivotsRepository"


export default {
  name: "CampaignDetail",
  components: {
    RssIcon,
  },
  setup() {

// Соответственно, если атрибут  lang="ts" не установлен,
// следующая и через одну строки подсвечиваются как ошибочные
    const groupId = computed<string>(() => useRoute()?.params?.id as string)
    const RGroup = useStore().$repo(GroupRepository)
    const group = computed(() => RGroup.find(groupId.value) as Group)



    const eventStatCards = computed(() => RPivot.getGroup())


    return {
      group,
      eventStatCards,
    }
  },
}
</script>

В конфике Vite алиасы настроенны так:

export default defineConfig({
//...
  resolve: {
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
    alias: {
      "@data": path.resolve(__dirname, "./src/data"),
      "@layouts": path.resolve(__dirname, "./src/layouts"),
    },
  },
//...
})

Как бы сделать так чтобы все работало? Может я где-то галку упустил?

Ответы

▲ 0Принят

В общем, откопал ответ. Нужно было еще и в tsconfig.json добавить эти правила.

tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    ...
    "paths": {
      "@data/*": ["src/data/*"],
      "@layouts/*": ["src/layouts/*"]
    }
  },
}