How to integrate WebStorm with

后来发现BMP可以完美解决:Preference – Plugin – 点MPEG Audio
Plugin,选它的Preference, 在Title中勾选“Disable IDV2 tags”和“Convert
Non-UTF8 ID3 tag UTF8”,在下面的“ID3
Encoding”中输入GBK。图片 1

使用IntelliJ IDEA开发

This is the checklist of ways to improve WebStorm(PhpStorm, Idea, etc.)
Use Vue.js plugin.

一、新建工程,选择[Intellij Platform Plugin]

UPDATE: Both plugins have own problems atm
has weird
(hiding node_modules
from project view);
John Kelly’s Vue.js
force you to use special declarations for ES6 and scss, sass (see
deprecated section below)


  1. 在创建向导中配置插件信息和快捷键等

    • ActionID:代表该Action的唯一的ID,一般的格式为:pluginName.ID
    • ClassName:类名
    • Name:就是最终插件在菜单上的名称
    • Description:对这个Action的描述信息

  1. 可以在plugin.xml中查看或跟新配置信息

        <action id="TestTranslation.TranslateAction" class="com.ccy.TranslateAction" text="Translate"
            description="translate for selected word">
            <add-to-group group-id="EditMenu" anchor="first"/>
            <keyboard-shortcut keymap="$default" first-keystroke="meta I"/>
  2. 编写具体实现

    public class MyAction extends AnAction {
        // 点击菜单时触发
        public void actionPerformed(AnActionEvent e) {
                    "Hello World!",

You can install it via Settings(Preferences)
=> Plugins
=> Browse repositories
=> (search for) “vue”


点击[Run],默认启动一个新的IntelliJ IDEA的界面

choose one or both: “Vue.js” or “vue-for-idea”. It’s up to you.
Set “Javascript Language Version” to ES6.


  1. plugin.xml中填写信息

    <name>Plugin display name here</name>
    <vendor email="" url="">YourCompany</vendor>
          Enter short description for your plugin here.<br>
          <em>most HTML tags may be used</em>
          Add change notes here.<br>
          <em>most HTML tags may be used</em>
  2. 输出jar包

    • 点击build->prepare plugin…
    • 打开Andorid Studio,选择Preferences -> Plugins -> Install
      plugin from disk
    • 发布到仓库\_started/publishing\_plugin.html

Open Settings(Preferences)
=> Language & Frameworks
=> JavaScript
. Set Javascript Language Version
to ECMAcript6


  • 官方DOC
  • android-parcelable-intellij-plugin –


Improve HTML-tag’s attributes highlighting

Open Settings(Preferences)
=> Editor
=> Inspection
=> select Unknown HTML tag attributes
=> click Custom HTML tag attributes
. Add your attributes.

For example, my list:

P.S. For more full list of custom tags check
answer below
P.P.S. Actually it’s should work in more common way:
Open Settings(Preferences)
=> Languages & Frameworks
=> Javascript
=> Libraries
=> click Add
(after this you should set path to the vue.js
. You can dowmload it with npm or whatever)

(More info in this answer:
But I didn’t get success with that.
Enable Node.js Coding Assistance:

Open Settings(Preferences)
=> Languages & Frameworks
=> Node.js and NPM

If “Node.js core library is not enabled”, click button Enabled

DEPRECATED (may be required if you don’t use vue-plugins for IDE):
*Make .vue
files to be recognized as a html-flies**.

Open Settings(Preferences)
=> Editor
=>File Types
find HTML
in Recognized File Types
, then add *.vue
as a new Registered Patterns.

Improve ES6 highlight.

In each vue
file with tag:
<script type=”text/babel”> // your code here… </script>

(This is would help to recognise constructions like setTimeout(() =>
{console.log(1) }, 100)
Improve styles highlight. (sass, scss, etc)

In each vue
file with tag:
<style lang=”sass” rel=”stylesheet/sass”> // your style here…

For scss
it’s gonna be <style lang=”scss” type=”text/scss”>

UPD: The steps below are not so trusted, they may helps, or may
not, some of them I didn’t check personally, or I didn’t catch is any
effect exist or not.
Import TextMate Bundle functionality.\_help

Import TypeScript tables for vue.

Open Settings(Preferences)
=> Language & Frameworks
=> JavaScript
=> Libraries
. Click Download
, Switch to TypeScript community stubs
. And download all tabs with vue

(from 1:24)

UPD2: For more info check the issue at github:
Can I improve pug
) highlight
No. Because Webstorm doesn’t support template language injection…
has been up since 2013 with no official word.