Javascript development, in a Python IDE?

I hear this a lot: “I use PyCharm for Python, do I need to get WebStorm to do web front-ends?” It makes sense that people would say this: PyCharm is for Python, WebStorm is for HTML/CSS/JS.

Thing is, PyCharm has the same engine inside it that WebStorm has (and vice versa.) You can do WebStorm stuff, in PyCharm.

For example, let’s run some JavaScript:

hello_node_run

Look at that…JavaScript running in PyCharm via /usr/local/bin/node. Same way you do it in WebStorm. How can that be?

hello_node_pref

Turns out PyCharm has the IntelliJ plugins that do the JS/HTML/CSS stuff, and much of it is wired into the PyCharm UI. The gif above shows how it is exposed into PyCharm preferences, which let you choose your interpreter and install packages, just like with Python interpreters in PyCharm.

Just like with Python, this creates a Node-based “Run Configuration”:

hello_node_config

That’s all well and good, but surely there’s no JavaScript debugger in PyCharm?

hello_node_debug

Webinar Tomorrow, Tuesday Jan 12

Want to see more? There’s more to show, and tomorrow’s PyCharm webinar is the start. I’m really looking forward to the webinar and the subsequent material.

Advertisements

6 Responses to “Javascript development, in a Python IDE?”

  1. Nico Poppelier Says:

    Pythonistas might enjoy Coffeescript instead of plain Javascript, and for that you do need Webstorm.

    • Paul Everitt Says:

      They might enjoy ES6 also. I’m curious why you think the Coffeescript IntelliJ plugin won’t work on PyCharm?

  2. Joey Says:

    HI Paul, your PyCharm vids rock. Sometimes a bit fast for me because they’re so rich: I often have to pause and rewind. One comment about WebStorm features inside PyCharm: JetBrains has an XPath plugin in IntelliJ, phpStorm and WebStorm. For some reason it doesn’t seem to be available in PyCharm. Odd, given how many people use python / Scrapy for web scraping, don’t you think? Maybe that will change in 2017.1. Wishing you happy holidays.

  3. David Says:

    Nice. And still, some important features are missing (Find usages, for exmaple). Is there some way to fix it?

    • Paul Everitt Says:

      Hmm, I actually used “Find Usages” today, in PyCharm, in an ES6 .js file. Can you give me more details (PyCharm Professional version, a snippet of the declaration and a snippet of the usage)?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: