Atom configuration for Web project (Python, JavaScript, HTML, SCSS, etc)

I was using Sublime Text 2 and 3 for a long time. Recently I had some issues with additional plugins, sometimes after update some functionality was broken, consume all RAM memory or CPU. I read some good opinions about Atom and I decided to try it. At the moment of writing this I have been using Atom since 2 months. Everything works, I don’t see any slowness compared to Sublime (maybe on startup is slower, it needs 1-2 seconds to to start when I have 5 project imported but it is ok for me), I don’t have any issues with plugins, plugin manager is better in my opinion. Generally I like it, it looks like Atom grows faster than Sublime and in 2 months I found more useful plugins and shortcuts than in Sublime, I don’t know why, maybe I didn’t search as much as I could.

Of course there is one or two things that I’m missing from Sublime. Atom doesn’t have option to switch between projects. I can import several projects but I loved to switch between projects in Sublime way. There is also an issue with Go To Definition option, when I have imported for example 5 projects and I want to go to method XYZ then Atom shows me list of occurrences in all projects, not only in current project. It works correctly with one imported project but it is hard to remove and add project every minute. Maybe someday Atom will have good switching between projects.

In this post I will describe how I configured my Atom. I’m using everyday Python, JavaScript, HTML, SCSS, etc. so configuration will be focused on those languages.

Atom can be downloaded from https://atom.io.

It is also PPA for Ubuntu:

sudo add-apt-repository ppa:webupd8team/atom
sudo apt-get update
sudo apt-get install atom

At first I set tabs length to 4 spaces, add Project Home and turn on showing spaces, tabs, etc. Go to Edit menu, Preferences, Settings and here we can set Project Home, set Tab Length to 4 and check Show Invisibles.

Time to install some additional plugins (Edit -> Preferences -> Install).

Packages to install:

1. linter

It is a base plugin for all other plugins which provides features like checking pep8, checking HTML format, JavaScript format, etc.

2. linter-scss-lint

Plugin for checking SCSS syntax. We need to install scss-lint.

sudo apt-get install ruby
gem install --user-install scss-lint

Set path to scss-lint in plugin settings. Go to Edit -> Settings -> Packages -> find linter-scss-lint, click settings and set executable path, in my case it is /home/eshlox/.gem/ruby/2.1.0/bin/scss-lint

3. linter-csslint

Interface for csslint - Automated linting of Cascading Stylesheets. We need to install csslint.

sudo apt-get install npm
npm config set prefix '~/.npm'
npm install -g csslint

For this plugin we need to edit configuration file because it doesn’t provide GUI settings. Edit -> Open Your Config and add something like this with correct path to your csslint.

"linter-css-lint":
  executablePath: "/home/eshlox/.npm/bin/csslint"

4. linter-python-pep8

Plugin for checking PEP8. We need to install pep8 package for python.

pip install pep8 --user

For this plugin we need to edit configuration file because it doesn’t provide GUI settings. Edit -> Open Your Config and add something like this with correct path to your pep8.

"linter-python-pep8":
  pep8DirToExecutable: "/home/eshlox/.local/bin"

5. linter-python-pyflakes

Plugin provides interface to pyflakes. We need to install pyflakes.

pip install pyflakes --user

For this plugin we need to edit configuration file because it doesn’t provide GUI settings. Edit -> Open Your Config and add something like this with correct path to your pyflakes.

"linter-python-pyflakes":
  pyflakesDirToExecutable: "/home/eshlox/.local/bin"

6. linter-jshint

Interface for JSHint. We need to install JSHint.

npm install jshint -g

Set path to linter-jshint in plugin settings. Go to Edit -> Settings -> Packages -> find linter-jshint, click settings and set executable path, in my case it is /home/eshlox/.npm/bin/jshint

7. linter-htmlhint

Interface for htmlhint - A Static Code Analysis Tool for HTML. Let’s install htmlhint.

npm install htmlhint -g

Set path to linter-htmlhint in plugin settings. Go to Edit -> Settings -> Packages -> find linter-htmlhint, click settings and set executable path, in my case it is /home/eshlox/.npm/bin/htmlhint

8. autocomplete-python

Python autocompletion.

9. atom-ctags

Automatically rebuild ctags - needed for Go To Definition feature. Go to Edit -> Settings -> Packages -> find atom-ctags, click settings and set Automatically rebuild tags in plugin config, for bigger projects set Build timeout, for example 10000)

10. git-plus

Git commands in Atom.

11. highlight-selected

Double click on a word to highlight it throughout the open file.

Next step, hide \*.pyc files and other files included in .gitignore, go to settings -> packages, search for tree-view, go to package settings, check ‘Hide VCS Ignored Files’.

At the beginning we set tab length to 4 spaces, HTML and JavaScript projects need 2 spaces for me so let’s set different tab size for those languages. Edit -> Open your config and add:

".basic.html.text":
  editor:
    tabLength: 2
".js.source":
  editor:
    tabLength: 2

Sometimes it is nice to have snippets. Below, there is an example how we can add snippets for pdb and ipdb. We can write first letter, hit tab and snippet will be put in our code. Go to Settings -> Open your snippets and add:

'.source.python':
  'ipdb':
    'prefix': 'ipdb'
    'body': 'import ipdb; ipdb.set_trace()'

  '.source.python':
  'pdb':
    'prefix': 'pdb'
    'body': 'import pdb; pdb.set_trace()'

I will continue with improving this post, when I will find something useful then I add this here.