WebStorm 7 - Integration of Mocha test framework

By: JetBrainsTV

46   0   12187

Uploaded on 11/11/2013

Mocha test framework integration in WebStorm
Visit http://www.jetbrains.com/webstorm/ to learn more about WebStorm

Comments (2):

By anonymous    2017-09-20

WebStorm now supports vue.js (starting from 2017.1 [blog])

So no additional steps required


DEPRECATED

This is the checklist of ways to improve WebStorm(PhpStorm, Idea, etc.) experience:

  1. Use Vue.js plugin.

UPDATE: Both plugins have own problems atm

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

choose one or both: "Vue.js" or "vue-for-idea". It's up to you.

  1. Set "Javascript Language Version" to ES6.

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

https://github.com/postalservice14/vuejs-plugin

  1. Improve HTML-tag's attributes highlighting

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

For example, my list:

v-on,v-on:click,v-on:change,v-on:focus,v-on:blur,v-on:keyup,:click,@click,v-model,v-text,v-bind,:disabled,@submit,v-class,:class,v-if,:value,v-for,scoped,@click.prevent,number,:readonly,@input,@click,v-show,v-else,readonly,v-link,:title,:for,tab-index,:name,:id,:checked,transition,@submit.prevent,autocapitalize,autocorrect,slot,v-html,:style

P.S. For more full list of custom tags check @Alex's 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: https://stackoverflow.com/a/28903910/930170)

But I didn't get success with that.

  1. 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):

  1. 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.

  1. 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))

  1. Improve styles highlight. (sass, scss, etc)

In each vue file with tag:

    <style lang="sass" rel="stylesheet/sass">
        // your style here...
    </style>

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.

  1. Import TextMate Bundle functionality.

https://www.jetbrains.com/help/phpstorm/2016.1/textmate-bundles.html?origin=old_help

  1. 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 word.

Example: https://youtu.be/4mKiGkokyx8?t=84 (from 1:24)


UPD2: For more info check the issue at github: https://github.com/vuejs/vue-syntax-highlight/issues/3


UPD3: FAQ:

  1. Can I improve pug(jade) highlight?

    • No. Because Webstorm doesn't support template language injection... Issue has been up since 2013 with no official word.

Original Thread

Popular Videos 4

Submit Your Video

If you have some great dev videos to share, please fill out this form.