Atom for JavaScript Developers

We analyze the usefulness of Sublime Text editor In a post because it has a stable and foolproof stability. Problem: Developed by one person is slow, the documentation is quite obscure.

Atom is slow, lag and it’s as resource-intensive as Google Chrome. However, when you code JavaScript, I must admit that using Atom is super cool !

 

Atom + JavaScript = loveIn this article I will show you how I pimpe Atom to be effective when developing fullstack JavaScript web applications.

Atom in 10 seconds

  • 1 million active users
  • Created and maintained by GitHub since 2014
  • Based on Chromium, coded with the framework Electron (With web technologies like CoffeeScript / JavaScript / Less / HTML)
  • Easily editable with plug-ins written in Node.js (see the hacker’s manual )
  • Very good integration with git and GitHub

altcmdiAnd ? you open the Chromium console. This is where coding from JavaScript directly into a web browser makes sense.

Configuration for basic and community packs

With a simple cmd + ?you access the configuration of Atom. Even if I prefer the customization of Sublime Text you should quickly be able to configure your interface.

 

<img class="aligncenter size-full wp-image-7353" src="https://wesharethis.com/wp-content/uploads/2017/08/settings-packages.gif" alt="Atom settings packages" width="864" height="446" />cmd + shift + P Allows you to search, install new packages and themes.

 

Atom install packagesA strong integration between git and GitHub saves a lot of time. The commands I use most are blame(Open on GitHub: Blame) and issues(Open on GitHub: Issues)

 

Atom git integrationDo not make me think – Use linter

I work on different technologies that have their specificity. To have a better DX and a scalable code of quality it is essential to have different tools of analysis of HTML and JavaScript code .

Teamwork with editorconfig

Personally when I develop – like Google – I use 2 spaces without tabs . This detail may seem annodin but if you use different rules in a team you arrive very quickly at a project or the only rule is chaos.

Yes, I am talking to developers who do not encode your files in UTF8 when backing up or do not add a character at the end of the file .

However, it is very easy to solve these problems. Here is a sample file .editorconfigat the root of the project.

  <span class="c"># EditorConfig is awesome: http://EditorConfig.org</span>

  root <span class="o">=</span> <span class="nb">true</span>

  <span class="o">[</span><span class="k">*</span><span class="o">]</span>
  charset <span class="o">=</span> utf-8
  indent_style <span class="o">=</span> space
  indent_size <span class="o">=</span> 2
  end_of_line <span class="o">=</span> lf
  trim_trailing_whitespace <span class="o">=</span> <span class="nb">true
  </span>insert_final_newline <span class="o">=</span> <span class="nb">true</span>

  <span class="o">[</span><span class="k">*</span>.md]
  <span class="o">[</span><span class="k">*</span>.markdown]
  trim_trailing_whitespace <span class="o">=</span> <span class="nb">false</span>

HTML with linter-htmlhint

Htmlhint is an HTML analysis tool that will help you avoid the syndrome of the closing ghost tag ?.

Create a file .htmlhintrcin your project and add the following rules:

  <span class="err">#</span> <span class="err">Good</span> <span class="err">hunter</span> <span class="err">use</span> <span class="err">HTMLHint</span> <span class="err">https</span><span class="p">:</span><span class="err">//github.com/yaniswang/HTMLHint</span>

  <span class="p">{</span>
    <span class="s2">"attr-lowercase"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"attr-no-duplication"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"attr-unsafe-chars"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"attr-value-double-quotes"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"attr-value-not-empty"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"doctype-first"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
    <span class="s2">"doctype-html5"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
    <span class="s2">"head-script-disabled"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"href-abs-or-rel"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
    <span class="s2">"id-class-ad-disabled"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"id-class-value"</span><span class="p">:</span> <span class="s2">"dash"</span><span class="p">,</span>
    <span class="s2">"id-unique"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"img-alt-require"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"space-tab-mixed-disabled"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
    <span class="s2">"spec-char-escape"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"src-not-empty"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"style-disabled"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"tag-pair"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"tag-self-close"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
    <span class="s2">"tagname-lowercase"</span><span class="p">:</span> <span class="kc">true</span>
  <span class="p">}</span>

JavaScript with linter-eslint

Eslint is a code analysis utility Node.js. It is often used to identify problems with code patterns that violate certain conventions.

 

Atom linter JavaScriptEach project is different but you can start with the configuration used by JavaScript Developers.

  <span class="nv">$ </span>npm install @chtijs/eslint-config <span class="nt">--save-dev</span>

In your file .eslintrc

  <span class="p">{</span>
    <span class="s2">"extends"</span><span class="p">:</span> <span class="s2">"@chtijs"</span>
  <span class="p">}</span>

You can create your own configuration using the Eslint documentation, or you can separate the configuration for your Backend and Front-end like SimpliField.

Autocomplete with atom-ternjs

Tern is an independent JavaScript code analysis engine . It integrates into any editor, in our case it will be a plugin for Atom. Its main features are:

  • Autocompletion of variables and methods
  • Displaying Function Arguments
  • Querying the type of expression
  • Find definition of something
  • Automatic refactoring

Configuration

  • Open any JavaScript file in your project
  • Packages Atom Ternjs > Configure project
  • The configuration file appears.
  • “Save & Restart Server” to create / update the file.tern-project
<span class="p">{</span>
  <span class="s2">"ecmaVersion"</span><span class="p">:</span> <span class="mi">6</span><span class="p">,</span>
  <span class="s2">"libs"</span><span class="p">:</span> <span class="p">[],</span>
  <span class="s2">"loadEagerly"</span><span class="p">:</span> <span class="p">[],</span>
  <span class="s2">"dontLoad"</span><span class="p">:</span> <span class="p">[</span>
    <span class="s2">"node_modules/**"</span><span class="p">,</span>
    <span class="s2">"bower_components/**"</span>
  <span class="p">],</span>
  <span class="s2">"plugins"</span><span class="p">:</span> <span class="p">{</span>
    <span class="s2">"doc_comment"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="s2">"angular"</span><span class="p">:</span> <span class="p">{}</span>
  <span class="p">}</span>
<span class="p">}</span>

Sample file .tern-projectfor an AngularJS application

If it does not work you can consult the documentation

bonus

There are still plenty of other Atom extensions I use – mostly for web development.

  • emmet
  • git-time machine
  • atom-pigments
  • file-icons
  • lodash-snippets
  • js-hyperclick

? To install everything in one go, simply copy and paste this line into your preferred device

  <span class="nv">$ </span>apm install editorconfig atom-ternjs file-icons set-syntax sort-lines autocomplete-modules emmet es6-javascript js-hyperclick hyperclick pigments linter-eslint lodash-snippets

If you want to optimize the Atom chargment you can always analyze different plugins loading time with Package Timecop > Show

 

Atom show plugin loading timeI am curious to know what it is missing, do not hesitate to send me your config if you use a Framework like React ?

Hey don’t forget to look at the answer to my question

Written by
Am a tech geek.. Do you wanna know more about me..? My contents will do tell you.

Have your say!

0 0

4 Comments

  1. Very nice. A little mistake –

    Your install in one go command is missing “install” before the list of packages… it should read:
    apm install editorconfig atom-ternjs file-icons set-syntax sort-lines autocomplete-modules emmet es6-javascript js-hyperclick hyperclick pigments linter-eslint lodash-snippets

    • Oh..
      Thanks for that… It has been corrected.

  2. Also, for those using linux, the command to open up the Chromium console is CTRL-SHIFT-i …

    • Hey Ben,
      Thanks for adding to this.. It really mean alot
      We appreciate your contribution.

      Warm regards

Comments are now closed for this post.

Lost Password

Please enter your username or email address. You will receive a link to create a new password via email.

Atom for JavaScript Developers

by Ahmad
Turn up.. Let's be friends on social networks also