os Getting Comfortable With The Command Palette 1. Goto Anything ■ Files ■ Line Numbers ■ Fuzzy Search ■ Code & Text Blocks ■ Chaining Commands ■ Excluding Files & Folders From Search 2. Changing Syntax ■ Keyboard Shortcuts ■ Snippets ■ Practice 04
Editor Settings & Customization 1. Settings Files ■ *.sublime-settings Files • Syntax / Language Specific Settings • Settings Files JSON Gotchas ■ .sublime-keymap Files 2. Syncing Your Settings 3. Tabs, Spaces & Indentation ■ Specifying Tabs Or Spaces ■ Converting From Tabs —>Spaces Or Spaces —>Tabs ■ Detecting Indentation ■ Detect Settings with Editor Config Package ■ Paste And Indent 4. Fonts and Type Sizing • Consolas • M+2m • inconsolata • Menlo (sublime default) • Monaco • Ubuntu Mono • Adobe Source Code Pro
Sublime Text Power User
ANONYMOUS PRO Dejavu Sans Mono Envy Code R Hermit
■ Tweaking Fonts 5. Sidebar 6. Minimap
os. Code Completions and Intelligence 1. Code Hinting / Auto Complete ■ Where Auto Complete Fails ■ Settings 2. SublimeCodelntel 3. Installing on ST3 ■ 1. Use the development branch ■ 2. Clear your Codelntel cache 4. 3. Fix the language-specific config 5. 4. Be patient
oe Terminal and Command Line Integration 1. 2. 3. 4.
OSX Windows Linux Using subl from the command line ■ Arguments 5. Terminal Package
ox Maximizing Screen Real Estate with Multiple Panes and Origami ■ Panes Exercise ■ Origami • Create • Destroy • Focus • Move • Focus • Resize 2. Moving Between Tabs - OSX ■ Windows and Linux
os Working with Multiple Carets and Selection 1. Replacing Words ■ Quick Find Next / Quick Skip Next 2. Modifying Multiple Lines at Once 3. Another Multi-caret Example
09 Themes and Color Schemes 1. Color Schemes ■ Color Scheme Selector Package 2. Themes
Sublime Text Power User
3. Finding Themes ■ Handy Tools
10 Snippets 1. Creating Snippets ■ Content ■ Tab Trigger ■ Snippet Scope ■ Description ■ Saving 2. Finding Snippets
11 Efficient Searching, Finding and Replacing 1. Searching Inside of a Document 2. Search Options ■ Regex Search ■ Case Sensitive ■ Whole Word ■ Show Context ■ In Selection ■ Wrap ■ Highlight Matches ■ Use Buffer 3. Search & Replace Inside Projects and Folders ■ Combining Filters 4. Incremental Find 5. Other Searching Tips
12 Moving Selecting, Expanding and Wrapping 1. 2. 3. 4. 5. 6.
Moving Lines and Code Blocks Line Bubbling / Swapping Reindenting Code Blocks Joining Duplicating Deleting ■ Deleting Words ■ Deleting Letters Inserting a line before Wrapping with tags Jump to BOL or EOL Moving to ends and starts of lines and files. Selecting, Jumping & Expanding ■ Jump by Word ■ Select & Expand word by word ■ Select & Expand to certain words ■ Jump by line ■ Select & Expand to Line ■ Select & Expand to Tag ■ Select & Expand to Brackets ■ Select & Expand to Indent
Sublime Text Power User
■ Select & Expand to Quotes ■ Selection and beyond!
is Code Folding 1. Practice Code 2. Folding Selected Text ■ Block level code folding 3. Fold Multiple blocks at once 4. Folding with arrows 5. Folding element attributes 6. Maintaining Folding State i4.
Projects 1. .sublime-project file makeup ■ 1. Folder Settings ■ 2. Settings Overwrite ■ 3. Build Systems 2. Creating and updating projects
Mastering Keyboard Shortcuts 1. 2. 3. 4. 5. 6.
Negating carpel tunnel Reducing mistakes Becoming a more efficient coder The process of becoming a keyboard shortcut master Referencing Shortcuts What the heck are the aft S8^c? + SUPER Keys!? ■
7. Creating Custom Keyboard Shortcuts ■ Default Shortcuts ■ Your Custom Keymap File • keys • command • args • context 8. Dealing with Keyboard Shortcut Conflicts i6.
Macros 1. Recording a macro 2. Adding a keyboard shortcut 3. Editing Macros
I? Running, Testing and Deploying with Build Systems 1. Creating a build File ■ Selectors ■ Variables ■ Capturing Errors
Sublime Text Power User
■ Path Issues ■ Cross Platform 2. Build Resources
is Bookmarks 19 Working with Git 1. Sublime + Git Tutorial ■ Gittin' Ready ■ Gittin' Goin' ■ Adds and Commits ■ Diffing ■ Gitting everything else 2. Additional Git Packages ■ Sidebar Git 3. GitGutter ■ Sublimerge • Comparing and merging two files • Comparing Git Revisions • Git, SVN and Mercurial Integration
20 Mastering Emmet 1. Emmet and HTML ■ Elements ■ Classes and IDs ■ Attributes ■ Text ■ Multiple Elements and $ placeholder ■ Nesting Elements ■ Emmet Filters • Closing Element Comments • Escaping HTML • Pipe to HAML or Jade • Expand in a single Line ■ Even More 2. Emmet and CSS ■ Numbers and Units ■ Colors ■ More CSS 3. Other Emmet Hot Tips ■ Wrap with Emmet Snippet ■ Encoding / Decoding Data URI ■ Increment/Decrement ■ Lorem Ipsum ■ Matching Pair 4. Other Emmet Treats
2i. Workflow & Code Quality 1. Live reload ■ Installing
Sublime Text Power User
■ Live reload on mobile devices 2. Sublime Server ■ Installation and Usage 3. Live Linting with SublimeLinter ■ Linting your code • JavaScript Linting Example • CSS Linting Example ■ Linting Settings 4. Working with FTP / SFTP ■ SFTP Package • Remote only server • Mapping local to remote • SFTP —>Filezilla ■ Transmit Doc Send 5. Tricky trick: Renaming and moving files 6. Bower Integration ■ Bower Caveats
22. Vim Mode 1. 2. 3. 4.
Making Sublime Text act like Vim Sublime Text 2 Sublime Text 3 Using Vintage Mode - OSX10.7+ 5. What's not included
Language Specific Tweaks 1. CSS 2. LESS, SASS and Stylus ■ Syntax Highlighting ■ Helpful Tools 3. 4. 5. 6. 7. 8. 9. 10. 11.
Coffeescript Templating: HAML, Slim, EJS, Jade JavaScript jQuery Node.js PHP Wordpress Python Ruby
Must have Add-on Packages 1. 2. 3. 4.
Emmet Autofilename HTML + CSS + JSON Prettifyer Sidebar enhancements ■ Open with. ■ More Features
5. JSHint Gutter 6. Alignment
Sublime Text Power User
7. Bracket Highlighter 8. Writing Markdown with Sublime Text ■ Syntax Highlighter ■ Compiling ■ Table of Contents 9. Maintaining State on a file 10. Expand to quotes 11. TODO
25. T ip * Tricks Grab Bag 1. 2. 3. 4.
Converting Case Code Comments Sort, Reverse, Unique and Shuffle Distraction Free / Fullscreen Mode
26. fin 1. Updates 2. Have a question?
Sublime Text Power User
Sublime Text Power User
Sublime Text Power User
1.1 About The Author Wes Bos is an independent full stack web developer, author, educator and speaker. He works with startups and large companies alike consulting on HTML5, CSS3, JavaScript, Node.js and WordPress projects. Wes is also a lead instructor at Ladies Learning Code and the Toronto based HackerYou where he leads part-time courses and bootcamps on everything from beginner HTML to advanced JavaScript. We lives in downtown Hamilton, Ontario where he works with his wife Kait Bos from their 140 year old home under the company BosType.
1.2 Reviewers This book would not have been possible without the hard work of the reviewers listed below. I want to say a big thanks to everyone who gave this book a once-over suggesting edits and correcting mistakes along the way. • • • •
Ricardo Vazquez - vazquez.io / @iamrvazquez Alyne Francis - alynefrancis.com / @alynejf Darcy Clarke - darcyclarke.me / @Darcy Simon W. Bloom - simonwbloom.com / @SimonWBloom
Sublime Text Power User
1.3 Introduction Welcome and thank you for purchasing Sublime Text Power User! As a developer, your editor is one of the most powerful tools that you have to increase productivity and develop higher quality code. Learning to master your editor is no different than learning to master your programming of choice. By reading this book and learning to take advantage of every feature in Sublime Text, you are committing to becoming a better and more well rounded developer. Over the past 3.5 years, I've been a full-time Sublime Text user with a constant hunger for getting to know the editor better. This is the book I wish I would have had. Whether you are new to programming or a seasoned vet, get ready for a torrent of everything from neat little tricks, to foundational workflow ideas.
1.4 Mac, PC, Linux Most of the features and functionalities of Sublime Text are available on Mac, PC and Linux. I have written this book from the perspective of a Mac user, but provide insight for Windows and Linux users when the operating systems are inconsistent. Jump Around!
This book is written in small easy to digest sections and can be read from start to finish, but doesn't necessarily need to be. With the exception of the first few chapters, feel free to jump around to the parts that you need to reference.
Sublime Text Power User
2.1 Version 2 or 3? The current stable release of Sublime Text is version 2.0.2. That said, version 3 was released in early 2013, to much acclaim, and is the preferred build at this time. Although many add-ons and packages were initially incompatible with version 3 many projects have moved to support it. If you are currently using version 2, it is highly recommended that you migrate to Sublime Text 3. A migration guide can be found at http://wesbos.com/migrating-tosublim e-text-3/.
2.2 Installing Sublime Text This is the obvious first step for getting started with Sublime Text. There are three versions of Sublime Text available at http://www.sublimetext.com/3dev - Stable, Dev and Nightly. It's recommended that you run the Dev version which delivers semi-frequent updates. These releases are also fairly stable and give you access to some of the new and exciting features that may not make it into the Stable version for a number of months. If you want to live on the edge, using the Nightly version may be more your style. Since Sublime Text is so dang fast, it takes just seconds to upgrade to the latest build. 13 of 202
Sublime Text Power User
2.3 Installing Package Control Like most editors, Sublime Text supports addons/plugins/extensions called packages that extend the native functionality of the editor. We will dive into the powerful package ecosystem more thoroughly in later Chapters of this book. For now, to get our environment setup, we need to install something called Package Control. Created by the very talented Will Bond, this package manager allows you to easily add, edit and delete your Sublime Text packages right from the editor - no fiddling with downloads, updates or versions. There is a one time install to get the Package Manager running. 1. Head on over to https://sublime.wbond.net/installation and copy the install code on the page
Note: Make sure to check the version of Sublime Text you're running. You can find this out by clicking on "Help > Documentation" and the appropriate version 2 or 3 support guide will be shown.
1. Open the console by hitting the key combination Ctrl + \ 2. Paste the previously copied text into the prompt followed by 3. Restart your editor
This process will install the Sublime Package Manager and allows us to install thirdparty packages. Installing a package
Installing a package with Package Control couldn't be easier. All packages are hosted either on Bitbucket or GitHub. Fortunately for us, package control will interface with these websites so we don't ever have to leave the editor. Once you have package control installed, via the instructions above, open up the command palette with and type
Tools — > Command Palette
. You should be able to select the item that says
. If you don't see it, you need to go back to the previous steps and
make sure you have installed package control properly.
Sublime Text Power User
If this is your first time installing a package or if you haven't installed one in a while, you may have to wait a few seconds while package control fetches the latest list of plugins. You can see that it's working in the lower left hand status bar: Line 45. Column 203; Loading repositories [
Once it has finished fetching the list, you will be presented with a list of every package available. Simply search for the one you are looking for by typing it's name or scrolling down. You'll be required to do this often in this book; so getting comfortable with this process is a good idea.
Sass enjoy the splendor o f textm ate bundles and sass. (
install V2010.06.25.22.48.04; g i. co m /se a o fclo u d s/sa ss-te xtm a te -b u n d l
A collection o f Sublime Text 2 s . Most snippets are to be used speci . ..scs install v 2 0 13.06.25.18.06.20; github.com /m rm artineau/SASS-Snippets
A Sublime Text 2 plugin that beautifies S .D e p e n d s on 'sass-convert' utili install v 2 0 13.06.22.18.48.28; github.com /badsyntax/S assBeautify
SassBuilder Sublime Text SASS com piler based on source d ire cto ry config file, install v2013.06.05.00.25.10; github.com /bnlucas/S assBuilder
SPARC Assembly Provides SPARC assembly syntax hig h lig h tin g and snippets fo r Sublime T. *
install . 2013.06.1 1 23 27.39 g ith u b .c o m /P rotractorN inja, SPARC-sublimi
c Neat Sass Snippets
Installing Packages Manually
Sometimes you may find a package that isn't in package control and you will need to install it manually; follow these steps in those cases: 15 of 202
Sublime Text Power User
1. Install Git on your computer 2. Grab the desired package's URL from it's repo page 3. Open up your computer's terminal or command line and navigate to the packages directory. You can do this by typing cd followed by one of the following paths: ° Mac: " / L i b r a r y / A p p l i cation Support/Sublime Text 2/Packages ° Windows: %APPDATA % \ S ublime Text 2\Packages °
LintlX: "-/.Sublime Text 2/Packages
4. Clone the package using:
Your package should now be installed and ready to use! Note: Package URLs should be located at the bottom right hand side of a GitHub repo or the top right of a Bitbucket repo Note: If you are using Sublime Text 3, change the "2" in the packages directory paths above to "3" Cloning Example: For the Vintageous package, my command would be: g it clone h ttp s : //g ith u b . com/ g u i l l e r m o o o / V i n t a g e o u s .git
Adding a Repository
As of Sublime Text 3, we now have an easier way to do manual package installations. Using the command palette type in "Package Repo". Once there, look for Package Control: Add repository and select it. It will then prompt you for the GitHub or Bitbucket URL. Paste in your git URL and Sublime will attempt to install the package for you.
2.4 Onward That is all there is to set up Sublime Text for now. In the coming Chapters, we will review every personalization possible to make the editor a perfect fit for you.
Sublime Text Power User
Getting Comfortable With The Command Palette
In the last Chapter, we briefly touched on the command palette as a way to install a package. Let's take a look at how we can do almost anything with this handy tool. Although most commands can be accessed through Sublime Text's menu system, it's always faster, and more savvy, to use keyboard shortcuts or the commands menu. Let's look at some examples that you'd encounter fairly often when developing. A command palette is often a new concept for users. I myself took time before finally familiarzing and utilizing it to its full extent. Don't make that same mistake. The command palette is one of the most powerful tools in Sublime Text; Helping speed up your workflow significantly.
3.1 Goto Anything Goto Anything is a very powerful ability to have at your disposal. It works by bringing up a palette that allows you to navigate to any file, line or symbol within your current projects or open files. As you type, Sublime gives you a live preview to help narrow down your search.
Sublime Text Power User
To bring up the Goto Anything palette, press §€ + p . There are also a few more specific shortcuts in the paragraphs below. You can always close this box by pressing esc
or the open keystrokes again.
Windows and Linux users should uyse Ctrl in place of 96
When you press §§ + p you will be presented with a list of files, folders or projects you currently have open. The most recently used files will be at the top of this list. From here you can start to narrow down your search by typing the name of the file, folder or project you're looking for. Using the arrow keys, we can move up and down these items. You'll notice that Sublime Text also provides a quick preview of files found using this search. Clicking or hitting
on a file in the list of results will open it for you.
jQuery.js d e m o /jQ u e ryjs
ST2P0WER.md ST2 POWER.md
book.sublim e-project book.sublim e-project
bookstyle.css books tyle.css
cover a rt/c o v e r
emailSignup.html art / emailSignup.html
Sublime Text Power User
Using this shortcut is much quicker then clicking around your sidebar and rooting for the file you want. If you know you are looking for file named
don't need to spend time drilling down folders, when you can simply pop open Goto and start typing. If you have multiple matches for the same file name, no worries; Sublime helps you out by showing each file's path directly below its name. style | 494 style.less styleJess
494 style.scss style, css
464 style.css dem o/css style.css
464 style.scss website sass/ style, scss
464 style.css website
458 style.css d e m o /p ro je c t/c s s style.css
458 style.css dei
458 style.scss demo / project;sass .'style, css
Goto Anything also allows you to jump to a specific line number within a file. When you bring up the palette, start your query with : followed by the line number you wish to go to. Example: If I'm working on a file that gives me an error on line 235,1just need to type : 2 3 5 into the Goto Anything palette. Better yet, hitting c tr i + g will both bring up the Goto Anything palette and pre-populate it with : .
Sublime Text Power User
If you've never heard of a fuzzy search before, you can think of it is a way of searching through documents for an approximate string of text rather than an exact match. I'll leave the complex, algorithmic interpretation out for now; Just know that you don't need to type an entire word or phrase to find a match. To do a fuzzy search, it's the same idea as with line numbers. The only difference is that you use the pound symbol # instead of the colon : . Example: Lets say I had a copy of the jQuery source open and I wanted to find all instances of "jQuery" I'd simply open the Goto Anything palette and type t jq ; I'll now be able to quickly see and page through the matches from my fuzzy search.
#jq| jQ uery J Q u e ry j query jqXHR jquery-de la y rootjQ ue ry rinlinejQ uery ajax_rquery
Developers often use this technique to do a quick search of their files to get to a certain line or section of code. It is an easier way to quickly scan a document for symbols or key combinations. Note: Fuzzy search also works in the command palette for command names. A good example of this would be to quickly change the syntax highlighting of an open document. To do this, hit 88 + p and then type ss j s . You can see that the fuzzy search finds and highlights all the commands with the letters ss j s in them. You can read more about this in the command palette section.
Sublime Text Power User
ssjsj Set Syntax: JavaScript Set Syntax: JavaScriptNext Set Syntax: JavaScript (Rails) Set Syntax: Java Server Page (JSP) Set Syntax: JSON Set Syntax: Java Properties Set Syntax:EJS Snippet: insert_ejs_tags ng nrnnnniAin a n n n r p t i i i_i r
\ .content-navigation .border .wrapper hi h3 .about span.warning
@1 SublimeTasksBase(sublime_plugin.TextCommand) run(. ) NewCommand(SublimeTasksBase) runCom m and(. )
Code & Text Blocks
You're probably familiar with the pain associated in searching for a specific function, class, or chunk of text in a file. Sublime lets you quickly navigate through these blocks of text and code by opening the Goto Anything palette (§§ + p ) and typing 0 (or just §§ +
). You're able to use the previously noted fuzzy search to filter this list
for specific functions, classes or blocks of text.
Sublime Text Power User
Example viewing a PHP file: @1 CLCart public fu n c tio n _construct(Sparam s = arrayO) public fu n ctio n insert(Sitems » arrayO) protected fu n ctio n J n se rt($ ite m s = arrayO) public fu n ctio n update(Sitems = arrayO) protected fu n ctio n _update($item s = arrayO) protected fu n ctio n _save_cart() public fu n ctio n totalO public fu n ctio n remove(Srowid) public fu n ctio n totalJtem sO public fu n ctio n contents(Snewest_first = FALSE) public fu n ctio n getJtem ($row _id) public fu n ctio n has_options(Srow_id = ") public fu n ctio n product_options
H .gitignore", "*.psd"]
The example above ignores any
files. To exclude
entire folders, you can append a forward slash / to the end of a folder name. "bi n a r y _ f i l e _ p a t t e r n s ":
Note: You may be tempted to use the f i i e _exciude_patterns or f o i d e r _ e x c i u d e _ p a t t e m s properties to exclude files from Goto Anything instead of binary_fiie_patterns ; While these both do the job, they also happen to remove those files and folders from the sidebar - which may not be a desirable outcome.
3.2 Changing Syntax Often you find yourself opening new tabs to quickly jot down temporary copy or code. Unfortunately, your tab has no knowledge of what language you're typing in and none of your packages will kick in. Unless you save the file, which is not your intention, you will have to set the document's language manually to see proper syntax highlighting.
Sublime Text Power User
Fortunately, you can see what syntax the tab is currently interpreting your code as in the bottom righthand corner. Clicking on that name will allow you to choose between the list of supported syntaxes. Eliminating unnecessary use of your mouse is always top of mind; So, opening the command palette and using the fuzzy search feature, noted earlier in this Chapter, is the ideal way to find and set your desired syntax. u ntitle d — U lS b -b o o k ST2 POWER, md
cs si wid pa(j CSS Less-ish: Compile bac CSS Less-ish: Decompile bor Tidy CSS Tidy CSS (Highest Compression) Tidy CSS (Low Compression) Set Syntax: CSS Set Syntax: CSS Emmet: Reflect CSS Value Convert Case: Swap Case Indentation: Convert to Spaces Sort Lines (Case Sensitive) Preferences: Package Control Settings - Default Preferences: Package Control Settings - User Preferences: Alignment File Settings - Syntax Specific - User Set Syntax:SCSS Set Svntax: Git Commit Messaae
Sublime Text Power User
Note: Using a fuzzy search that contains
helps quickly narrow down syntax highlighting
commands as they all begin with Set Syntax.
ssx I Set Syntax: XSL Set Syntax: XML Set Syntax: TeX Set Syntax: TeX Math Set Syntax:LaTeX Set Syntax: BibTeX Set Syntax. LaTeX Memoir Set Syntax: LaTeX Beamer Set Syntax: LaTeX Log Set Syntax: Textile Set Syntax: CSS3 Set Syntax: Stylus Set Syntax: SASS Set Syntax: LESS Set Syntax: Emmet Set Svntax: YAML
If you're having trouble remember certain keyboard shortcuts you can, again, utilize the command palette for this. Example: Forgot what the code folding and unfolding commands were? Type fold and the corresponding keyboard shortcut reference will be neatly displayed to the right of the search results.
Code Folding: Unfold All Code Folding: Fold Tag Attributes
Most of your snippets should have keyboard shortcut associated with them but when you install a package with snippets, it can be hard to know what is available without digging through GitHub repositories, wikis or docs. Use 27 of 202
to filter your snippets. Sublime Text Power User
As previously mentioned, you can open the command palette by clicking on in the top menu and then selecting
. However, the whole point of
the command palette is to limit your use of the mouse. That known, remembering the command palette keyboard shortcut is essential to being a productive Sublime Text user. Take a moment to memorize and try out the command palette keyboard shortcut a few times. §€ + sh ift +
on Windows and Linux.
If you would rather use a different keyboard shortcut, check out Chapter 15.
Sublime Text Power User
Editor Settings & Customization
4.1 Settings Files Customizing your text editor to exactly suit your needs is one of the best things you can do for your productivity as a developer. Unlike most editors, there aren't fancy GUI menus that allow you to pick and choose settings - there are settings files. There are two types of settings files, both of which are formatted in JSON. All settings files are located inside of the Sublime Text packages folder. It's important to know where these files are so you can easily reference them. The easiest way to open this folder is from the menu bar. Preferences — > Browse Packages. OSX users will find Preferences under sublime Text 2
In here there are quite a few different files and folders. The ones you use to configure Sublime Text are usually found in the
folder - this is your folder and
will never be overwritten when you upgrade. Everything from which font is being used and color schemes to the tab sizes and ignored folders can all be set using custom editor preferences.
Sublime Text Power User
To find out what all the available settings are, you can take a look at the default file by opening it up via
Preferences — > Settings - Default
. This file is only used as a
reference. Setting custom preferences will override the settings in this default file. Note: The default settings file may look large but is worth reading through to get an idea of what changes are possible to enhance your work flow.
These files are where we specify all of our preferences. We will be doing most of our customization in menu
Preferences — > Settings - User
which you can bring up in the
or by simply hitting
There are a few types of settings files and the editor references them in this order: 1. Default Settings (do not edit this file) 2. P a c k a g e s / D e f a u l t / P r e f e r e n c e s .sublime-settings 3. Platform-Specific Settings (for those who jump between operating systems) 4. P a c k a g e s / D e f a u l t / P r e f e r e n c e s ( ).sublime-settings 5. User Settings (where we will make almost all of our edits) 6.
P a c k a g e s / U s e r / P r e f e r e n c e s .sublime-settings
7. Syntax-Specific Default Settings (do not edit this file) 8.
P a c k a g e s / / .s u b l i me-settings
9. Syntax-Specific User Settings (for those who wish to have different settings per programming language) 10. P a c k a g e s / U s e r / .s u b l i me-settings
If you Open Up your
settings - user ) you
will see a blank settings file like this:
// Settings in here override those in " D e f a u l t / P r e f e r e n c e s .s u b l i m e - s e t t i n g s " , and // are o v e r r i d d e n in turn b y file type specific settings.
< >All of our settings will follow JSON syntax and look something like this: < "setting_name"
Sublime Text Power User
Syntax / Language Specific Settings
For some languages you may want different settings. For example, when editing JavaScript files you might want to use spaces instead of tabs and turn off line wrapping. On the other hand, when writing in Markdown, you still want hard tabs and to see wrap lines. Instead of switching these settings between languages, you can simply use the above reference order and create a new file called User/Markdown. sublime-settings
. Inside you can put the following:
> Settings Files JSON Gotchas
A few things to keep in mind if you are new to Sublime Text or JSON formatting in general. 1. Use "double quotes" when defining both keys and string values (single quotes are not valid JSON). 2. Each key, value pair requires a comma between them
Example: i "setting_name"
Note: Notice that the above JSON doesn't have a comma after the last line? You don't need one so leave it out! This is one of the most common mistakes when editing JSON objects.
Sublime and its packages come with some great maps for keyboard shortcuts. These keymap files work very similarly to the settings hierarchy noted above. We'll go into detail on how you can write your own shortcuts, using keymaps, later in Chapter 15.
Sublime Text Power User
4.2 Syncing Your Settings If you have multiple computers that run Sublime Text, you will want to have the same settings and packages on both of them. The two most popular, and automatic, ways to do this is either with Git or Dropbox. Dropbox is the preferred method as it is done passively and automatically, whereas Git requires actively pushing and pulling. Each operating system has a different set of instructions which you can find on the Package Control Website. At the end of the day, we essentially need to link the folder on computer 1 to computer 2. Since Dropbox and Sublime Text are in different folders, we can create a symlink (symbolic link) which will tie the Sublime Text /Packages/user
folder to our Dropbox folder.
It's important to note that we don't want to link the entire Packages/
directory as it contains the actual code for the packages. We only want to User/
folder which contains
Package Control, sublime-settings
that tells Package Control which packages should be installed. Package Control will make sure to grab the correct version of each package for your computer and install it. By syncing the entire
folder, we also make sure the following user
preferences get moved over: • • • • • •
Your master settings file - Preferences .sublime-settings Your language specific settings files - c ss .sublime-settings Your custom snippets Your custom build tasks SFTP server information And other package specific information and settings
Sublime Text Power User
4.3 Tabs, Spaces & Indentation SpecifyingTabs Or Spaces
By default, Sublime Text uses tab characters with a size of 4. If you prefer to use spaces instead of a tab character, simply add this to your preferences file: "translate_tabs_to_spaces": true You can also change the tab size or the number of spaces a tab takes up. It defaults for 4 but I prefer to use 2 "tab_size": 2 Converting From Tabs -> Spaces Or Spaces -> Tabs
You will often run into a file or snippet of code that contains tabs or spacing the isn't in tune with your preferred style. Rather than trying to reformat everything manually, you can easily convert the files spacing preference by doing the following: 1. Open the file 2. Open the Command Palette ( §e + sh ift + P ) 3. Type spaces 4. Find Indentation: Convert to Spaces in the search results 5. Hit enter
spaces) Indentation: Convert to Spaces Preferences: Package Control Settings - Default Preferences Package Control Settings - User Preferences: Browse Packages Package Control: Discover Packages Package Control: List Packages HTML: Encode Special Characters
This command will convert the entire document from tabs to spaces. Type tabs to find the command to do the opposite.
Sublime Text Power User
You may have a personal preference between tabs and spaces, but not every project will share that preference by default; Because of this, Sublime will attempt to detect the tabs or spaces used. If you wish to turn this detection off, you can toggle this following option in your settings file: "detect i n d e n t a t i o n " : false
Detect Settings with Editor Config Package
Preferences such as tabs vs spaces and new lines at the end of files can vary from project to project. For instance, the jQuery Project uses a full tab character while Node uses 2 spaces. The editor config project is a package that is available for Sublime Text (as well as all other major editors) which can help to bring some sanity to project-specific formatting nuances. Project authors include a . editorconf ig file in the root of their project. When the Editor Config package is installed, it will detect this file, read the config settings and update your Sublime Text settings to reflect the project's preferences. No more headaches keeping all of your team members or contributors on the same page with formating! Paste And Indent
One of the best tricks I've ever learned in Sublime Text is paste and indent. If you have ever pulled a piece of code off the Internet and pasted it into your editor, you'll no doubt feel the pain of having it paste in all weird leaving you to have to go in and fix it. Easy fix to this, instead of pressing the normal §§ + to using §€ + s h ift +
to paste, is to simply switch
to paste. This will automatically indent your code block
and switch it to your current use of tabs or spaces.
Sublime Text Power User
Like that one? I loved it so I remapped my key combos to paste and indent by default on
Paste this little snippet into your key bindings file located at
["s u p e r + s h i f t + v " ],
" p a s t e _ a n d _ i n d e n t " >,
4.4 Fonts and Type Sizing Picking a font is one of the most important parts of making your editor feel just right. Sublime gives us very fine grain control over how text is displayed. To change your font, simply set the value of "font_face" like so: "font_face": "inconsolata" Picking which font to use is a very personal thing. Some developers place importance on fonts that have an italic style, while others are picky about the visual difference between o and o or how the equals and open bracket make a fat arrow => . I've personally hopped around and used a few in the past few years and I'm currently between inconsolas and M+2m. Here are a few of best and most popular programming fonts.
Sublime Text Power User
^ ^ ____________________________ Q /-;[)e sk T o n / Aesbos js
P i ~ ;D eskto p/w esb os.js