Beginner Question - how to preview/run Javascript in Atom?


#1

Hi ATOM community,

I am trying to teach myself programming through Javascript. How do I preview my Javascript code in Atom? I see a lot of youtube videos where the preview pane just shows up on the right side already displaying the preview, how does that activate when you create your code? I saved my file with the .js and the script changed colors in various segments - strings, variables, etc. but it doesn’t preview the code. I should not need a separate package to create basic Javascript right? Also is it possible to write HTML with my Javascript and preview both of them in the same preview panel? Is there a hot key I can press, like Ctrl + R or View> Run(these don’t exist) or preview button?

Best,
djluhill


#2

Please see the FAQ: How do I build or execute code I've written in Atom?

The markdown-preview package can help preview static HTML. But if you’re trying to do something more complicated than just plain HTML, a browser is probably the best way to view it.


#3

Hi Leedohm,

I did the steps in the FAQ but that still didnt let me preview the code in the right console panel. Also what is REPL mean?

Best,
djluhill


#4

An environment where you can rapidly prototype bits of code before you add them to your project. Here’s more information (which is also linked to from that FAQ entry), and here’s the site you want to go to if you want to use a REPL.


#5

Could this be something like script or even in the case of Javascript it might be the built-in (developer tools) console?

A picture would be real nice!


#6

Hi! An example of what you mean would help get a better answer but I like to test out snippets a lot and this is what I do!

  1. Press CTRL-SHIFT-I to open the devtools
  2. Click on sources tab
  3. Then snippets tab inside
  4. I click create new snippet
  5. Then I type my test code
  6. Then press CTRL-Enter
  7. A console opens up underneath to show output!

Another way is I created a package to preview html pages inside atom! It’s called atom-browser you can right click your html file and do atom-preview. This might be something you are interested in: Atom-Browser

Okay hope it might help!


#7

The run-in-atom package execute selected JavaScript/CoffeeScript code directly in the Atom console


#8

Wow! that is a nice share.
I wonder however - is it still ‘relevant’. The package does not seem maintained, do you know if it still runs under the current version of Atom V1.19?

Edit: I see you have yourself added a possible expansion only moments ago I hope the package owner returns…
Latest commit 0280661 on 8 Apr 2016 - Merge pull request #6 from kdmny/api-updates


#9

You’re probably right. Did a fork with additional support for TypeScript and LiveScript, as well as Babel presets.