【IntelliJ IDEA】idea支持vue文件，设置对vue的支持

你的名字 2023-01-14 04:56 212阅读 0赞

**本文目录**

一、idea支持.vue文件

二、idea设置vue语法提示

三、效果展示

--------------------

# 一、idea支持.vue文件 #

> 这一步其实就是安装vue.js插件，具体路径为：**File ----> Settings ----> Plugins ----> 输入vue**，点击搜索结果里的vue.js右边的`install`按钮，安装成功后重启idea，这样idea就能识别.vue文件了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70][]

# 二、idea设置vue语法提示 #

> `File`**---->**`setting`**---->**`Editor`**---->**`Inspections，`右侧找到`HTML->Unknown HTML tag attribute`，在右边`Options->Custom HTML tag attributes`里面添加如下代码：

@tap
    @tap.stop
    @tap.prevent
    @tap.once
    @click
    @click.stop
    @click.prevent
    @click.once
    @change
    @change.lazy
    @change.number
    @change.trim
    @on
    @blur
    @fous
    @submit
    scoped
    v-model
    v-model.number
    v-model.trim
    v-for
    v-text
    v-html
    v-show
    v-if
    v-else-if
    v-else
    v-pre
    v-bind
    v-bind:class
    v-bind:style
    v-bind:id
    v-bind:href

具体操作如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70 1][]

> `File`**---->** `setting`**---->** `Editor`**---->** `File Types` **----> Recognized File Types** 里面找到`HTML`，在`File name patterns`里面添加`*.vue`即可（2020.3.3旗舰版本），如图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70 2][]

添加完\*.vue 之后点击OK，如果出现如下图如所弹框，就证明已经被注册过了，不需要再重新添加\*.vue了，下图点击Cancel即可。

![20210420091414567.png][]

# 三、效果展示 #

完成以上步骤之后，效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70 3][]

完结！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70]: /images/20221022/0078d2429957413bbba78dc3e1a73ce6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70 1]: /images/20221022/4d0e3d6192284f98b7fc5e4db37885e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70 2]: /images/20221022/8ad97de0d6ef4cc5bb98f4528e22572a.png
[20210420091414567.png]: /images/20221022/e540fadbe4e5403abe8883fe57ff6c52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70 3]: /images/20221022/5724b0a7ca174d2cb02940d7bae94033.png