HTML and CSS are well supported in PyCharm. This section is by no means exhaustive, but does provide a detailed account of the tools that will help you stay productive. PyCharm provides tag completion for HTML, but it has so much more than this that tag completion is the least exciting feature in its feature set.
Emmet is essentially shorthand HTML and CSS. You type the abbreviations of what you want, hit Tab, and PyCharm will automatically convert that shorthand into the desired tags and subelements.
For example, if we were to type in div.container
, we would be creating a div
tag of the container
class. In other words, the following:
div.container
turns into:
<div class="container"></div>
with your caret automatically placed inside the div
tag.
This section won't teach you the basics of Emmet; the Emmet documentation site does a much better job: http://docs.emmet.io/
However, PyCharm has its own twist on Emmet, and this includes extra support for XML tags as well as automatic insertion of vendor prefixes that can be customized inside the Emmet subjection of the Editor settings. Depending on what CSS selector you're using, you can have PyCharm autocomplete browser prefixes for you and customize what browser prefixes you support. The default prefixes are updated with every PyCharm update.
What Emmet for CSS essentially means is that now when we type in an attribute, such as animation-delay
, we will get browser-specific attributes written for us as well.
Emmet also supports surround templates. For example, we can make a selection, invoke Surround With…, and use Emmet abbreviations to surround the relevant HTML.
Live debugging is one of the best PyCharm features. It renders your HTML and CSS in real time, meaning that the changes you make inside your editor are reflected in your web browser. It also channels Chrome's JavaScript console directly to PyCharm's console, meaning that you can control your web browser directly from within PyCharm.
However, before we are allowed to use live edit or live debugging, we need to make sure that we have the JetBrains IDE Support extension installed.
Once this is installed, if we debug an HTML page, PyCharm will automatically figure out how to set up the connection between Chrome and itself. I wouldn't recommend messing with the settings of the extension, but I'm going to show you how to mess around with it anyway.
In most versions of Chrome, we see the JetBrains extension after we've turned on developer mode. In doing so, we gain access to the Options menu.
Inside Options, we have a few things that we can change. First of all is the port number. JetBrains uses a pretty specific port number, so don't change it unless you absolutely need to (in case you see a connection refused error pop up somewhere in PyCharm).
However, there is an option that allows you to whitelist a few sites that you want to make cross-site requests to (in case your security options are preventing a request to a specific site).
Unfortunately, I can't show you the pure awe that you feel when using live debugging, I simply can't convey it through a book (because it's something that's happening). But here are a few things to note:
alert("I am from the future");
into the console and see what happens.This is such a neat feature that I always debug when I edit. This may just be because I'm never really sure if my styles work the way I want them to, but it's good fun anyway.
File watchers are language and framework agnostic, but I feel that they are most relevant when working with HTML, CSS, JavaScript, and transpiled languages. Previously, we talked a little about file watchers in this chapter as I wanted to showcase the simplest way of setting up a watcher that suits most needs. However, the file watchers in PyCharm are very powerful and allow you to leverage macros.
File watchers essentially run a tool on a kind of specified file after that file has been changed. For example, most of the preceding templates are for transpiled languages such as CoffeeScript and LESS. However, some of them carry out different tasks such as the CSSE CSS Optimizer template. Let's start off by looking at a sample template.
Due to this output filter, PyCharm can make links from the output console to the error in question. The $<ALLCAPS>$
variables are macros. These macros are used to recognize where the file is and the line and column number of the error message.
$JDKPath$
.