Sublime Text 3 is available for: WindowsLinuxMac/OSX
Why Sublime Text 3?
The reason I like Sublime so much is the variety of themes, options, and code-highlighting features right out of the box. The most important feature, however, is the ability to add “packages” which add to the text-editor’s functionality and design. I love the dark themes with the colorful fonts – and believe me when I say this, it does tend to make managing all your code files a 100 times easier, especially when you are working with a lot. Code is easier to read and easier to modify. Another feature I love is the ability to use REGEX (Regular Expressions) when searching/manipulating data in your files using Sublime search & replace.
Another neat feature is the auto-complete feature. What the auto-complete feature does is when you start typing out a word, such as “ng” (for angular), Sublime pops up a little window and shows you the complete word. In this case, if I start typing “ng”, a little auto-complete window will pup up showing me related words such as ng-app, ng-controller, etc. If I type “<" an auto-complete menu will appear with a list of HTML elements. Sublime also automatically provides the closing element and places the cursor in between when you use the auto-complete window to insert your code. This is awesome for coders and works much like the Visual Studio auto-complete feature (if you've ever done any desktop programming.)
A development environment that’s free to setup and beats using Windows Explorer to manage your files and notepad to edit them, anyday. In today’s web design world, it is common to use multiple languages to deliver high-end, dynamic and rich content to the end user. Maintaining all the files (.php,.js,.json,etc.) can get overwhelming without a good IDE.
Sublime Text is a sophisticated text editor for code, markup and prose.
You’ll love the slick user interface, extraordinary features and amazing performance. — SublimeText.com
Download and Install
You can download Sublime Text 3 direct from https://www.sublimetext.com/. Installation is straight forward for Windows, so I’m not going to walk you through it. Simply download the setup file and launch it and follow instructions to install.
To install on Kali/Debian Linux, run the following commands:
wget https://download.sublimetext.com/sublime-text_build-3114_i386.deb sudo dpkg -i sublime-text_build-3114_i386.deb
To run Sumblime, open Terminal and type:
After Installing, play around with the Sublime Text 3 core version from the website. The core version has a lot of pre-installed “packages” which can be found in the Sublime install directory:
C:\Program Files\Sublime Text 3\Packages
C:\Users\[username]\AppData\Roaming\Sublime Text 3\Packages\
As you can see, we are going to be placing the packages we download in a different directory than the original “core” packages. The packages in the installation directory, are generally only the ones that come with Sublime, and they prefer you keep it that way. The AppData directory will keep our new packages, so when Sublime Text updates, you will still have the downloaded packages installed. Preference is given to the local AppData packages over the packages in the installation directory.
First, make your Sublime Text IDE sidebar visible. Your sidebar will contain opened/files and folder directories. It makes sifting through your web application directory structure easier. Click the file in the Sidebar, and you will be shown the contents in the main pane. When your file numbers grow, you will be thankful for this feature. To make your sidebar visible, open Sublime and navigate to:
View -> Sidebar -> Show Sidebar
Remember to read the the package author’s installation notes if the package isn’t working. Packages are regularily updated and installation instructions can change. For example, sometimes the packages require a folder rename, or adding a specific line to Sublime’s config/preferences file.
SideBarEnhancements – Enhances the options available to you when you right click a file in the sidebar. Some options include “open with..“, “move to trash“, basic file manipulations options, etc. It makes your job a lot easier when you can manage the files from the left pane and don’t have to minimize everything and open up the explorer.
Color Highlighter – Every time you use a color code in your program code, Sublime will highlight the color code in the color that it represents. This makes managing your website colors much easier.
Highlight Build Errors – This package is very handy when debugging your code. As the package name states, it highlights sections of your code where it detects a programming error. Once again, very convenience and time-saving package.
Terminal – Allows you to open the Terminal/CLI by using keyboard shortcuts CTRL+SHIFT+T or CTRL+ALT+SHIFT+T. For anyone that has used git, npm, or another package manager knows how important access to the Terminal is. Most of the time we have to run Terminal commands from inside our project directory, and navigating to it from the terminal every single time can get VERY annoying. With this package, simply use the shortcut keys and your Terminal window will pop up and point to your project directory.
SFTP – SFTP is another time-saving package. If you use FileZilla, or another FTP client, to manage your website/application files, you know how annoying it can be switching back and forth between text editor and FTP client. This is where SFTP comes in. It basically gives Sublime the ability to act as an FTP client and sync files easily. The issue with SFTP is that it is only a 30-day trial. If you wish to use it longer, you need to purchase it for $30. That being said, it is well worth the $30 if you’re looking to do some serious web development. Go ahead, give it a try first.
Seti_UI icon theme
Seti_UI – Seti UI is just a theme package to customize and make our side bar look better. Seti contains a icon theme that makes your sidebar attractive. Besides that, it contains icons for various different coding languages, which aren’t included by default in Sublime.
jQuery – This is a Sublime Text bundle to help with jQuery functions. It has syntax highlighting and almost all of the jquery methods as snippets.
There are syntax-highlighters available for almost every programming language known to man at Package Control. Please do a search for any coding language on the Package Control website, and chances are that you will find a plugin (or few) for it.
That’s it. These are the packages that I am mainly using. As stated, there are literally hundreds, if not thousands of different packages available on packagecontrol.io. Feel free to download and install as many packages as you need to make your job easier. Since the packages are located on Github, you can also use “git” to download the packages.
Using Git to Install Packages
I’m not going to dive deep into git right now, however I will say that it is a Version Control System (VCS). To learn more about git language, visit https://git-scm.com/, or to browse and create your own git repos, visit http://www.github.com. If you’re not already familiar with git, installing the packages above is very easy with
Open command line prompt (or Terminal if using Linux) and navigate to the packages directory using the following command:
cd C:\Users\[username]\AppData\Roaming\Sublime Text 3\Packages\
Remember, to replace the above location with your the location to your
Packagesdirectory. The directory listed above should be your local user package directory for Windows 7/10.
%APPDATA%\Sublime Text 3
~/Library/Application Support/Sublime Text 3
From here simply run the following git command (must have “git-cli” installed globally):
git clone https://github.com/Monnoroch/ColorHighlighter.git "Color Highlighter"
This will clone (or copy) the Color Highlighter repository (or in this case, package) and save it in a folder named “Color Highlighter” in our local user packages directory. That simple.
I hope you grow to love Sublime Text as an IDE as much as I do. Even if you don’t program, you can use it as an effective text-pad replacement — just change your default application for .txt files. It’s light weight, easy to configure, and makes you a more efficient programmer. With the added packages, you basically have your own custom IDE, and you didn’t have to spend a dime (at least until the trials are up 😉 lol).
Some other well-known IDEs include: