PhpStorm .vue pug styling - vue.js

Is anyone getting issues with syntax highlighting for .vue files within PhpStorm when using pug?
Is this something that it only available in WebStorm and not planning on coming to PhpStorm?
Within PhpStorm my view file looks like the following:
I have the following plugins installed:
.ignore, AngularJS, Apache config (.htaccess) support, ASP, BashSupport, Behat Support, Blade Support, Bootstrap 3, Codeception Framework, CoffeeScript, Color Ide, Command Line Tool Support, Copyright, CSS Support, CSSReorder (beta), CVS Integration, Database Tools and SQL, Docker integration, Drupal Support, EditorConfig, EJS, File Watchers, Gherkin, Git Integration, GitHub, GNU GetText files support (*.po), Go Lang Plugin, Google App Engine Support for PHP, Haml, hg4idea, HTML Tools, Ini4Idea, IntelliLang, JavaScript Debugger, JavaScript Intention Power Pack, JavaScript Support, Joomla! Support, Karma, Less support, Markdown Navigator, Markdown support, Material Theme UI, NodeJS, Perforce Integration, Performance Testing, Phing Support, PHP Docker, PHP Remote Interpreter, PHPSpec BDD Framework, PhpStorm Workshop, Pug (ex-Jade), QuirksMode, Refactor-X, Remote Hosts Access, REST Client, ReStructuredText Support, Sass support, Settings Repository, SSH Remote Run, Stylus support, Subversion Integration, Task Management, Terminal, TextMate bundles support, Time Tracking, tslint, Twig Support, UML Support, Vagrant, Vue.js, W3C Validators, WordPress Support, XPathView + XSLT Support, XSLT-Debugger, YAML
If I open the same file within WebStorm it highlights as expected.
Im running Phpstorm 2017.1.4 & Vue.js plugin is version 171.4424.63. I have removed the Vue.js plugin and re-installed it a number of times with no luck.

it works in PHPStorm just in the same way as in Webstorm:
from your screenshot it seems that you have the wrong (old) Vue.js plugin installed. what PhpStorm version do you work with?

Thanks #lena
Within (Settings | Editor | File Types) *.vue was not listed.
I had a section called Vue.js Templates but it empty with no Registered Patterns. Adding *.vue in there fixed my issue.
Thanks.

Related

IntelliJ Ctrl-Click on method and autocompletion in HTML doesn't work

I've started using IntelliJ for angular2 development recently but there seem to be a bug. I know from WebStorm that if I have following html:
<button (click)="onHaveClicked()">Button</button>
I should be able to jump to the method implementation in my typescript file using ctrl-click. But this shortcut isn't working at all. I've tried multiple different files.
Also autocompletion in html doesnt work at all. It's showing no angular attributes like ngFor etc. Angular2 is of course installed.
Was somebody with the same problem able to solve it?
IntelliJ doesn't come with Angular support built in. You can however enable it by installing the plugin. Settings -> Plugins -> Install Jetbrains Plugin -> Search for Angular.
This is a general thing with IntelliJ and the other editors. The specialized editors (like PhpStorm and WebStorm) comes with what you need for that editor by default. IntelliJ, which is more general, it often has to be installed manually.

Syntax highlighting for scala.html and routes files in IntelliJ / Play framework

I am new to both IntelliJ and the Play framework. I noticed that after installing IntelliJ and importing my first Play application, syntax highlighting is not working properly for both *.scala.html files and the routes files. I was able to modify the settings for the *.scala.html files to have them recognized as Scala files, but this isn't actually correct because the scala templating system is not pure Scala.
Here's a screenshot, in case it helps:
In the official Play video tutorials there seems to be a special syntax highlighting setting for these template files, but I don't know how to add this to IntelliJ. Here's a screenshot from this tutorial and how I would like the syntax highlighting to look:
Also, I couldn't find any solution for the routes file. Any help would be most appreciated!"
P.S. I enabled the Vim emulator during installation of IntelliJ. I don't know if this had any effect on the syntax highlighting defaults...
Playframework full support in only available in IntelliJ ultimate edition a commercial one.
Community edition (free version) that you probably are using doesn't have any support for playframework it only supports Scala (language).
Routes and *.scala.html files are part of the framework not the language.
You may like to purchase IntelliJ ultimate edition or would like to go for Scala IDE (based on eclipse) which is an open source IDE for java and scala, it seems to have full support for play 2.x.
For *scala.html syntax highlighting
Preferences > Plugins > Install Jetbrains plugin...
Then install the Scala plugin
Restart IntelliJ and syntax highlighting should work.
For routing file highlighting
Preferences > Editor > File Types
Under the registered patterns for HTML Routing Support For Play 2 Framework if *.routes isn't already there, add it. Or add however you plan on naming your routes files.

Difference between WebStorm and PHPStorm

I'm choosing an IDE for web development and I would like to know what the differences between WebStorm and PHPStorm are.
I couldn't find any major points on JetBrains' website and even Google didn't help that much.
All I know now is that PHPStorm doesn't support JS like WebStorm, but is able to due to plugins. Is this the only difference?
I couldn't find any major points on JetBrains' website and even Google didn't help that much.
You should train your search-fu twice as harder.
FROM: http://www.jetbrains.com/phpstorm/
NOTE: PhpStorm includes all the functionality of WebStorm (HTML/CSS Editor, JavaScript Editor) and adds full-fledged support for PHP and Databases/SQL.
Their forum also has quite few answers for such question.
Basically: PhpStorm = WebStorm + PHP + Database support
WebStorm comes with certain (mainly) JavaScript oriented plugins bundled by default while they need to be installed manually in PhpStorm (if necessary).
At the same time: plugins that require PHP support would not be able to install in WebStorm (for obvious reasons).
P.S.
Since WebStorm has different release cycle than PhpStorm, it can have new JS/CSS/HTML oriented features faster than PhpStorm (it's all about platform builds used).
For example: latest stable PhpStorm is v7.1.4 while WebStorm is already on v8.x. But, PhpStorm v8 will be released in approximately 1 month (accordingly to their road map), which means that stable version of PhpStorm will include some of the features that will only be available in WebStorm v9 (quite few months from now, lets say 2-3-5) -- if using/comparing stable versions ONLY.
UPDATE (2016-12-13):
Since 2016.1 version PhpStorm and WebStorm use the same version/build numbers .. so there is no longer difference between the same versions: functionality present in WebStorm 2016.3 is the same as in PhpStorm 2016.3 (if the same plugins are installed, of course).
Everything that I know atm. is that PHPStorm doesn't support JS part like Webstorm
That's not correct (your wording). Missing "extra" technology in PhpStorm (for example: node, angularjs) does not mean that basic JavaScript support has missing functionality. Any "extras" can be easily installed (or deactivated, if not required).
UPDATE (2016-12-13):
Here is the list of plugins that are bundled with WebStorm 2016.3 but require manual installation in PhpStorm 2016.3 (if you need them, of course):
Cucumber.js
Dart
EditorConfig
EJS
Handelbars/Mustache
Java Server Pages (JSP) Integration
Karma
LiveEdit
Meteor
PhoneGap/Cordova Plugin
Polymer & Web Components
Pug (ex-Jade)
Spy-js
Stylus support
Yeoman
Essentially, PHPStorm = WebStorm + PHP, SQL and more.
BUT (and this is a very important "but") because it is capable of parsing so much more, it quite often fails to parse Node.js dependencies, as they (probably) conflict with some other syntax it is capable of parsing.
The most notable example of that would be Mongoose model definition, where WebStorm easily recognizes mongoose.model method, whereas PHPStorm marks it as unresolved as soon as you connect Node.js plugin.
Surprisingly, it manages to resolve the method if you turn the plugin off, but leave the core modules connected, but then it cannot be used for debugging. And this happens to quite a few methods out there.
All this goes for PHPStorm 8.0.1, maybe in later releases this annoying bug would be fixed.
There is actually a comparison of the two in the official WebStorm FAQ. However, the version history of that page shows it was last updated December 13, so I'm not sure if it's maintained.
This is an extract from the FAQs for reference:
What is WebStorm & PhpStorm?
WebStorm & PhpStorm are IDEs (Integrated Development Environment)
built on top of JetBrains IntelliJ platform and narrowed for web
development.
Which IDE do I need?
PhpStorm is designed to cover all needs of PHP developer including
full JavaScript, CSS and HTML support. WebStorm is for hardcore
JavaScript developers. It includes features PHP developer normally
doesn’t need like Node.JS or JSUnit. However corresponding plugins can
be installed into PhpStorm for free.
How often new vesions (sic) are going to be released?
Preliminarily, WebStorm and PhpStorm major updates will be available
twice in a year. Minor (bugfix) updates are issued periodically as
required.
snip
IntelliJ IDEA vs WebStorm features
IntelliJ IDEA remains JetBrains' flagship product and IntelliJ IDEA
provides full JavaScript support along with all other features of
WebStorm via bundled or downloadable plugins. The only thing missing
is the simplified project setup.
PhpStorm supports all the features of WebStorm but some are not bundled so you might need to install the corresponding plugin for some framework via Settings > Plugins > Install JetBrains Plugin.
Official comment - jetbrains.com
I use IntelliJ Idea, PHPStorm, and WebStorm. I thought WebStorm would be sufficient for PHP coding, but in reality it's great for editing but doesn't feel like it real-time-error-checks PHP as well as PHPStorm. This is just an observation, coming from a regular user of a JetBrains products.
If you're a student try taking advantage of the free license while attending school; it gives you a chance to explore different JetBrains IDE... Did I mention CLion? =]
In my own experience, even though theoretically many JetBrains products share the same functionalities, the new features that get introduced in some apps don't get immediately introduced in the others. In particular, IntelliJ IDEA has a new version once per year, while WebStorm and PHPStorm get 2 to 3 per year I think. Keep that in mind when choosing an IDE. :)

How to generate JavaScript files from CoffeeScript in IntelliJ IDEA?

I'm trying out CoffeeScript support in IntelliJ, and although the highlighting/completion/refactoring support looks great, I can't figure out a way to automatically compile my .coffee files to their .js counterparts in order to use them in web pages, unit tests, etc.
The documentation mentions using Node for this purpose, but I'm primarily interested in writing client side code. I'd probably be able to create a run configuration that would use Cake to create my JS files, but this won't integrate nicely with IDEA's integrated unit test support, etc.
So... any help?
Use the IntelliJ IDEA plugin: File Watchers.
You would need to install coffee-script package in the global directory. (npm install -g coffee-script).
While you are editing the CoffeeScript file in IntelliJ editor, there would be a notification showing on the top.
Click "Add watcher" and the IDE will compile your code for you on the fly.
More advanced options could be accessed via Project Settings/File Watchers.
See also the official document.

Getting auto-completion to work in an IDE using Coffeescript and external Javascript libraries such as jQuery

I would like to ask how other more experienced Coffeescript developers are using their respective IDE's or editors with auto-complete when developing modular libraries and / or referencing external Javascript libraries (jQuery, jQuery UI, RequireJS, Handlebars, ...).
As much as I've tried various IDE's and plug-ins for Coffeescript, none of these seem to support auto-completion when the project consists of several script files. For example: in Visual Studio I can add a commented directive such as /// <reference path="/js/jquery.js" />. I'd need something similar for Coffeescript.
I have tried following without success:
Visual Studio with Web Workbench by Mindscape
Netbeans with dstepanov's Coffeescript plug-in
Aptana with the Coffeescript ruble
Further, I am aware of Jetbrain's WebStorm 3.x support for Coffeescript, unfortunately, my evaluation period expired before I realized I'd need this feature - can anyone confirm that setting the Javascript / Coffeescript Usage Scope works as expected with auto-complete?
So effectively what I am asking: is there an IDE or plug-in, commercial or otherwise, enabling auto-complete for Coffeescript libraries spanning multiple files?
Hate to answer my own question, but after giving JetBrains WebStorm 3.0.2 another demo run on another box, I figured it worked best and does have 'smarter than average' auto-complete for coffeescript projects. It simply loads all coffeescript files in to a global auto-complete context and you can add external libs (cs or js) as well using the project's scope settings. Could be better, but for now I cannot find any other IDE or tool running on PC or Linux, OSS or paid, that tops WebStorm and I don't have the fortunes to explore OSX alleys.
I am sure future tools, plugins, IDE's will pop up for various platforms that do offer great coffeescript module management and proper contextual auto-completion in the editor. So please, do keep the suggestions coming.
Thanks!
I personnaly use Kdevelop. I can't remember if I installed a plugins or something to get it work with coffeescript.
But it works very well, the highlighting colors are pretty, when ctrl+d it add coffeescript commentary and so on.
Also I do make compilation directly in KDevleop.
Well also it's free, I am using it on linux debian but I think it works on most platforms.
Check it there : http://kdevelop.org/