IntelliJ IDEA 设置 vue 支持

最新推荐文章于 2026-05-20 14:34:52 发布

转载最新推荐文章于 2026-05-20 14:34:52 发布 · 1.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/maggieq8324/p/11458752.html

收录于

IDEA

本文详细介绍了如何在IntelliJ IDEA中设置对Vue.js的支持，包括安装Vue.js插件以识别.vue文件，编辑Vue文件模板，设置Vue语法提示，以及添加代码提示快捷键。通过这些步骤，开发者可以提升在IDEA中编写Vue项目的效率和体验。

File–>Settings–>Languages & Frameworks 设置javaScript language version为ECMAScript 6
在这里插入图片描述

一、IntelliJ IDEA支持.vue文件

安装vue.js

file --> settings --> plugins，输入vue，点击搜索结果里的vue.js右边的install按钮，安装成功后重启idea，这样idea就能识别.vue文件了

设置vue新建文件模板
file-->setting-->editor-->file and code Templates，选择Vue File，然后可以在右边框中编辑默认模板内容，编辑完点击“ok”。

在这里插入图片描述

这样就可以通过new选项创建.vue文件

二、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

如下图所示：

在这里插入图片描述