Ready to Start Your Career?

Atom for Elite Coders - Part 1

y3bg0l 's profile image

By: y3bg0l

May 4, 2017

atom-coder-toolur-com-compress-imageToday I’ll show you how to be more efficient and faster when you want to code. My secret is Atom, an open source text editor, used by the majority of elite coders under the same vim, sublime text etc. Atom has the particularity to contain thousands of packages that will make your job easier. You can download it at, https://atom.io, for Linux, Mac, and Windows.After installation, open atom and you will see this screen.To the left, you have documentation of atom and to the right, you have how to manage atom. It is there that you can put an atom day install packages, themes and change the keyboard shortcuts.You can find the settings tab with the combination “Control + ,” (without quotes) for Linux, and “Command + ,” on a Mac.The first thing I do, when I’m on Atom, is start looking for a theme that suits me. With Atom, you are spoiled.  Go to settings> install packages> click on themes> enter the name of the theme you want, for example, Monokai or Duotone, and then choose dark red.For more themes, see here https://enrmarc.github.io/atom-theme-gallery/To change the theme, you go to Settings> themes> UI theme for the graphical theme and screen Syntax theme for color syntax. put the color you like.After the theme, I set my first plugins that go me the job. Go to settings> install packages > search emmet and then jshint.
  • EMMET is a plugin that allows you to generate your syntax or tags with the tab key only
  • JSHINT is a javascript validator.
Now create a new file for practice. Go to file> New File or “Control + N”> save test.html.To quickly generate an HTML skeleton with emmet, we type “! + Tabulation” (without quotes). As you see, the HTML skeleton was established easily.If you want to create such a list that has no order, add inside a div with an id attribute. You can enter div# id> ul> li * 3 and tabulation. See the image.I invite you to learn more about emmet, https://atom.io/packages/emmetJSHINT for this part detects an error in your javascript code if you forget; or if the syntax is not correct. As shown in the following figure.I hope that this first part has convinced you of the atom efficiency. In the second part, we will see more fun plugins and shortcuts that allow you to be elite coders.Happy hacking!
Schedule Demo