WebStorm 中 Bootstrap-Vue.js 支持的未知 html 标签警告

Posted 2023-03-21

【中文标题】WebStorm 中 Bootstrap-Vue.js 支持的未知 html 标签警告

【英文标题】：Unknown html tag warning of Bootstrap-Vue.js support in WebStorm

【发布时间】：2018-02-24 18:16:15

【问题描述】：

我正在使用 WebStorm 2017.2.4 和 webpack Vue.js 项目。我已将bootstrap-vue.js 添加到我的项目中，并希望查看有关它的提示和组件支持。

但我得到了“未知的 html 标记”警告。

顺便说一句：bootstrap-vue 在运行项目时按预期工作。

你有什么建议可以让它发挥作用吗？

【问题讨论】：

我在使用 WebStorm 2017.3.3 时遇到了这个确切的问题

我也是。你能为这个问题设置一个赏金吗？

@JanTajovsky 你是什么意思？

@Bullet-tooth ***.com/help/bounty

@PrzemekNowak 问题：youtrack.jetbrains.com/issue/WEB-31682。与youtrack.jetbrains.com/issue/WEB-30742相关

【参考方案1】：

于 2019 年 7 月 30 日更新

phpShtorm(WebStorm) 已更新至 2019.2，现在他们添加了对 vuejs 库的更好支持： https://blog.jetbrains.com/webstorm/2019/07/webstorm-2019-2/#development_with_vue 我刚刚测试过，它可以工作。

旧答案

我通过手动添加组件解决了这个问题。 根据：https://bootstrap-vue.js.org/docs/#individual-components-and-directives 我创建了新文件，例如bootstrap.js 然后注册需要的全局组件

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import Vue from 'vue';
import navbar from 'bootstrap-vue/es/components/navbar/navbar';
import container from 'bootstrap-vue/es/components/layout/container';
// ...

Vue.component('b-navbar', navbar);
Vue.component('b-container', container);
// ...

它在 phpstorm 2018.1 中对我有用

【讨论】：

我创建了所有别名。只需创建自定义文件，例如vue-boostrap.js 粘贴这个：pastebin.com/Z3cBgPyp 并将这个文件导入main.js

即使注册了一个组件，这仍然不是标签属性的内容助手，在WebStorm 2019.1.3。

【参考方案2】：

Bootstrap vue 使用非常动态的方式来定义组件。我正在使用带有 vuejs 扩展的 PyCharm，它在使用注册时无法解析组件

import  Layout  from 'bootstrap-vue/es/components'

Vue.use(Layout)

我用来做的是在components 目录中创建一个新文件bootstrap.js，并注册我会使用的所有引导组件

import Vue from 'vue'

import bContainer from 'bootstrap-vue/es/components/layout/container'
import bRow from 'bootstrap-vue/es/components/layout/row'
import bCol from 'bootstrap-vue/es/components/layout/col'

Vue.component('b-container', bContainer);
Vue.component('b-col', bCol);
Vue.component('b-row', bRow);

然后将这个文件导入main.js

import './components/bootstrap'

只是一个更清洁的解决方案。

【讨论】：

我创建了所有别名。只需创建自定义文件，例如vue-boostrap.js 粘贴此：pastebin.com/Z3cBgPyp 并将此文件导入main.js

不需要使用 phpStorm 2019.2 来导入vue-bootstrap.js。 PhpStorm 从项目中读取文件，Vue 不受影响。

【参考方案3】：

更新：有两种方法可以修复“未知 html 标记”警告：（全局和本地注册）

全球注册：

在创建新的 Vue 实例之前，您应该必须全局注册您的组件 Vue.component(tagName, options)。例如：

Vue.component('my-component', 
  // options
)

注册后，组件可以在实例的模板中用作自定义元素<my-component></my-component>。在实例化根 Vue 实例之前，确保组件已注册。这是完整的示例：

_HTML：

<div id="example">
  <my-component></my-component>
</div>

_JS：

// global register
Vue.component('my-component', 
  template: '<div>A custom component!</div>'
)

// create a root instance
new Vue(
  el: '#example'
)

_{将呈现 HTML：}：

<div id="example">
  <div>A custom component!</div>
</div>

本地注册：

您不必在全局范围内注册每个组件。您可以通过使用components 实例选项注册一个组件，使其仅在另一个实例/组件的范围内可用：

var Child = 
  template: '<div>A custom component!</div>'


new Vue(
  // ...
  components: 
    // <my-component> will only be available in parent's template
    'my-component': Child
  
)

同样的封装适用于其他可注册的 Vue 功能，例如指令。

阅读更多https://vuejs.org/v2/guide/components.html#Using-Components

---

更新前：

在 WebStorm 中，库是一个文件或一组文件，除了 WebStorm 从您编辑的项目代码中检索的功能和方法外，其功能和方法也添加到 WebStorm 的内部知识中.在项目范围内，其库默认情况下是写保护。

WebStorm 仅使用库来增强编码辅助（即代码完成、语法突出显示、导航和文档查找）。 请注意，库不是管理项目依赖项的一种方式。

来源：https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html

只需将 WebStorm 从版本 2017.2.4 升级到 2017.3 即可解决此问题。已经测试过了。

【讨论】：

@Snsxn 2017.3 怎么样

@AsifAli72090 在 2017.3 中不起作用 IDE 无法识别