I've recently just changed my IDE for web development from Eclipse to Sublime Text 2 and thought I'll write a post about why I made the switch and what I like so much about Sublime Text 2.
What Is Sublime Text 2?
Sublime Text 2 in it's simplest form is a lightweight text editor. Everything about it was built for speed, which makes sublime one of the quickest and easiest text editors to use. Along with this speed sublime text 2 has 1000s of additional open source plugins, with a massive community of developers contributing to new plugins.
Sublime Text 2 can be used for multiple languages from web development to software development. I'm just using Sublime for web development so I'm going be talking about how easy it is to use for PHP development.
We all know about IDE's and how they make it easy for development, well sublime can do everything they can do, so what makes it different?
Go To Anything Panel
Sublime has a feature called go to anything, this is just a panel which allows you to search for files, methods, variables and go to certain lines. It uses fuzzy searching which makes it extremely easy to find anything in your web application.
You can access the Go To Anything panel by using the keyboard shortcode Ctrl + p, this will open a textbox at the top of the screen. As you type into this textbox Sublime will search for all files for the file name you type in. This makes it so quick to find the file you are looking for, you don't need to know the folder structure of application just the name of the file.
If you are picking up someone else code and you see this include in the code.
If you are picking up someone else code and you see this include in the code.
include ('/../../../../../name_of_class.php');
$class = new name_of_class();
You don't know what name_of_class.php does and want to read the code but the include doesn't make it easy to find the location of the file, you can just use the Go To Anything panel to open the file. Just press ctrl + p then type name_of_class and sublime will instantly find this file and open it for you. This happens in about 1 second it's very quick.
You can use this for more than just searching for filenames, the Go To Anything panel can be used to go to functions, variables or lines. If you want to go to a function you use the symbol @, to go to a variable use the # symbol and to go to the line number use the : symbol.
But you don't have to use this on the current open file you can use these in the search too. For example if you want to go to the init function in the name_of_class file you can just type the following in the panel.
name_of_class@init // Go to the init function in the name_of_class file.
name_of_class:1000 // Go to line 1000 in the name_of_class file.Multi Cursor
This is probably my favourite feature of sublime text 2 and once you use it and see the advantages of it in development you will wonder how you ever lived without it.
Multi cursor allows you to make multiple changes at the same time, for example if you have wrote a couple of lines with a variable but want to change the variable name. Instead of using a find and replace feature you can quickly use multi cursor to search for this variable and change all of them at the same time.
To use multi cursor all you have to do is use the keyboard shortcut ctrl + d, when your cursor is on a word pressing ctrl + d will highlight the word, pressing ctrl + d again will look for the next occurrence of this word and create another cursor on this word.
This makes it so easy to add multiple variable or functions all at the same time. Like I said it doesn't seem like a great feature but when you use it and see how much time it saves you will wonder how you ever worked without it.
Managing And Switching Projects
Project management in sublime is also very easy, you can add folders to new projects and sublime will generate a project file automatically to help manage the project. This is perfect if your used to working on different projects at the same time.
The best part of project management in sublime is the switching of projects. If you need to switch quickly between projects during the day then sublime is the editor for you. Just press ctrl + alt + p and a switch project window will be displayed, from here you can select any other project you have created in sublime. When you select a new project all your currently opened files will be closed and replaced with the new project. But sublime remembers which files it had to close and next time you open your project it will display all these files again.
So in just a couple of presses of the keyboard and you can switch between projects and you haven't lost your spot. The best thing is sublime is built for speed so even switching projects is super fast.
Customise Everything
Another great feature of Sublime is that you can customise everything about it, and yes you can do this for other IDEs but with sublime you customise the default IDE but you can customise it per user.
Just navigate to preferences -> settings - default and you will be able to see the huge list of settings you can change on sublime. You can change the font size, the font face, the colour scheme, display line numbers, tab size, margins etc.
Remove Whitespace On Save
Like with many IDEs your code will be development with a few whitespaces at the end of the line of code. This can grow to make your code look messy. There is a good trick in sublime which will automatically remove all trailing whitespace when the file is saved.
Go to the preferences menu then Settings - user. This is open up all the settings which are defined for you, inside this file add the following line.
"trim_trailing_white_space_on_save": true,Tabs Or Spaces
When you are working with other developers it's important to try to keep your code clean so it makes it easier to read. When you are indenting code there are 2 ways you can do it, a soft tab will indent a space of 2 spaces, a hard tab will indent a space of 4 spaces.
With sublime text you can customise all indentation settings with a change of settings in the IDE under the view menu.
From this menu you can select how many spaces are used up with the tabs in your code, the default can be changes in the user settings. You can even easily switch between using tabs and spaces.
Auto Save
You can make sublime automatically save the files once you make changes to them, all you have to do is add a new property in the user preferences screen. By default this is set to false so to turn this feature on just change the value to true.
"save_on_focus_lost": true,User Preferences
As the user of sublime can customise the IDE to what ever they want with lots of different settings, I have decided to share my own User preference file.
I have attached a number of comments to explain what each of these settings will do.
{
"bold_folder_labels": true,
"detect_indentation": false,
"draw_indent_guides": true,
"draw_white_space": "selection",
"font_face": "Ubuntu mono",
"font_size": 8.0,
"highlight_line": true,
"highlight_modified_tabs": true,
"ignored_packages":
[
"Vintage"
],
"line_padding_bottom": 1,
"tab_size": 4,
"theme": "Soda Dark 3.sublime-theme",
"todo":
{
"case_sensitive": true,
"patterns":
{
"CHANGED": "CHANGED[\\s]*?:+(?P<changed>\\S.*)$",
"FIXME": "FIX ?ME[\\s]*?:+(?P<fixme>\\S.*)$",
"NOTE": "NOTE[\\s]*?:+(?P<note>.*)$",
"TODO": "TODO[\\s]*?:+(?P<todo>.*)$"
}
},
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"use_tab_stops": true,
"word_separators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?",
"word_wrap": false
}Change Keyboard Shortcuts
Along with being able to edit the way the IDE works you can also change the keyboard shortcuts by navigating to Preferences -> Key Bindings - User. With sublime text 3 you get the functionality to go to definition of the function, I've setup my IDE to use this functionality on the F12 button by adding the following key binding.
[
{"keys": ["f12"], "command": "goto_definition"}
]Create Your Own Snippets
With sublime text 2 you can create your own code snippets, I know you can do this in other IDEs but with sublime they just make it so easy.
Navigate to Tools -> New Snippet, a new window is displayed with the default code snippet placeholder which you will replace with what ever you want. You write a placeholder for the snippet which means you can define where variable names are expected to be placed. The advantage of this is that once you call your snippet and press tab the cursor will move between the different variable placeholders.
You can define a name and a new keyboard shortcut for each new snippet to make it even easier for you to access from the editor. When you save a new snippet the autocomplete feature will now be populated with your snippet name, when you start typing in the name of the snippet the autocomplete will make it easy for you select your new snippet.
The structure of the snippet code will look like this.
<!-- Optional: Tab trigger to activate the snippet -->
xyzzy
<!-- Optional: Scope the tab trigger will be active in -->
source.python
<!-- Optional: Description to show in the menu -->
My Fancy Snippet
The content node is where you type in your snippet.
The tab trigger is used as the keyboard shortcut for your snippet.
The scope defines what syntax the snippet is used in, this is so you can't use your PHP snippets inside a CSS file.
Packages
As I said at the start that the main reason people use sublime is the amount of packages that are available. All the packages you install are like plugins which extend the functionality of sublime text 2.
The first package you need to install is the Sublime package control. This allows packages allows you to install/remove other packages directly inside sublime. Using this plugin you can install loads of other packages in a matter of seconds. Then all you have to do is restart sublime and your have access to this new functionality.
Some of the essentials packages you should use are:
Emmet
The Emmet package makes front-end development really quick and easy to develop on.
Emmet provides you will automatic browser prefixes on CSS properties, a colour gradient generator, a lorem ipsum generator, new keyboard shortcuts and many more features that will speed up your development.
JS Docs
DocBlockr is a Sublime Text 2 package which makes writing documentation a breeze. DocBlockr supports Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C and C++.
Sidebar Enchancements
The packages improves the usability of the sidebar by giving you more options on new files, moving files, copying files and opening files in another program.
Auto Semi Colon
This plugin automatically moves a semi-colon to outside of the last bracket when pressed inside one or more pairs of brackets.
Alignment
- Align multiple selections to the same column by inserting spaces (or tabs)
- Align all lines in a multi-line selection to the same indent level
- Align the first = on each line of a multi-line selection to the same column
Sublime Linter
This package will highlight code in the text editor which isn't valid code. For example if you miss out a semi colon in PHP the Sublime Linter package will highlight this row to show that you made a mistake on this line.
SublimeLinter has built in linters for the following languages:
- C/C++ - lint via cppcheck
- CoffeeScript - lint via coffee -s -l
- CSS - lint via built-in csslint
- Git Commit Messages - lint via built-in module based on A Note About Git Commit Messages.
- Haml - syntax check via haml -c
- HTML - lint via tidy (actually tidy for HTML5)
- Java - lint via javac -Xlint
- Javascript - lint via built in jshint, jslint, or the closure linter (gjslint) (if installed)
- Lua - syntax check via luac
- Objective-J - lint via built-in capp_lint
- Perl - lint via Perl:Critic or syntax+deprecation check via perl -c
- PHP - syntax check via php -l
- Puppet - syntax check via puppet parser validate
- Python - native, moderately-complete lint
- Ruby - syntax check via ruby -wc
- XML - lint via xmllint
jQuery
This jQuery package comes with loads of code snippets for help with your jQuery development.
HTML5
A HTML5 package of HTML5 snippets for quicker HTML development.
Placeholders
This package comes with a number of example text to use inside different HTML tags.
SVN
Full-featured SVN integration for Sublime Text 2 that provides a faster and better way to work with Subversion.
- Select individual files and folders when committing, adding, deleting
- Simplified interface for branching and merging
- Syntax highlighting for all commands
- Automatic notification of available remote revisions
- Guidance through conflicts and tree conflicts
- Supports advanced SVN features like properties and externals
Gist
Gist is a sublime package to help you create, edit and use Github Gist straight from sublime text. This will also allow you to use any Gists that you fork in Sublime. Which means if you are browsing Gist and find a snippet that you want to use then just fork it and now you can use it in Sublime.
Here is a really good tutorial about how you can use the Gist plugin.
Git
The git packages allows you to integrate a managed Git repositories straight from sublime text 2.
PHPCS
This plugin adds PHP CodeSniffer, PHP Coding Standards Fixer, the PHP Linter and phpmd support to Sublime Text 2.
Automatic BrowserRefresh-sublime
If you are working on lots of CSS changes then you would normally have to view the page, switch to the IDE, make your changes, save your files, switch to the browser, refresh the browser just to see your changes. With this Sublime Text 2 plugin you can skip a step and save your changes and automatically refresh the browser to see your changes instantly.
Save the file you are working on and refresh your browser with one keystroke
CSS Completions
A library of CSS completions for sublime text 2. project currently available on Github for you to download and use with sublime.
Keyboard Shortcuts
All of the sublime text 2 keyboard shortcuts are located in Preferences -> Key Bindings Default.
Here's a example of some of the keyboard shortcuts you can use inside sublime.
- ctrl+k, ctrl+b - Toggle the sidebar
- f11 - Toggle Full Screen
- shift+f11 - Toggle Distraction Free
- alt+. - Close Tag
- ctrl+p - Show the go to overlay panel
- ctrl+shift+p - Show the command overlay panel
- ctrl+alt+p - Show the project selector panel
- ctrl+r - Show the go to overlay panel default to method selector
- ctrl+g - Show the go to overlay panel default to go to line selector
- ctrl+; - Show the go to overlay panel default to variable selector
- ctrl+shift+up - Swap with the line above
- ctrl+shift+down - Swap with the line below
- ctrl+/ - Toggle a comment
- ctrl+shift+/ - Toggle a comment block
- ctrl+shift+d - Duplicate a line
- ctrl+` - Display console panel
- ctrl+space - Auto complete the current selected snippet
- ctrl+k, ctrl+u - Toggle upper case
- ctrl+k, ctrl+l - Toggle lower case
If you want to add your own keyboard shortcuts or override the default shortcuts you should use the user specific keyboard shortcut file.
Preferences -> Key Bindings User.
Download
Sublime text 2 IDE is completely free...sort of. When you first download sublime you will use it in as a non license user which is no different than a licensed user. But as a non licensed user you will get alert boxes popping up to remind you to buy the software.
You can use sublime text for an unlimited period without buying a license, but a license must be purchased for continued use. The sublime license is on a per user base not per machine which means you can use it on any machine you want. The current license cost is $59 and you can use this for life.
To download sublime text 2 use the link below.
More Reference's Of using Sublime Text 2
The guys at Envato have put together a massive video series about how to use sublime which covers topic such as:
- Services and Opening Sublime From the Terminal
- Multiple Cursors and Incremental Search
- The Command Palette
- Instant File Changing
- Symbols
- Key Bindings
- Installing Plugins Without Package Control
- Package Control
- Snippets
- Essential Plugins
- Tips, Techniques and Modifications
There are loads more sublime text 2 resources here are a couple I have used and helped convince me to give sublime a try.
Sublime Text 3 Beta
Sublime released on their blog that Sublime Text 3 is in beta and can be tested by people who have bought a full license.
There are many new features with Sublime Text 3 one is making it even quicker than before with instance start-up speeds and instance project switching, so you can get on with coding straight away.
There is a Go To definition feature will allow you to hover over a inherited class or method, click go to definition and sublime will open up the file there this class or method lives.
The price for a full licence has increased in this version by $11 dollars, but again this is well worth it.
View all the new features over on the sublime blog.
Source: http://www.paulund.co.uk/web-development-with-sublime-text-2