Sunday, August 21, 2011

Using pycharm as an HTML/CSS editor

Pycharm is truly a complete IDE.

While going through CSS the missing manual I am using pycharm as my primary editor and it a joy to work with.

Here is one feature I especially like ... I start with a file like this (notice the terrible wordwrap):


I press Ctrl+Alt+L or the menu  Code -- Reformat Code
And pycharm will even fix the wordwrap for me (along with the obvious fixing the tabs in the head section):



Also ... pycharm has a dictionary checker () as well ... which isn't present even in VS2010 without an extension ... and I haven't found a VS extension that is as painless + on the fly.

Look at the colors in the sidebar
Another neat feature is that pycharm shows the color in CSS in the editors sidebar as shown:

Write CSS Faster:
Pycharm comes with snippets for all the css properties you could even want. E.g. to quickly add margin-bottom simply type mb as shown:
Press tab and you get a region where you can type the value you want:
Press Enter and it takes you to the end of that particular declaration so that you can start work on the next one i.e. note the position of the cursor in this picture:


Final words:
With pycharm I see python / django / GoogleAppEngine penetration really skyrocketing.



Enjoy!