Scott Granneman

panorama-058.jpg

Configuring Sublime Text

On this page…

    User Settings

    These settings apply by default to every file you create in Sublime Text, but they can be over-ridden by syntax-specific settings (for HTML, Markdown, CSS, & so on).

    Open Sublime Text.

    Open the Sublime Text personal settings file:

    A file named Preferences.sublime-settings should open.

    This file will not be empty, & should contain the following lines:

    // Settings in here override those in "Default/Preferences.sublime-settings", and
// are overridden in turn by file type specific settings.
{
}

    Overwrite the entire file with the following1:

    {
    // Sets the colors used within the text area
    "color_scheme": "Packages/Color Scheme - Default/Blackboard.tmTheme",

    // Font face & size
    "font_face": "Consolas",
    "font_size": 16,

    // Characters that are considered to separate words
    "word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?",

    // The number of spaces a tab is considered equal to
    "tab_size": 4,

    // Set to true to insert spaces when tab is pressed
    "translate_tabs_to_spaces": true,

    // OS X only: When files are opened from finder, or by dragging onto the
    // dock icon, this controls if a new window is created or not.
    "open_files_in_new_window": false,

    // Makes tabs with modified files more visible
    "highlight_modified_tabs": true,

    // List any packages to ignore here. When removing entries from this list,
    // a restart may be required if the package contains plugins.
    "ignored_packages":
    [
        "Vintage",
        "Sublime Linter"
    ]
}

    Let me explain a few of those settings, as you may wish to change them on your computer.

    "color_scheme": "Packages/Color Scheme - Default/Blackboard.tmTheme": This controls the colors you see by default. I like a dark theme, & you may not. To pick a different one, go to Preferences > Color Scheme & find one you like.

    "font_face": "Consolas": I really like Microsoft's Consolas: it's a very readable, usable, thoughtful monospace font for coding. It should be on any recent Windows machine & any Mac that has Microsoft Office installed on it. If you don't have Consolas, I recommend the following instead:

    "font_size": 16: Change this to a larger or smaller number depending upon your eyesight.

    Changing Preferences.sublime-settings

    What about other preferences? The easiest way to find the others is to open the default preferences file & copy the thing you want to change from there. Do not change the default preferences file!

    Open the Sublime Text default settings file:

    A file named Preferences.sublime-settings should open. Yes, it is named the same as your personal settings file, which is confusing. However, it should be very obvious which is which, as one is long & filled with entries, while the other should be short.

    Read through the file. If you see any entry you'd like to change, copy it, including the comment describing what it does, paste it into your personal settings file, & change it there. Leave the original lines behind in the default settings file.

    For instance, let's say you decide to hide the line numbers by default (I do not recommend this; it's just an example). Copy (copy, not cut!) these lines from the default settings file:

    // Set to false to prevent line numbers being drawn in the gutter
"line_numbers": true,

    Now paste them into your personal settings file & change them (the comma at the end may be very important; read the next section to see why):

    // Set to false to prevent line numbers being drawn in the gutter
"line_numbers": false,

    Save your personal settings file. Depending upon the setting, you may see a change immediately, or you may need to restart Sublime Text to see your change take hold.

    Be careful changing your personal settings file

    Note that if you choose to add anything to your personal settings file, the following rules apply:

    Failure to adhere to these rules will result in your personal settings file not working!

    HTML Preferences

    Create a blank file by pressing Command+N (Mac) or Ctrl+N (Windows or Linux) in Sublime Text.

    Look in the bottom right of the window. You should see the words Plain Text.

    Click on Plain Text & a long menu should appear listing a variety of different programming & markup languages. Select HTML from this menu. The bottom right of the window should now say HTML.

    Open the Sublime Text settings file that governs the preferences for HTML coding:

    A file named HTML.sublime-settings should open.

    This file should be empty. Put the following into HTML.sublime-settings:

    {
    // Sets the colors used within the text area
    "color_scheme": "Packages/Color Scheme - Default/Blackboard.tmTheme",

    // The number of spaces a tab is considered equal to
    "tab_size": 2
}

    Do NOT click on the little menu on the bottom right that says JSON & change it! Settings files in Sublime Text are always in JSON format!

    Save HTML.sublime-settings & close it.

    CSS

    If you’re continuing from the previous section, use the same blank file that currently says HTML in the bottom right. Click on the HTML & choose CSS from the menu.

    If you are not continuing from the previous section, create a blank file by pressing Command+N (Mac) or Ctrl+N (Windows or Linux) in Sublime Text.

    Look in the bottom right of the window. You should see the words Plain Text.

    Click on Plain Text & a long menu should appear listing a variety of different programming & markup languages. Select CSS from this menu. The bottom right of the window should now say CSS.

    Open the Sublime Text settings file that governs the preferences for CSS coding:

    A file named CSS.sublime-settings should open.

    This file should be empty. Put the following into it:

    {
    // Sets the colors used within the text area
    "color_scheme": "Packages/Color Scheme - Default/Eiffel.tmTheme",

    // The number of spaces a tab is considered equal to
    "tab_size": 2
}

    Do NOT click on the little menu on the bottom right that says JSON & change it! Settings files in Sublime Text are always in JSON format!

    Save CSS.sublime-settings & close it.

    Markdown

    There are two kinds of Markdown syntax that Sublime Text supports: Markdown & MultiMarkdown. Fortunately, you can create preferences for both of them quickly & easily.

    Markdown

    If you’re continuing from the previous section, use the same blank file that currently says CSS in the bottom right. Click on the CSS & choose Markdown from the menu.

    If you are not continuing from the previous section, create a blank file by pressing Command+N (Mac) or Ctrl+N (Windows or Linux) in Sublime Text.

    Look in the bottom right of the window. You should see the words Plain Text.

    Click on Plain Text & a long menu should appear listing a variety of different programming & markup languages. Select Markdown from this menu. The bottom right of the window should now say Markdown.

    Open the Sublime Text settings file that governs the preferences for Markdown coding:

    A file named Markdown.sublime-settings should open.

    This file should be empty. Put the following into it:

    {
    // Which file extensions go with this file type?
    "extensions":
    [
        "md",
        "mdown",
        "mdwn",
        "mmd",
        "txt"
    ], 

    // Sets the colors used within the text area
    "color_scheme": "Packages/Color Scheme - Default/Dawn.tmTheme",

    // Set to true to removing trailing white space on save
    "trim_trailing_white_space_on_save": false
}

    Markdown has no one set extension, hence the need to define possible extensions that Markdown could use. There are others, such as markdown, that I never use. If you run across those, or decide to use them, add it here.

    And even though the default setting for trim_trailing_white_space_on_save is false, it's a good idea to set it here. Sure, it's unnecessary, but if you did decide to change it in your default Sublime Text preferences & didn't have it here, it would be disastrous to Markdown files, which depend in some instances upon trailing white spaces2.

    Do NOT click on the little menu on the bottom right that says JSON & change it! Settings files in Sublime Text are always in JSON format!

    Save Markdown.sublime-settings & close it.

    MultiMarkdown

    If you’re continuing from the previous section, use the same blank file that currently says Markdown in the bottom right. Click on the Markdown & choose Markdown > MultiMarkdown from the menu.

    If you are not continuing from the previous section, create a blank file by pressing Command+N (Mac) or Ctrl+N (Windows or Linux) in Sublime Text.

    Look in the bottom right of the window. You should see the words Plain Text.

    Click on Plain Text & a long menu should appear listing a variety of different programming & markup languages. Select Markdown > MultiMarkdown from this menu. The bottom right of the window should now say Markdown > MultiMarkdown.

    Open the Sublime Text settings file that governs the preferences for MultiMarkdown coding:

    A file named MultiMarkdown.sublime-settings should open.

    This file should be empty. Put the following into it:

    {
    // Which file extensions go with this file type?
    "extensions":
    [
        "md",
        "mdown",
        "mdwn",
        "mmd",
        "txt"
    ], 

    // Sets the colors used within the text area
    "color_scheme": "Packages/Color Scheme - Default/Dawn.tmTheme",

    // Set to true to removing trailing white space on save
    "trim_trailing_white_space_on_save": false
}

    Do NOT click on the little menu on the bottom right that says JSON & change it! Settings files in Sublime Text are always in JSON format!

    Save MultiMarkdown.sublime-settings & close it.

    1. Note that if you use the Package Control extension (which you should) & you use it to enable or disable packages, your nicely-commented preferences file will be overwritten & your comments will be stripped out. This isn't a disaster. I just want you to be aware of this. ↩

    2. Not the best design decision on the part of Gruber, but oh well. It's there, & we have to live with it. ↩

    WebSanity Top Secret