Sublime Text is a powerful code editor that we can use as a replacement for Dreamweaver.
It’s faster, more powerful, more efficient, and purely targetted at writing code.
What Sublime Text does
- Starts up significantly faster
- Less application bloat
- Supports many languages
- Has a plugin system that allows extending the functionality
What Sublime Text doesn’t do
- Preview your website—that’s what browsers are for
- Let you browse to find a file—typing is faster and more reliable anyways
- Ask you to update links and mess up your whole website
Sublime Text will work immediately after downloading it—but if you want to get the most out of it, some customization will be needed.
Sublime Text is extremely powerful and comes with a bunch of settings to make it work the way you want.
To view all the settings built into Sublime Text go in the menu to:
Sublime Text > Preferences > Settings - Default
To update and add your own settings go in the menu to:
Sublime Text > Preferences > Settings - User
Some default settings
To save time and have Sublime Text set up quickly, copy these settings and overwrite everything in your user settings.
Just copy and paste those settings into your
Settings - User file, overwriting everything that’s in there.
These settings contain lots of helpful bits to set up Sublime Text the way that it works for me—if you don’t like one of the options feel free to change it.
Adding a few packages (aka plugins) to Sublime Text will give you a bunch more convenient features. Before we add any packages we should install Package Control to help adding/removing packages.
Some default packages
Below is a list of packages I would recommend you install into Sublime Text:
- AdvancedNewFile — opens up a quick new file input at the bottom of the screen, ⌘⌥N
- All Autocomplete — finds matching classes from your HTML to autocomplete
- ApplySyntax — helps detect the right syntax highlighter for the code you’re looking at
- AutoFileName — when typing filenames, like
src=""it will help write the files
- Autoprefixer — when run, adds the appropriate vendor prefixes to all CSS
- BracketHighlighter — shows opening and closing tags and brackets
- ColorPicker — a colour picker for Sublime Text
- CSS3 — a better CSS syntax highlighter
- EasyMotion — a quick way to jump to different locations on screen
- EditorConfig — for matching other designers’ coding standards
- Emmet — quick way to write HTML, using CSS selectors
- jQuery — better jQuery syntax highlighting
- Liquid — to syntax highlight the Jekyll template tags
- Markdown Extended — to syntax highlight our Markdown+YAML files
- Placeholders — lorem-ipsum generation with HTML tags
- SideBarEnhancements — adds new features when right clicking on files in the sidebar, including
Open in Browser
- SublimeCodeIntel — more auto-completion for lots of different languages
- WordCount — shows a word count in the bottom left of the status line
How to install packages
After you’ve installed Package Control, you install the packages from directly inside Sublime Text.
Press ⌘⇧P and start typing “Package Control: Install Package”
You don’t have to type all the letters, just some of them—it’s called fuzzy matching. In the screenshot you can see I only had to type “packin”. You can select it by hitting the up/down arrow keys and pressing
A list of available packages will come up and you can start typing the name of the one you want. When you find the one you want select it and it will download and install.
Snippets are little samples of code you can get Sublime Text to automatically insert into your document.
As an example, when creating a new
index.html file the doctype doesn’t already exist. You can create a snippet that will insert that code for you.
For me, I type
html5 then hit tab and it will insert that code for me.
If you want to get a few snippets to start out, you can download my snippets from GitHub.
From Sublime Text, go in the menu to:
Sublime Text > Preferences > Browse Packages
This will open up a Finder window. You should see a folder named “User”—navigate into it. Drop the folder you downloaded into the “User” folder.