I downloaded both atom and sublime (so far im liking atom more), but not really sure how to get JavaScript running on it. it took me awhile figure out how to even use atom, but i eventually somewhat figured it out.
How do you get JavaScript running?
Also, I made a carousel on codepen and it worked great, but its not working on Atom. is there a language i forgot to install to make it work?
thanks for the info
Atom is just a text editor. I can’t process/execute code.
Actually atom does have a preview function but it is kinda pointless. Just make an index.html, reference your script eg <script src="index.js"></script> and run your index.html file with your browser.
Do you have node configured on your system? You can run javascript code outside of the browser with node.
Just in case you haven’t figured it out from the help above, I’ll make it super easy. Create a .html file and a .js file in the same folder. The .html file needs to have html, body, and head tags and also reference your .js file. These parts are handled out of sight by codepen, everything you write in the codepen HTML section is put between body tags.
You definitely dont need node.js running for this. Just open the .html file in your browser.
Example.html:
<html> <head> <script src="example.js"></script> </head> <body> --your HTML here-- </body> </html>
example.js:
--your javascript code here--
If you want to use jQuery or other js libraries you’ll need another script tag for each one. Just Google the location of one, I’m posting from a phone so it would be a pain for me.
Hope that helps
This should do it, if you want to run it in Atom. You just need to highlight the text you want to run and for my machine, Linux, hit shift-ctrl-b
So how would you recommend to preview your progress if Atom’s is useless?
Hi Tyrant,
If you want to continue using Sublime or Atom, I would suggest previewing your progress in the browser. As Jay said above, create the files and edit them in Sublime or Atom, and then open the .html file in the browser to view.
If you want to have more integration between the editor and previewing, you may want to check out Brackets. It is Adobe’s text editor that has a very good preview feature.
Good luck!
Chris
Hi Chris!
The reason I’m using atoms preview feature is because I couldn’t figure out how to preview my progress via the browser, I tried googling it for awhile by couldn’t find a solid answer. If it’s something simple, would you mind explaining how to do it?
A couple years ago I picked up RoR for a few months and remember that t was simple to preview my progress through a localhost:4000? Tried to research that as well but saw a lot of different answers that didn’t work for me
@Tyrantt47 - I know you said you like using Atom. If you want an editor that makes it really easy to preview what you’re working on, I’d recommend using Brackets. It has this Live Preview button right in the editor. When you click it, the page you’re working on gets opened inside your default browser. It has tons of extensions to add style and functionality to the editor. I included a screenshot to show that all you have to do to preview your site is to click that little “lightning bolt” on the top right of the editor screen.
Thanks, I’ll download it and check it out 
You just need to open the html file in your browser to preview. Go to File, Open, and then find your file.
I’m using jsbin.com … It has HTML/CSS/JavaScript/Console/Output buttons that you can click on or off depending on what you need to see. It saves versions as you go. It’s been invaluable for me.
You can even change the editor settings to look like SublimeText/Atom … Not sure if it will auto-complete or not (if that’s important to you)
JavaScript runs in the browser, so as far as my knowledge goes it can’t be run from text editors. A text editor is just that, it can’t execute code. As an example, you could write some code in C for instance in any plain text editor, but in order to execute the code you’d need to compile it first with a compiler, which will create an executable file that you can run. Since JavaScript is a scripting/interpreted language (you might wanna Google that, it would take too long to explain here, and would be besides the point), browsers are equipped with engines that can interpret the code.
So, the point is that you would need a browser in order to run JavaScript code. With that said, I know that you can use Node.js instead, but unless you want to install it on your machine, you need a browser with an HTML file like others have said.
You may have figured it out by now because this thread is several days old, but for anyone else who is having trouble opening a file in their browser first you find the html file in your computer. Then you can either drag it to your browser of choice to open it or right click, hover over “open with”, and select your browser of choice.
This will work with things like javascript, html, and css. However, if you’re using a server side language such as PHP, I’d recommend checking out XAMPP or something similar.
You can bring up the console in Atom. Ctrl-Shift-I which is the same as some browsers I think.
If you want to see you progress while in atom, you could use this package. Just have the html file open and hit ctrl-shift-h. Those are the defaults on ubuntu anyways.
I am having similar problems with Atom. I wanted to shift away from CodePen but I can’t get Atom to work like CodePen at all. I have researched every preview package available and I still can’t get Atom’s in browser preview to inject my css file. It is useless if I can’t see what my page looks like! But is Brackets better about this type of thing? Thanks.
I haven’t had any problems like that. Are you referencing the CSS file from within your HTML one? That’s one thing starting with CodePen doesn’t teach us.
Yeah, I have tried referencing it in every way possible. As long as the file is local and not online it won’t load in the page preview(which is based from an HTML file that is also local. Right next to my CSS file.)
