WebStorm无法识别的语义用户界面组件

Question

我将WebStorm用作IDE，通常将Vue组件识别为有效的HTML标记，但是这种集成的组件却不能。有人对如何解决这个问题有任何想法吗？

应用程序

<template>
  <div id="app">
    <sui-menu fixed inverted>
      <sui-container>
        <a href="#" is="sui-menu-item" class="header">
          <img src="/src/assets/logo.png" class="logo">
          Project Name
        </a>

        <a is="sui-menu-item" href="#">Home</a>
      </sui-container>
    </sui-menu>

    <sui-container class="main" text>
      <sui-header size="huge">Semantic UI Vue Fixed Template</sui-header>
      <p>This is a basic fixed menu template using fixed size containers.</p>

      <test></test>

    </sui-container>
  </div>
</template>

<script>
  export default {};
</script>

main.js

import Vue from "vue";
import App from "./App";
import SuiVue from "semantic-ui-vue";
import 'semantic-ui-css/semantic.min.css';
import Test from './Test.vue';

Vue.use(SuiVue);

new Vue({
  el: "#app",
  template: '<App/>',
  components: { App }
});

Vue.component('test', Test);

WebStorm的屏幕截图（我正在使用最新版本）