How to configure atom for JavaScript development

sergio.am.spina · February 11, 2021, 5:42pm

I just installed atom and therefore am not an expert yet. Which plugin do I need to install to configure atom to work as the freeCodeCamp editor?

What I need is for the JavaScript interpreter messages to appear in a panel WHILE I type the code; eg:

"ReferenceError: <symbol> is not defined"
"ReferenceError: assignment to undeclared variable i";
"SyntaxError: unknown: Missing semicolon (2:15)"

Also it would be very useful if I write in the code console.log(alpha(index)) in the panel appears the output of the function console.log().

Many thanks.

JeremyLT · February 11, 2021, 5:46pm

I’m not sure what you mean by this. The editor on freeCodeCamp.org/learn can’t really be changed.

bbsmooth · February 11, 2021, 5:50pm

It will. The output of any console.log statements you put in the FCC editor will appear in the output box below the editor.

chuckadams · February 11, 2021, 6:01pm

I’d suggest instead of Atom using Visual Studio Code instead, which will do most of what you want out of the box and has a much larger extension ecosystem for doing more. FCC’s editor component is Monaco, and that’s what VSCode is based on.

sergio.am.spina · February 11, 2021, 6:13pm

I’m speaking about the Atom editor: which plugin for Atom do I need to install to configure Atom (the text editor) to work the same way as the freeCodeCamp editor?

sergio.am.spina · February 11, 2021, 6:15pm

Ok, But I want the same behavior in the Atom editor

sergio.am.spina · February 11, 2021, 6:19pm

Yes, you are right: VS Code is a great editor. But my boss demands that we only use Atom.

So, how can I configure Atom (the editor) so that it works in a similar way of the FCC editor?

JeremyLT · February 11, 2021, 6:20pm

Have you seen this support topic?

Really though, I do recommend VSCode over Atom. Atom’s package ecosystem is pretty anaemic in comparison.

jsdisco · February 11, 2021, 6:58pm

Maybe you should call his boss and let him know

@sergio.am.spina Don’t listen to the cool kids, I’ve been working with Atom forever and it’s perfectly fine (especially if you’re just starting out). I’m sure that VS Code is great, but I am a creature of habit and I like my Atom.

To make it work “like FCC”, you’ll need to

download this extension: atom-live-server
add a project folder (“file” → “add project folder”) with your current project (there should be an index.html in there)
click on “packages” → “atom-live-server” → start server

It will automatically open your default browser. To access the developer tools/console, hit “f12” (in Chrome or Firefox", you’d have to research if you use a different browser). Now if you console.log something in your script, or you have any errors, it will appear there in the console.

JeremyLT · February 11, 2021, 7:11pm

Atom is fine. It’s just not my recommendation. It’s fine to listen to a recommendation and make a different choice.

Last year my recommendation would have been ‘Just use notepad. You don’t need anything newer or better that the cool kids recommend just because it’s newer and more fully featured.’

It is a really bizarre level of micromanagement to have a boss dictate development tools to this degree.

jsdisco · February 11, 2021, 7:24pm

But since he doesn’t have that choice…

As for VS Code, yeah I’ll probably kick Atom out of the door as soon as I try VS Code the first time. I just couldn’t be bothered yet (lack of necessity).