Whos this for
This guide is especially targeted to frontend developers which want to transform their Sublime Text 3 environment into a full fledged JavaScript IDE and maybe want to learn some advanced tricks which can boost their productivity.
I also want to highlight that this is a sortof a living document, when im encountering new good stuff in the future i'll update this document
The Magic of Shortcuts
I thought its even worth to mention the shortcuts which are default even in other editors or already known by most Sublime Users
Sorry for that - but dont worry, it will get more exciting after that block.
Find first WordCTRL + ;
Opens an menuoverlay where you can find the first word of anything you type
On German layouts its CTRL + ü
Goto LineCTRL + G
Opens an menuoverlay where you can specify a linenumber to jump to.
Copy HistoryCTRL + K + V
Opens a contextmenu with the clipboardhistory to choose from
Toggle SidebarCTRL + K + B
Opens or closes the sidebar
Last Closed FileCTRL + SHIFT + T
Opens last closed file
Search in DocumentCTRL + F
Default search in filter dialog will open in your statusbar
Search/ReplaceCTRL + ALT + F
Search/Replace in your document or complete project
P stands for Project
The first thing you should do is - making an projectfile in Sublime Text, we will learn later why.
Quick File SearchCTRL + P
With this shortcut you can access all available files of your opened folder, or all files you configured in your Sublime Text project
Quick Command Menu CTRL + SHIFT + P
This shortcut gives you access over pretty all available commands and plugins in Sublime Text
Quick Project Menu CTRL + ALT + P
This shortcut gives you a List over all your "touched" projects.
R stands for Read Symbols
All R related shortcuts are searching for so called Symbols, symbols are specific patterns which describe an function or variable declaration. You also can config symbols your own way which is described in the next chapter.
Read Symbols in FileCTRL + R
Opens an overlay (You can also use CTRL + P and type an @) and a searchable list of found Symbols (functions and variables) of the current File.
Read Symbols in ProjectCTRL + SHIFT + R
Opens an overlay with a searchable list of all available symbols of all files in your project or opened folder.
J stands for Joining
All J related shortcuts standing for join or joined things like codeblocks.
Join LinesCTRL + J
Joins on each hit on the shortcut the next available unjoined line - to the line where your cursor is positioned.
Select a CodeblockCTRL + SHIFT + J
Selects all inner code of the parent of where the cursor is positioned.
L stands for Lines
All L related shortcuts standing for Line related stuff, marking single or multiple lines or split a big selected block into single cursors.
Mark LineCTRL + L
Marks line at the Cursor position, on multiple shortcuts hits it marks multiple lines based of the last marked line.
Split multiple marked Lines into multiple CursorsCTRL + SHIFT + L
When you have multiple lines selected and hit this shortcut, the marked area will split into multiple cursors for each line.
D stands for Duplicate
Among Multiple Panels the "Find Duplicate" Feature is one of the great features why Sublime Text became so popular.
Find DuplicateCTRL + D
Marks the word on cursor position, marks on each shortcut hit a word similar to your selection and marks it.
Duplicate SelectionCTRL + SHIFT + D
Duplicates any marked area directly after itself (perfect for HTML editing)
B stands for Build
One of the reasons why we should use projectfiles in Sublime Text, we will learn later why
BuildCTRL + B
Uses always the Builder which you last used with CTRL + SHIFT + B
Builder MenuCTRL + SHIFT + B
Opens your Builder Menu
Working with Panels Mouseless
For what Sublime Text became famous is that you can open multiple panels in your editor.
CTRL + [0-4] Sets the cursor into an panel
CTRL + SHIFT + [0-4] Moves any document from your actual panel to panel 0 - 4
ALT + SHIFT + [0-9] Opens one out of 7 layouts Sublime Text can provide
- 1 - 4 Opens 1 to 4 columns
- 5 Opens 4 Panels "GridStyle" (2 horizontal, 2 vertical)
- 8 - 9 Opens 2 or 3 panels horizontally
Also i highly recommend the
Howto configure Sublime Text
Most people find it pretty horrifing to configure Sublime Text but the idea behind it is pretty simple:
Sublime Text uses 2 Seperate textfiles - 1 readonly textfile for defaults, and 1 editable textfile which overrides the defaults from the first file.
Just open 2 panels with ALT + SHIFT + 2 after youve done that you can load the defaults file via: Preferences: Settings - Default and in the second panel load the usersettings file via Preferences: Settings - User
Now you just can copy & paste and modify your settings how you want (and we used our new learned tricks - neat).
When you want to change your shortcutsettings use Preferences: Key Bindings - Default and Preferences: Key Bindings - User
Sadly most pluginconfigs arent available in the menuoverlay - you have to access them via the filemenu: Preferences -> Package Settings -> Your wanted Package". The configfile scheme is the same.
Installing PackageControl and NodeJS
When you are here for the JavaScript part and havent done it already - download NodeJS and install it on your operating system.
The PackageControl installation is pretty easy - just go there PackageControl and copy the code. After that open the console via the filemenu View -> Show Console paste the code in and hit enter.
After the installation you can access the Package Control commands via Package Control: -----
Configs for popular JS-Plugins
Installing stuff is thanks to the Package Manager pretty easy: Just go with Package Control: Install Package
EvalPrinter
Nothing to configure here but i really highly recommend to install this plugin if you are someone who makes little jsBins or CodePens because you want to try out sortings in loops etc but dont want to eval it in the browser console.
Basically, what this thing does is - it evals ONLY the code you select and spits it out in the Sublime Text Console. This is one of the most conveniant plugins when you are an JavaScript coder
How to use
Just mark the Code you want to eval, and use the shortcut ALT + SHIFT + ENTER
JSHint Gutter
The first thing you need to do after installation is set your NodeJS Path that can be archieved via the Filemenu: Preferences -> Package Settings -> JSHint Gutter -> Set node Path. I also highly recommend that you dont activate lint_on_edit when you arent on an powerful machine.
After that you can setup your wanted JSHint configuration via the filemenu: Preferences -> Package Settings -> JSHint Gutter -> Set Linting Preferences
When you need a "kickstart" into JSHint - here is my config im using or lookup the options here
You are set now
Now - everytime when you save and something isnt written after your setup rules, you will get warnings in your Gutter.
The warnings will showup in Sublime Text in the Statusbar (when the cursor is on an warning) or when you are using the shortcut CTRL + ALT + J it opens an overlay with the actual warnings.
DocBlockr
Just type /** over an function/method variable/property declaration and hit enter.
Little tip for your configuration: im typeof the guy who uses underscore prefixes for private methods, with that config DocBlockr will automatically add the @private docattribute when it sees anything with an underscore prefix.
You are set now
When you are using yuidoc for your documentation stuff you can use the "jsdocs_extra_tags": [""] property for providing more default tags (like @for)
My favourite Sublime Text Plugins
Since we have done now the "more complicated" plugins to configure im just leaving here a list of my favourite plugins from PackageControl which im using every day:
JavaScript CodeIntelligence
Installing the Plugin
First - you need to go into your plugin folder, the easiest way to archieve this is via the filemenu: Preferences -> Browse Packages ...
In this directory you have to clone the gitrepository of tern_for_sublime (or download it as zip and unzip it there).
After that you have to install the NodeJS package tern, you archieve this with: npm install in the "tern_for_sublime" directory.
Setup TernJS File
Without an projectfile TernJS will just autocomplete Syntax which is in your current file, to setup TernJS so it parses your whole stuff you have to provide an .tern-project file in your rootfolder.
TernJS will hickup (Timeout) when you feed it with big minified files (like libraries). So you should provide a projectfile with excludes library folders
What are this Settings
libs Basically this are "static" preparsed codedefinitions, read more here
loadEagerly This is the path where your sourcefiles should be
dontLoad Exclude folderpatterns (your minified stuff should be here, or bower_components)
plugins TernJS has many Plugins to choose from (requireJS, Angular, CommonJS) so it can load and parse the source. Read more here
ProTip
Use any JavaScript docsystem (yuidoc, jsdoc) to comment your code and add in your .tern-project file doc_commend: { "fullDocs": true } so TernJS spits out the comments and even gives typehinting of your stuff
Very good Sublime Text Plugin for easier commentblock handling i already introduced above
Setup your Projectfile
You should setup an Sublime Text Project file for every of your projects simply because they are available in the project overlay (CTRL + ALT + P), you can use CTRL + SHIFT + R for project wide symbol searching and you can get rid off unwanted Files like node_modules or frontend dependencies in your Quick Filesearch CTRL + P
To make a new project file just open a folder via the filemenu: File -> Open Folder ... after that you can save a project via the filemenu: Project -> Save Project As ... and save the projectfile always in the root of your project.
This is a simple boilerplate for your Sublime Text projectfile (you can edit your projectfile via: Project: Edit Project), how to configure it should be self explaining.
Setup Sublime Builders
One of the conveniences when you are using IDEs is to compile or debug in your actual development environment.
Sublime Text has a really nice CLI Integration for so called builders.
My favourite 2 Builders which im using are for node-inspector which is actually an node debugger tool (so you can for example debug express applications in your: Chrome DevTools) and BrowserSync for frontend work (so you can view your designs and UI synchronously on multiple devices - and you can even javascript debug them with integrated WEINRE).
Installing NodeJS Modules
Before we can configure them we have to install the node-packages globally first, thats easy accomplished via your CLI: npm install -g browser-sync && npm install -g node-inspector
Builder Configs
After that we edit our projectfile via Project: Edit Project and hang an "build_systems" property after our "folders" property on.
Here is my basic boilerplate file for BrowserSync, starting active file with NodeJS, debugging active file via NodeInspector and break at first Line and debugging "running" express instances. You can also provide your grunt and gulp tasks this way for direct use in Sublime Text.
Short description to the variables here
${file} Refers always to the file where your cursor actually is
${file_path} Refers always to the path of the file where your cursor actually is
${project_path} Refers always to the path where your Sublime Text project file is saved.
You can find more info about builders here:
ProTip
One little thing i highly recommend though is to change the "exec quit" button of Sublime Text, otherwise you have to kill all your nodeprocesses manually via taskkill /F /IM node.exe (or killall node).
Which you can archieve with Preferences: Key Bindings - User and providing following line:
{ "keys": ["YOUR SHORTCUT"], "command": "exec", "args": {"kill": true} }
The actual keybinding is CTRL + BREAK which wont function on my QWERTZ layout under Windows, thats why im mentioning it.
When the JSON is valid you should have now your builders in the CTRL + SHIFT + P overlay under Build With: ------