Myes, so you noticed Atom is kinda slow on your computer, or You'd like to try something more lightweight in general. This mini-guide will help you install Sublime with all the plugins needed to continue with our ECMA Natives class.

Sublime will not work with Bash for windows. So if you're using that. Refer to the installation guide for NeoVim instead.

1. Installing Sublime

Windows & OSX

If you are on Windows or OSX you can simply download and install Sublime from it's home-page: https://www.sublimetext.com/

Ubuntu & virtualbox

If you are on Ubuntu, you can download sublime from the built-in app-store. The only problem is that the open-source library section containing sublime isn't included in the off-the-shellf install of Ubuntu. Let's fix that first:

Open a terminal window and run the commands below (run them one by one, don't copy paste the entire block):

sudo apt-get install wget
wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -
echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list

sudo apt-get update
sudo apt-get install sublime-text

Sublime is now installed.

Installing some dependencies

With our terminal still open, lets check if we can install some dependencies we'll need later (this assumes that you've gone through the installation instructions in Lab 0):

npm install -g eslint
echo '{ "rules": {} }' > .eslintrc

While we're here, let's grab some information:

which node

Just leave the terminal open, we'll need the information we just got later.

Configuring Sublime.

With sublime and eslint installed it's time to open up the program. Just start it like you would with any Graphical program.

Once started 3 things need to happen:

• You'll need some kind of package manager inside the editor to add extra plugins
• You need to install some plugins
• You need to configure and setup those plugins.

Sop lets begin with step 1

Setting up a package manager

Open sublime and follow the instructions of this site: https://packagecontrol.io/installation. When done, you should see something like this in bottom of the screen

Exit and re-open sublime to finish.

Setting up some plugins

Hit [CTRL] + [SHIFT] + [P] on your keyboard to open the quick-menu on Windows and Linux. Hit [COMMAND] + [SHIFT] + [P] on your keyboard to open the quick-men on OSX.

Then type "install" and click (or enter) "install package". It will take the editor a few seconds to load all the packages.

Now type "emmet" and hit enter to install it.

Repeat these steps for the plugins:

• SublimeLinter (not to be confused with SummitLinter)
• SublimeLinter-Eslint
• GitGutter
• GitSavvy

Configuring our env.

With the basics done, it's time we set some defaults for our editor and tell our editor where it can find EsLint (the program we use to show typos in our code later)

First let's set some general standards. Go to the top-menu of sublime, hit prefferences and click settings (or user settings)

We are going to work in "Settings - User", make sure to never change "Settings - Default".

Now replace the content of the entire file with the stuff below:

{
  "font_size": 16,
  "Seti_sb_small_padding": true,
  "Seti_tabs_small": true,
  "always_show_minimap_viewport": true,
  "atomic_save": false,
  "bold_folder_labels": true,
  "caret_extra_width": 2,
  "caret_style": "phase",
  "copy_with_empty_selection": false,
  "drag_text": false,
  "enable_tab_scrolling": false,
  "ensure_newline_at_eof_on_save": true,
  "highlight_line": true,
  "indent_guide_options":
  [
    "draw_normal",
    "draw_active"
  ],
  "line_padding_bottom": 1,
  "line_padding_top": 1,
  "open_files_in_new_window": false,
  "overlay_scroll_bars": "enabled",

  "ignored_packages":
  [
    "Vintage"
  ],
  "paths":
  {
    "linux":
    [
    ],
    "osx":
    [
      "/Users/peter/.nodenv/shims/node"
    ],
    "windows":
    [
    ]
  },
  "rulers":
  [
    80
  ],
  "scroll_past_end": true,
  "tab_size": 2,
  "tabs_small": true,
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true
}

We need to add our Node path here too. Go back to your terminal (if you lost it open a new one and type which node). We're going to copy the line (it should say something like /Users/peter/.nodenv/shims/node). Go back to sublime and locate the lines in your settings that looks like this:

"paths":
  "paths":
  {
    "linux":
    [
    ],
    "osx":
    [
    ],
    "windows":
    [
    ]
  },

We're going to insert that special line inside. I am on a Macbook, so I'll fill in the OSX part. If you are on Ubuntu take the Linux part. Paste the stuff you copied (between quotes):

  "paths":
  {
    "linux":
    [
    ],
    "osx":
    [
      "/Users/peter/.nodenv/shims/node"
    ],
    "windows":
    [
    ]
  },

Good. Next up, our linting settings. Go to Sublime, prefferences, package settings, sublime-linter and hit settings:

Again, we're going to focus on "Settings - User"

Replace the contents of the file with the following:

// SublimeLinter Settings - User
{
  "paths": {
    "linux": [
    ],
    "osx": [
     "/Users/peter/.nodenv/shims/node"
    ],
    "windows": [
    ]
  },
}

Use the same tactic you did before, insert the path to your node (like you did in the previous step) in the list for your system. It's OSX in my case.

Thats all folks

And now it's done. Just skip the Atom installation steps in the lab and continue to "Let's REPL" in the lab