How to configure atom for JavaScript development

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.

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

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

1 Like

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.

2 Likes

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?

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

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?

Have you seen this support topic?


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

Maybe you should call his boss and let him know :smiley:

@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: Sunsetting Atom - The GitHub Blog
  • 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.

2 Likes

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.ā€™ :slight_smile:

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

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).

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.