{"id":18706,"date":"2024-03-13T21:00:31","date_gmt":"2024-03-13T13:00:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18706"},"modified":"2024-03-12T18:27:40","modified_gmt":"2024-03-12T10:27:40","slug":"sublime-text-tips","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sublime-text-tips\/","title":{"rendered":"12 Best Sublime Text Tips and Tricks"},"content":{"rendered":"

You probably know by now that we are fans of Sublime Text<\/a>. It might look like a very simple code editor<\/a>, but it has a lot of hidden features underneath.<\/p>\n

After exploring it for a while, you might be surprised to find that you can do quite a number of cool things in Sublime Text. We went in and dug around for a bit, and here are just some of the tips and tricks that we think you would like to play with.<\/p>\n

Let\u2019s supercharge your coding experience in Sublime Text.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Identify Code Errors in Sublime Text<\/a>\n\t\t\t\t<\/p>\n

\n

1. Selection<\/h2>\n

As web developers, we frequently edit code. Below are some handy keyboard shortcuts that allow you to make different types of selections in Sublime Text<\/strong>.<\/p>\n\n\n\n\n\n
Command<\/span> + D<\/span><\/td>\n\n

Select a word.<\/p>\n<\/td>\n<\/tr>\n

Command<\/span> + L<\/span><\/td>\n\n

Select a line.<\/p>\n<\/td>\n<\/tr>\n

Command<\/span> + A<\/span><\/td>\n\n

Select the entire content within the document.<\/p>\n<\/td>\n<\/tr>\n

Ctrl<\/span> + Command<\/span> + G<\/span><\/td>\n\n

Select everything inside the bracket (which is useful when working with CSS or JavaScript).<\/p>\n<\/td>\n<\/tr>\n<\/table>\n

Furthermore, Sublime Text allows us to select multiple lines at once, which can significantly boost our productivity. There are several ways to perform this feature:<\/p>\n\n\n\n\n
\n

Command<\/span><\/p>\n<\/td>\n

\n

Hold the Command<\/span> key and click on the lines you want to select.<\/p>\n<\/td>\n<\/tr>\n

Command<\/span> + Ctrl<\/span> + G<\/span><\/td>\n\n

Select a code, line, or word first, then hit this combo to select the others with the same instances.<\/p>\n<\/td>\n<\/tr>\n

Command<\/span> + D<\/span><\/td>\n\n

Hit this key to quickly select the next code, line, or word that has the same instances as the one you are currently selecting.<\/p>\n<\/td>\n<\/tr>\n<\/table>\n

See how multi-line selection works below.<\/p>\n

\"multi-line<\/figure>\n
\n

2. Sorting CSS<\/h2>\n

Commonly, we do not mind how CSS properties are sorted, as CSS will give us the desired output in the browser regardless of their position. However, putting them in a particular order can make your code more organized. In Sublime Text, you can select CSS properties and hit F5<\/span> to sort the properties in alphabetical order.<\/strong><\/p>\n

\"sorting<\/figure>\n

You can also use a third-party plugin like CSSComb<\/a> for more control over the property sorting rule.<\/p>\n

\n

3. Command Palette<\/h2>\n

You can quickly perform many tasks with the Command Palette, such as renaming files, setting file syntax, and inserting snippets. To show the Command Palette in Sublime Text, hit Command<\/span> + Shift<\/span> + P<\/span>, then enter the command you intend to perform. Here are some examples.<\/p>\n

Renaming file<\/strong><\/p>\n

\"rename<\/figure>\n

Set file syntax to HTML<\/strong><\/p>\n

\"set<\/figure>\n

Insert code snippet<\/strong><\/p>\n

\"insert<\/figure>\n
\n

4. Switching Between Tabs and Projects<\/h2>\n

When working on a project, we may have many files open. In Sublime Text, you can quickly switch through these files (or tabs) with the following shortcuts:<\/p>\n\n\n\n\n\n
Command<\/span> + T<\/span><\/td>\n\n

Lists the tabs that are currently open. Select one to go to the tab.<\/p>\n<\/td>\n<\/tr>\n

Command<\/span> + Shift<\/span> + ]<\/span><\/td>\n\n

This will take you immediately to the next tab.<\/p>\n<\/td>\n<\/tr>\n

Command<\/span> + Shift<\/span> + [<\/span><\/td>\n\n

This key will take you to the previous tab.<\/p>\n<\/td>\n<\/tr>\n

Command<\/span> + Ctrl<\/span> + P<\/span><\/td>\n\n

Switch between the projects listed in the Sublime Text Sidebar.<\/p>\n<\/td>\n<\/tr>\n<\/table>\n

\n

5. Cross-File Editing<\/h2>\n

This feature is very useful when working with multiple files. For example, suppose you have several code blocks that are very similar and spread across different files in the project. To change these codes efficiently, you can:<\/p>\n

    \n
  1. Hit Command<\/span> + Shift<\/span> + F<\/span> in Sublime Text. Enter the words, sentence, or lines of code that you want to change in the Find<\/strong> field. Pro Tip<\/strong>: hit Command<\/span> + E<\/span> to quickly place the selected code into the Find<\/strong> input field.<\/li>\n
  2. Specify the file names within the Where<\/strong> input field or add <open files><\/code> to only affect files that are currently open.<\/li>\n
  3. Enter the word or code replacement in the Replace<\/strong> input field, and hit the Replace<\/span> button.<\/li>\n<\/ol>\n
    \"find<\/figure>\n
    \n

    6. File Crawling<\/h2>\n

    This feature is really helpful when editing CSS. Hit Command<\/span> + R<\/span>. A dialog will appear with a list of CSS selectors in the document, as shown in the screenshot below. You can search and select the selectors you wish to navigate to.<\/p>\n

    This is a more convenient way to search for a code block than using the regular Find<\/strong> feature.<\/p>\n

    \"file<\/figure>\n
    \n

    7. Spell Checker<\/h2>\n

    I frequently write in a code editor and often make spelling mistakes. If you\u2019re like me, you can enable the spell checker in Sublime Text in this way:<\/p>\n

    Go to Preferences > Settings \u2013 User<\/strong> in Sublime Text, and add the following line:<\/p>\n

    \r\n \"spell_check\": true,\r\n <\/pre>\n
    \n
    8. Sidebar Enhancement<\/h2>\n
    This plugin, SideBarEnhancements<\/a>, brings great enhancements to the Sublime Text sidebar. Once installed, right-click on the sidebar, and you will find additional menus such as Open in Finder, New File, New Folder, Open With,<\/strong> and Open in Browser.<\/strong><\/p>\n
    Tip<\/strong>: Hit the F12<\/span> key to open the file in the browser.<\/p>\n
    \"sidebar<\/figure>\n
    \n
    9. Change Sublime Text Theme<\/h2>\n
    We can also change the entire appearance of Sublime Text. One of my favorites is called the Soda Theme<\/a>, which can be installed through Package Control.<\/p>\n
    \"soda<\/figure>\n
    If the theme you intend to install is not available in the Package Control repository, you can install it manually:<\/p>\n
      \n
    1. Download and unzip the Theme package.<\/li>\n
    2. Go to Preferences<\/strong> > Browse Packages\u2026<\/strong><\/li>\n
    3. Put the theme folder in the Packages<\/strong> folder.<\/li>\n
    4. Then go to Preferences<\/strong> > Settings \u2013 User,<\/strong> and add the following line to activate the theme:<\/li>\n<\/ol>\n
      \r\n \"theme\": \"Soda Light.sublime-theme\"\r\n <\/pre>\n
      \n
      10. Change Sublime Text Icon<\/h2>\n
      Apart from changing the theme, you can also change the icon. There are many nicely designed Sublime Text icons available on Dribbble. Here\u2019s how you can change the icon:<\/p>\n
        \n
      1. Download one of the icons from Dribbble. Ensure that the icon comes in the .icns<\/code> format, or convert it first with this tool: iConvert<\/a>.<\/li>\n
      2. Run the following command in the Terminal:<\/li>\n<\/ol>\n
        open \/Applications\/Sublime\\ Text.app\/Contents\/Resources\/<\/pre>\n
        3. Replace the Sublime Text 3.icns<\/strong> or Sublime Text 2.icns<\/strong> file with the one you downloaded.<\/p>\n
        \"sublime<\/figure>\n
        \n
        11. Sync Setting<\/h2>\n
        If you are working on multiple computers, you might want to keep and apply the same settings for Sublime Text across these computers. We can set this up with the help of Dropbox (and a small tweak).<\/p>\n
        First, run the following command in the Terminal:<\/p>\n
        \r\n mkdir $HOME\/Dropbox\/sublime-text-3\/\r\n mv \"$HOME\/Library\/Application Support\/Sublime Text 3\/Packages\" \"$HOME\/Dropbox\/sublime-text-3\/\"\r\n mv \"$HOME\/Library\/Application Support\/Sublime Text 3\/Installed Packages\" \"$HOME\/Dropbox\/sublime-text-3\/\"\r\n <\/pre>\n
        Then, run this command in the Terminal on every other computer you want synchronized with the settings that we have put in Dropbox:<\/p>\n
        \r\n DSTPATH=\"$HOME\/Library\/Application Support\/Sublime Text 3\"\r\n DROPBOX_PATH=\"$HOME\/Dropbox\/sublime-text-3\"\r\n rm -rf \"$DSTPATH\/Installed Packages\"\r\n rm -rf \"$DSTPATH\/Packages\"\r\n mkdir -p \"$DSTPATH\"\r\n ln -s \"$DROPBOX_PATH\/Packages\" \"$DSTPATH\/Packages\"\r\n ln -s \"$DROPBOX_PATH\/Installed Packages\" \"$DSTPATH\/Installed Packages\"\r\n <\/pre>\n
        Thanks to xMarekacross for the tip<\/a>.<\/p>\n
        \n
        12. Clickable URL<\/h2>\n
        ClickableURLs<\/a> is a tiny Sublime Text plugin that is very useful when you find a bunch of URLs within your codes. It makes the URLs clickable.<\/p>\n
        \n
        More<\/h2>\n
        I have written about other things you can do with Sublime Text, including:<\/p>\n