Tips on jQuery development in WebStorm
There’s no doubt that everyone is using one or another library to access/manipulate the DOM, and jQuery is currently the most popular one. And WebStorm has lots of small but really neat features to help you coding. Let’s quickly get a feeling of what we have.
1. Selecting DOM elements
The first thing you usually do is selecting some DOM element(s), right? WebStorm will help you with completion for the most used selector types, such as elements ID-s:
or CSS classes:
Sure you can use more complex selectors, which are also supported, like mixed matching:
or parent-child selectors.
Or you can switch to “chained calls” style – no problem!
Since most of jQuery selectors follow CSS selectors syntax, WebStorm will support you writing any valid CSS fragment, providing live code checking and completion.
Side note: if you’re using Dojo toolkit or prototype.js library you will get the same functionality for selecting DOM elements.
2. Element manipulation
Once selected, you may want to check or tweak elements styles using jQuery’s neat hasClass/addClass/removeClass/toggleClass helpers. Needless to say, our IDE will remind you all the jQuery functions names with the bold highlight:
then give an insight on method parameters:
Great! Now WebStorm can help you with the CSS classes themselves:
By the way, you can instantly have all the official docs for any jQuery function in context just by using External documentation action (Shift+F1):
In WebStorm, there are tons of helpful features packed: navigating through the code and inspecting it, checking for errors and potential problems, code refactorings etc. etc. Just keep following this blog as we will show you lot more cool stuff soon!
JetBrains Web IDE Team
Working with Windows Azure SQL Database in PhpStorm
PhpStorm provides us the possibility to connect to Windows Azure SQL Database right from within the IDE. In this post, we’ll explore several options that are available for working with Windows Azure SQL Database (or database systems like SQL Server, MySQL, PostgreSQL or Oracle, for that matter): …
Change signature refactoring in PhpStorm
A very powerful refactoring is the Change signature refactoring in PhpStorm. It enables us to modify a function signature in many ways: we can change the function name, change its visibility, add, remove and reorder parameters as well as rename parameters. (more…)…
Folding for imports in PhpStorm 6.0
In PhpStorm 6, we've introduced code folding for imports. Any list of imports will now be folded into a single line. This greatly reduced clutter in your editor when having a lot of imports! (more…)…
Drag & Drop Project Files to Remote Hosts in PhpStorm
The Remote Host pane allows us to work directly on a remote server through FTP, FTPS, SFTP or a local/network folder. A lot of people asked us to add drag & drop to the Remote Host pane in PhpStorm. Good news: PhpStorm 6 comes with drag & drop as well as copy & paste support from the pro…