How to integrate WebStorm with Vue.js
This is the checklist of ways to improve WebStorm(PhpStorm, Idea, etc.) experience:
Use Vue.js plugin.
UPDATE: Both plugins have own problems atm
vue-for-idea has weird side-effects (hiding node_modules
from project view);
John Kelly's Vue.js plugin force you to use special declarations for ES6 and scss, sass (see deprecated section below)
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.
Set "Javascript Language Version" to ES6.
Open Settings(Preferences)
=> Language & Frameworks
=> JavaScript
. Set Javascript Language Version
to ECMAcript6
https://github.com/postalservice14/vuejs-plugin
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.
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: http://stackoverflow.com/a/28903910/930170)
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... </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.
Import TextMate Bundle functionality.
https://www.jetbrains.com/help/phpstorm/2016.1/textmate-bundles.html?origin=old_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
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:
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.
网友评论