postalservice14 / vuejs-plugin Goto Github PK

View Code? Open in Web Editor NEW

139.0 8.0 20.0 72 KB

[DEPRECATED] Vue.js features for the Intellij Platform (WebStorm, RubyMine, Intellij, etc)

Java 96.93% HTML 3.07%

vuejs-plugin's Introduction

Deprecated

In favor of the Vue.JS plugin that comes with IntelliJ now

Vue.js Support Plugin

Vue.js Support for the Intellij Platform (WebStorm, PhpStorm, Rubymine, Intellij, etc)

Install

You can install it via Settings -> Plugins -> Browse repositories -> (search for) Vue.js

Or download it from here and install it manually: https://plugins.jetbrains.com/plugin/8057?pr=phpStorm

Useful tips

Highlight and formating for SCSS/SASS/LESS styles in `.vue` files

To get proper formating you just have to insert rel="stylesheet/<preprocessor_code> in the <style> tag. This is example for scss:

<style lang="scss" rel="stylesheet/scss">
	@import 'variables.sass';

	body {
	  font: 100% Helvetica, sans-serif;
	  background-color: $light_blue;
	}
</style>

Contributing

This project is still a work in progress. I welcome ideas and additions. My goal is to make it have similar functionality and features as the angularjs-plugin.

vuejs-plugin's People

Contributors

Stargazers

Watchers

vuejs-plugin's Issues

forces hiding of node_modules

Hi,

This plugin is forcing my node_modules directory to be hidden. Is there a way this can be an option so each user can decide for themselves?

we need this plugin very much !why not support html template,I hope that

such as angular plugin ,it can auto complete directive and resolive scope property

I hope vuejs-plugin can support HTML template

Doesn't recognize data object properties in template

Here's another issue that makes this plugin pretty much useless:

The images below show a single file .vue component. The mustache tag here should represent the value of the msg property on the corresponding data object:

But it doesn't!

Hope this repository is still alive)
Thank you.

Not working in current EAP anymore

IntelliJ IDEA 2017.1 EAP
Build #IU-171.3019.7, built on February 7, 2017

'Could not initialize class' Error

Hello, I encountered an error after installing this plugin.

My WebStorm version is 10.0.3, vuejs-plugin version is 1.0.1.

I've tried to change the JDK bundled with WebStorm (from 1.6 to 1.8), however it made no sense.

can not download the plugin from https://plugins.jetbrains.com/plugin

VueJS plugin appear to leak and is causing hangs in IntelliJ Ultimate 2017.2.6

I'm finding it nearly impossible to use the VueJS plugin in IntelliJ.

I've narrowed it down to this plugin by turning a lot of other unneeded plugins off. If I turn just the VueJS plugin off, everything is fine.

Here is after full index and 5+ minutes of sitting idle w/ VueJS disabled:

I then enable the VueJS plugin and restart, letting it fully index and sit idle:

Then if I let it site idle for a lot longer, I get a warning from IntelliJ about running out of memory (I already bumped it from 750M to 2048M)

While the large use of memory isn't so impactful, when trying to work in IntelliJ I get the spinning beachball every few minutes just scrolling around, trying to select text or even typing.

.vue eslint support

Hi,

It's possible to add the eslint support into webstorm to the Vue files ? In the js file, eslint works fine but it does not work actually in the js part of the Vue files.

Thanks a lot

Default language for script tag

I think it may be a good idea to set a default language such as babel for script, so that webstorm can work correctly.

Add ability to add breakpoints in .vue files

Currently it is possible to debug .vue files by adding breakpoints in .js files and stepping in, but it is not possible to directly add a breakpoint in a .vue file. It would be useful to use direct breakpoints.

Maybe it is not possible to add this feature. As per the documentation:
"JavaScript line breakpoints can be set in the JavaScript context inside *.js or *.html files."
Source: https://www.jetbrains.com/help/phpstorm/2016.3/types-of-breakpoints.html

Cannot resolve absolute path file

Syntax support for `.vue` files

This a feature request. Right now, webstorm is pretty stupid about it's support for .vue files; first, you need to tell it that they're html files, and then you need to do several hacks to get ES6 support in the <script> tag. You can't even get less or scss support working for the <style> tag at all.

This plugin could help alleviate that by registering .vue as a filetype it can highlight, and then correctly highlighting the various portions of the file. (I know nothing of WebStorm plugin development, just that I've seen things like this done before.)

Custom html attributes

¡Thanks for making this plugin!

¿Could it also add Vue's custom html attributes?

So they don't get underlined as wrong:

Icons should have recommended naming notations

According to DevGuide icons should have the following naming notations:

iconName.png
[email protected]

Please see http://www.jetbrains.org/intellij/sdk/docs/reference_guide/work_with_icons_and_images.html

Warning for required attributes when using object binding

I am writing an application in Laravel with Vue. My component has a required options property.

The <script/> part of my component looks like the following

export default {
    name: "locale-changer",
    props: {
        url: {required: true, type: String},
        current: {required: true, type: String},
        options: {required: true, type: Object},
    },
    // ...
}

Because the options property should be an object, I have to bind the property with the : notation:

<locale-changer 
    url="{{ route('api.locales.update') }}"
    current="{{ $user->locale }}"
    :options="{{ $locales }}">
</locale-changer>

When binding any property with the : notation. Phpstorm gives me a warning about a missing required property. Is this something that can be suppressed with the plugin?

The evidence:

I tried to search for a duplicate issue but I couldn't find it. Maybe I'm bad at searching. Please let me know if you need to know anything more.

A strange bug

I write my template as follow

<template>
    <div></div>
</template>

<script>
    export default {
        name: "##name##"
    }
</script>

<style scoped>
</style>

And I have not found any more doc to tell me can not to write like that template, when my webstorm initialize over, I found my webstorm can not recognize any one HTML tag or HTML tags' attribute.
The beginning, I only know when I write one attribute with '=', my webstorm fail to add '""' follow, and when I write some word follow, it add "" follow.

<div id=my""></div>

I can not found any help from google or another place, and I spent a lot of time discovering the cause of the problem.

IDE does not find any method or variable from $root

Autocomplete is converting to camelCase when it shouldn't, and not when it should

Hello! I am using PhpStorm 2017.1.4 on Windows 7 Professional x64. I just noticed a weird thing about JetBrains' VueJS Plugin code. I'm trying to use a component called "enrollmentEntry" as a child component of my main Vue component. Here is the code of enrollmentEntry.vue:

<p class="enrollmentEntry">
    <strong>_____ {{entryTitle.toUpperCase()}}:</strong> <small><slot></slot></small>
</p>

</script>`

The problem is that VueJS Autocomplete is suggesting "enrollment-entry" as a tag name; it should be "enrollmentEntry." Meanwhile, it is suggesting "entryTitle" as an attribute/prop name; it should be "entry-title." Yes, I know that HTML tag names are also case-insensitive. However, the VueJS interpreter checks tag name and component name equality by simply converting them both to lowercase. Meanwhile, it checks attribute/prop inequality by running a utility function to convert the property key to kebab case and checks equality of the attribute name to the result.

Thank you!

Stuart Simon

Formating of sass in a .vue file

Any chance of some improved Sass support in a .vue file.
Am able to use it but formatting is awful and breaks code.

Documentation in VueJS component not surfacing in UI documentation popups

Hi, it'd be neat if the documentation written in VueJs Components would be presented on hover documentation popups within IntelliJ, as expected.

https://alligator.io/vuejs/propdoc-document-components/

https://imgur.com/a/bQI3n

Cheers.

Crashes under Storm 2016.1

I had to disable the plug-in - it silently crashes under the just-released Storm 2016.1 update.

It was blocking the recent projects list from working - which I think is partially due to poor plug-in crash handling in Storm, but either way, the plug-in doesn't seem to work under this release.

export default at vue component is marked as unused after update

Hello.
I updated Vue plugin to '172.3095.13' version.
After than, all 'export default' at component of Vue are marked to unused one.
All components have unit test, so they aren't unused one.

Thank you.

Vue component support for SASS/SCSS is flaky

The stylesheets seem confused about by using mixins, imports, and I get all kinds of wrong hints like "} expected" when using @imports.

Can anyone please point me in the right direction of how to help fixing this?

Add option to disable automatic imports

I use Element's UI library wjich registers all it's components globally.

Yet every time I use auto completion inside my component, the plugin adds an import line and a components property to my component.

An option to disable this behavior would be nice.

ES6 Fat Arrow Functions

I'm having trouble getting phpStorm to recognize ES6 fat arrow functions in my .vue components.

Before:

After Code Reformat:

I have the JavaScript language version set to ECMAScript 6, and it works great outside of .vue components. Any suggestions?

Support IntelliJ 2017+

I just updated to IntelliJ 2017, but this plugin is disabled because it's not compatible.

Hides node_modules folder in PHPStorm 2016.2+

I've noticed since PHPStorm and Webstorm made node_modules an excluded folder, this plugin completely removes it from the folder list so it can't even be navigated to any longer.

I've disabled all other plugins and once this is the only one I've turned back on and node_modules disappears from the folder list after restarting PHPStorm.

Windows 10
PHPStorm 2016.3

Closing curly braces not appearing?

Nevermind ... turns out I am using the JetBrains plugin.

Tab spacing override

The vuejs-plugin seems to override some tab spacing settings - eg when set to 2 in webstorm settings, in some cases (eg blow start of for loops) in .vue files tabs still are 4 spaces. May not be a vuejs issue as I'm not a webstorm expert, but something worth testing.