Sublime Text Tips

8 years ago

Note: I now use Visual Studio Code and I encourage you to check it out. While I still have some love for Visual Studio and WebStorm, my favorite IDE for front end development is Sublime Text. Not only is it insanely fast, but it can be thoroughly customized and is by far the most minimalist of the three. The following is a list of few simple things I do after I install Sublime Text. That being said, there are tons of different ways to further customize and thousands of packages to pick from.

Packages

  • These add additional enhancements like code formatters or UI tweaks to the IDE and there are thousands to pick from. Periodically I will see what is trending or popular on the Package Control site to see if there is anything interesting to install.

Package Control - Not sure why this isn't in Sublime Text by default, but it will provide much better functionality for finding, installing, and removing packages. Once you have done this, simply type Command+Shift+P (Mac) or Ctrl+Shift+P (Windows) and then pick a command.

Favorite Packages

  • Package Control: Add Package
  • Package Control: Remove Package -Package Control: List Packages
  • HTML-CSS-JS Prettify - This package will prettify HTML, CSS, and JavaScript and is the best one I have tried so far. (Note: Once you have installed it, navigate to Preferences Package Settings HTML/CSS/JS Prettify Set Plugin Options and set format_on_save flag to true. Now, any time you save the code you are working, it will be auto-formatted.)
  • PackageResourceViewer - This is another package that should be part of Sublime Text by default. It provides a much better way of tweaking Sublime Text's configuration settings.
  • SideBarEnhancements - This package will provide better right-click functionality for your side bar and lets you configure paths to open files in other programs easily. For example, you can configure JPG files to be opened in Photoshop.
  • visual-studio-dark - There are a ton of different themes out there and Sublime Text's is already pretty good, but I really dig the latest default dark theme in Visual Studio and this does a very good job of mimicking it. Since I tend to switch between the two IDEs, it makes it much easier on the eyes. Once you have added the package from package control, set the color scheme by navigating to Preferences Color Scheme Visual Studio Dark Visual Studio Dark

These are a few tweaks I have compiled over time to tweak the side bar UI. Primarily it will make the background dark and font color light , similar to the code editor section when the Visual Studio Dark theme is added. It will also remove the folder and document icons.

  • Open Package Control with Command+Shift+P (Mac) or Ctrl+Shift+P (Windows)
  • Open PackageResourceViewer: Open Resource
  • Find and click "Theme - Default "
  • Find and open "Default.sublime-theme "
  • Update all the sidebar settings with the following:
;[
  {
    class: 'sidebar_container',
    'layer0.tint': [23, 23, 20],
    'layer0.opacity': 1.0,
    'layer0.draw_center': false,
    'layer0.inner_margin': [0, 0, 1, 0],
    content_margin: [0, 0, 1, 0]
  },
  {
    class: 'sidebar_tree',
    row_padding: [8, 3],
    indent: 12,
    indent_offset: 17,
    indent_top_level: false,
    'layer0.tint': [31, 31, 31],
    'layer0.opacity': 1.0,
    dark_content: false
  },
  {
    class: 'sidebar_heading',
    color: [255, 255, 255],
    'font.bold': true,
    shadow_color: [0, 0, 0],
    shadow_offset: [0, 1]
  },
  {
    class: 'sidebar_heading',
    parents: [
      {
        class: 'tree_row',
        attributes: ['selected ']
      }
    ],
    shadow_color: [160, 174, 192]
  },
  {
    class: 'sidebar_label',
    color: [187, 187, 187],
    shadow_color: [0, 0, 0],
    shadow_offset: [0, 1]
  },
  {
    class: 'sidebar_label',
    parents: [
      {
        class: 'tree_row',
        attributes: ['selected ']
      }
    ],
    color: [255, 255, 255],
    shadow_color: [76, 76, 76],
    shadow_offset: [0, -1]
  },
  {
    class: 'sidebar_label',
    parents: [
      {
        class: 'tree_row',
        attributes: ['expandable ']
      }
    ],
    settings: ['bold_folder_labels '],
    'font.bold': true
  },
  {
    class: 'sidebar_label',
    attributes: ['transient '],
    'font.italic': true
  },
  {
    class: 'icon_file_type',
    'layer0.opacity': 1.0,
    content_margin: [0, 0]
  },
  {
    class: 'icon_folder',
    'layer0.texture': 'Theme - Default/icons/folder.png',
    'layer0.opacity': 1.0,
    content_margin: [0, 0]
  }
]

File & Folder Exclude Settings

This is by far one of my favorite features as it allows you to make the IDE very minimalist by hiding folders and files that you don't need to see or use very rarely and prevent them from coming up in search results. A lot of this will depend on what type of project you are working on and you will accumulate your own list over time. You can easily re-enable items simply by commenting out the line and saving the file.

  • To add these, simply copy these into Preferences Settings - User
"folder_exclude_patterns": [
  ".git",
  ".hg",
  ".idea",
  ".meteor",
  ".svn",
  ".tmp",
  "bower_components",
  "brand-assets",
  "build",
  "components",
  "CVS",
  "dist",
  "karma",
  "node_modules",
  "server",
  "test",
  "vendor "
],
"file_exclude_patterns ": [
  ".bowerrc",
  ".buildignore",
  ".csslintrc",
  ".DS_Store",
  ".editorconfig",
  ".gitattributes",
  ".gitignore",
  ".htaccess",
  ".jshintrc",
  ".modulusignore",
  ".slugignore",
  ".travis.yml",
  "*.a",
  "*.class",
  "*.db",
  "*.dll",
  "*.dylib",
  "*.exe",
  "*.idb",
  "*.lib",
  "*.ncb",
  "*.o",
  "*.obj",
  "*.pdb",
  "*.psd",
  "*.pyc",
  "*.pyo",
  "*.sdf",
  "*.so",
  "*.spec.js",
  "*.sublime-*",
  "*.suo",
  "404.html",
  "bower.json",
  "favicon.ico",
  "karma-e2e.conf.js",
  "karma.conf.js",
  "LICENSE.md",
  "package.json",
  "Procfile",
  "README.md",
  "robots.txt "
]

View: Toggle Menu

This gives you a tad more space at top.

  • Command+Shift+P (Mac) or Ctrl+Shift+P (Windows) and then look for View: Toggle Menu.
  • To show the menu again, simple mouse up in Mac or hit your Alt key in Windows.
Discuss on Twitter