PyCharm's support for JavaScript is exclusive to its professional edition. These sets of tools are common across other IntelliJ IDEs (see Chapter 9, Version Control Integration). This chapter is by no means exhaustive because most of the support for JavaScript in PyCharm comes from plugins. If we were to dive into all the plugins available for IntelliJ IDEs, we would've written several books on the topic. So, to keep this short and sweet, these are some of the most used features that any JavaScript developer would find useful. Here is a quick run-down of what we're going to cover:
- JavaScript support: This section of the chapter is the largest and covers many features that developers would find useful. We are going to look at JavaScript code completion, NodeJS support, library support (for libraries such as jQuery and
underscore), transpiled language support, and code quality tools such as JSLint. This section is rather large, so it's been broken down into much smaller subsections for your convenience. - HTML and CSS: This section deals with support for HTML, CSS, Emmet, and live editing, as well as transpiled CSS languages such as SASS and Less and transpiled HTML languages such as HAML. We are also going to take a quick look at watchers and how they can make the task of compiling these files much simpler.
JavaScript is all around us, and with the advent of NodeJS, it has become (much to my chagrin) undisputedly the most prolific programming language. PyCharm has several JavaScript-specific features to deal with the influx of JavaScript needs. However, it's impossible to cover everything with regards to JavaScript support, and many of the features will appear as you work in PyCharm. So, let's look at some of the best tools that PyCharm has to offer for JavaScript. We will start off with the simplest—code completion.
JavaScript is a difficult language to provide code completion for. Luckily, PyCharm has powerful tools to make code completion a lot better in JavaScript.
There are two things that make JavaScript code completion in PyCharm outstanding—smart type completion and support for documentation, including TypeScript stubs. If you don't know what that means just yet, let me demonstrate. JavaScript has support for JSDoc; this means that the documentation and the types will help out in code completion. Let's start off by making an Immediately
Invoked Function Expression, and in it, let's create a function called greetNames:
(function () {
function greetNames(names) {
for(var i = 0; i < names.length; i ++) {
console.log("Hello, " + names[i])
}
}
})();While writing the preceding code, PyCharm will provide several completion suggestions for the function, and when names is made a parameter, names.length should automatically come up as a viable option. However, in JavaScript, we often want specific suggestions as in many cases, PyCharm offers us a host of possible code completions that we do not want. One way to fix this issue is to include a JSDoc stub. With stubs added, our code looks similar to this:
/**
* This function greets all the names in an array of names
* @param {Array} names
*/
function greetNames(names) {
for(var i = 0; i < names.length; i ++) {
console.log("Hello, " + names[i])
}
}In the stub, we specify that names is an array, and so, when we go for suggestions, PyCharm will offer up length as one of the very first suggestions, and this is because PyCharm understands that names is an array. If we get the quick documentation on names, we see that PyCharm sees names as an array.
This kind of documentation will also help when we make the function call.
This can become very useful when dealing with large code bases. Also, note that PyCharm understands the type of the anObject variable as well. Inserting a JSDoc stub will come automatically if you want it to. Go to the line above the function declaration, type out /** and then hit Enter. PyCharm will automatically create the @param lines for you.
When writing client-side JavaScript, we almost always use third-party libraries. This can often be difficult for PyCharm to understand when you have a lot of them. Furthermore, if we're using the minimized JavaScript files, PyCharm will not be able to give us the kind of code completion that we expect if we had written these files ourselves with the proper documentation stubs. This problem is remedied by including library support in a specific JavaScript file. Inside the JavaScript file, we can right-click anywhere and choose to add a supported library; in this case, we are going to add support for jQuery.
This will allow PyCharm to offer code completions based on jQuery's official documentation.
PyCharm is not limited to just jQuery or just the most popular set of libraries, it can support a wide range of libraries because of the TypeScript stubs made by the TypeScript community. In order to add support for a library, we simply need to head over to the Libraries section inside the JavaScript preferences.
There is of course official library support, but more interestingly, we can also download support for lesser-known libraries (such as underscore) because of the TypeScript stubs.
In this example, we are going to try and download support for underscore.js.
Once we've successfully downloaded the stub file for underscore, it will appear as a library that is supported by PyCharm:
It is best to disable the Enabled box, and only assign library support to the files when you need it, otherwise, your suggestions will get overly cluttered.
We can now choose to include underscore as one of our libraries inside the file:
So, if we want to use underscore functions now, we get code completion as well as type checking (because TypeScript is a statically-typed language):
In most cases, I prefer using TypeScript stubs over the community or official documentation simply because the stubs are of very high quality and always provide type information that can be very handy when managing large projects.
PyCharm supports TypeScript and CoffeeScript (not the iced version though). Support extends quite far: code completion, syntax highlighting, and the automatic creation of map files are supported. Furthermore, automatic watchers to turn these files into .js files are added when you initialize a TypeScript or CoffeeScript file. Although no templates exist for automatic TypeScript or CoffeeScript creation, simply creating a file with a .ts or .coffee extension will cause PyCharm to recognize those files and provide the required code completion/syntax highlighting for those languages.
As soon as we create the file, PyCharm will prompt us to add the watcher that compiles this TypeScript file into a JavaScript file. It will also generate a map file to aid with debugging.
We can configure the watcher in the dialog window that pops up when we choose to add the watcher.
This may seem intimidating at first, but you really don't have to do anything other than say OK to all of this. We will go into depth about this later when we will talk about watchers. For now, the two most important parts of the whole dialog window are [1] and [2]. Number [1] indicates the TypeScript executable that will be used to compile your TypeScript file; make sure that you have TypeScript installed, and if you don't have it, simply install it by using the following command:
npm install –g typescript
Number [2] indicates when the console will be shown. As you write in your TypeScript file, PyCharm will automatically run the executable every single time you make a pause or save the file (this can be changed, however) and produce two files, a .js file and a .map file (which helps while debugging).
If the compilation causes an error, only then will you see the console pop up at the bottom of the PyCharm's window.
Notice how the window shows you what command was executed, and what the console output was. When we finally finish typing out class, the console will disappear.
This support is identical for CoffeeScript, with the only difference being that CoffeeScript will have a separate executable. However, ES6 support (using traceur) is a little different. In this case, we need to make sure that we have traceur installed; you can do that with the following command:
npm install –g traceur
To support ES6, we need to tell PyCharm that we want to use ES6 as our JavaScript standard. To do this, all we need to do is change the version number of ECMAScript that PyCharm is using.
Unlike last time where we created a specific extension, to use ES6 all we need to do is create a new .js file, and PyCharm will ask us to add a traceur watcher for it.
And once we add the watcher, the same thing will happen as it did for TypeScript, a dialog window will pop up, asking for an executable and other options.
Support for third-party frameworks is done through plugins. There are so many plugins that aid JavaScript development that it is impossible to cover them all. However, this section talks about the highlights of both the client- and server-side frameworks that are supported.
Through plugins, PyCharm has excellent support for both client-side and server-side JavaScript frameworks. Think of PyCharm Professional as the PyCharm community + WebStorm (an IDE for building JavaScript applications).
On the client-side of things, PyCharm has support for AngularJS, and the support extends to having quick fixes for directives, the creation of controllers, and syntax highlighting for AngularJS templates.
PyCharm also supports Bower out of the box.
PyCharm can support NodeJS through plugins. If we install the NodeJS plugin, we will not only gain node support, but also gain access to custom project creation, with the Express framework. The NodeJS plugin also comes with support for managing the node modules (through npm) you have installed in your project.
