Sublime Text Hotkeys: How to Write Code Faster

Contents:

• 1. Comment out code
• 2. Go to line by number
• 3. Multiple input
• 4. Multiple editing
• 5. Start multi-window mode
• 6. Swap lines
• 7. Duplicate lines without Ctrl + C, Ctrl + V
• 8. Open clipboard
• 9. Wrap text in HTML tags
• Bonus: Use abbreviations

Developers often resort to using Sublime Text to quickly check and write code. To increase work efficiency, it is worth learning hotkeys, which can significantly speed up the process and minimize mouse use. In this article, we'll look at how to master these combinations and which hotkeys are especially useful for developers.

1. Comment out code

• Disable a section of code and see how the program works without it. Useful for testing and debugging.
• Run the program even if some functionality is not yet ready.

To comment a line or a selected fragment of code, place the cursor in the desired location and press Ctrl + / (for macOS users: ⌘Cmd + /). This method allows you to quickly add comments to your code, which simplifies the development process and improves code readability.

2. Jump to line number

When you run code in the browser console, the built-in interpreter checks and reports any errors, specifying the specific file and line. For a small project, finding and fixing the error can be quick. However, if the project contains thousands of lines of code, finding the problematic line becomes a complex task, requiring significant scrolling time. How to simplify this process?

• Press the hotkey Ctrl + G (both on macOS and on Windows).
• Enter the number of the desired line.
• Go to the problem and fix it.

3. Multiple Input

If you want to change the text attributes of multiple p tags in your HTML file, you can do it more efficiently. Instead of manually editing each of the 25 tags, you can use CSS to set styles. For example, you could create one class that would center the text, color it green, and change the font. Then simply apply this class to all the desired p tags. This will significantly reduce time and simplify the editing process. Using CSS to style elements is a more optimal and modern approach that helps keep the code clean and readable.

In Sublime Text, you can edit multiple lines simultaneously using the "split" cursor feature. There are two methods for achieving this.

• Precise: Hold down Ctrl and left-click on each line where you want to make a change.
• Quick. Press and hold the middle mouse button (wheel) and select the desired lines - the cursor will appear in each of them.

4. Multiple Editing

While reviewing a colleague's code, you come across a function called "overTherainbow." While the name sounds appealing, it doesn't clearly convey the function's purpose, operation, or return value. In situations like these, you need to change the function's name to something more descriptive, reflecting its functionality. It's important to remember that such changes must be made throughout the code, otherwise they will render it inoperable. Proper function naming improves code readability and makes it easier to maintain.

• Select the word you want to replace.
• Press Alt + F3 in Windows or ⌘Cmd + Ctrl + G in macOS.
• A cursor will appear next to each such word in the code: now you can delete or add some letters, or even write everything from scratch.

5. Launch multi-window mode

The main feature of Sublime Text is its multitasking. You can open many different projects in adjacent tabs and work on them simultaneously. In addition, each tab can be split into multiple screens, which allows you to conveniently organize your workspace and visually monitor all open files, like on a surgeon's table. This makes Sublime Text an ideal tool for developers who need to effectively manage several projects at the same time.

Sublime Text has a split-screen feature for working with multiple files more conveniently. To split the screen, follow these steps: You can open multiple panels, which allows you to simultaneously edit multiple documents or compare code. To do this, use the commands in the View menu or keyboard shortcuts. Splitting the screen helps optimize your workflow and increases productivity, allowing you to quickly switch between files and see changes in real time. Customizing the arrangement of panels is also available, allowing you to organize the space to suit your needs.

• Vertical (2-4 columns) - Shift + Alt + 2-4.
• Horizontal (2-3 rows) - Shift + Alt + 8-9.
• Table (2 × 2 tiles) - Shift + Alt + 5.
• Restore everything as it was - Shift + Alt + 1.

For macOS, the hotkeys remain the same, but instead of the Shift key, you should use ⌘Cmd. This allows you to effectively execute commands and improves the usability of the system. Pay attention to using these combinations to increase productivity when interacting with macOS applications and features.

6. Swap Lines

You need to change the sequence of events in a script or move a variable from one block to another. This will optimize code execution and improve its readability. Proper code organization promotes more efficient data management and reduces the likelihood of errors.

• Using arrow keys (for both systems), select a line and move it using Shift + Ctrl + ↑↓ in Windows or ⌘Cmd + Ctrl + ↑↓ in macOS.
• Using convenient swap keys (Windows only), select the desired code fragments, and then press Ctrl + T. The lines will swap places like balls in a juggler's hands.

7. Duplicate lines without Ctrl + C, Ctrl + V

If you have experience working in a development team, you have probably heard the expression from more experienced colleagues: "Duplicate code is bad, avoid it." In computer science, there's a principle known as "don't repeat yourself" (DRY). However, as the old saying goes, exceptions are sometimes possible. Therefore, we offer you the following guide on this issue:

• Select the fragment you want to duplicate.
• Press Ctrl + Shift + D on Windows or ⌘Cmd + Shift + D on macOS.
• Create as many copies as needed.

8. Open Clipboard

Programmers often face the problem of clipboard confusion. After copying a line and getting distracted by other tasks, you can lose track of what you intended to paste and where. To avoid such situations, the Sublime Text text editor saves the last 15 copies made in a document to the clipboard. This allows you to easily revert to previous versions of the text and minimize the risk of losing important information. This functionality significantly increases productivity and provides a more comfortable code editing experience.

To retrieve them from there, follow these recommendations: first, analyze the location and conditions in which they are located. Then, prepare the necessary equipment and means for safe evacuation. Be sure to consider the possible risks and ensure the safety of yourself and those you are going to rescue. Use reliable communication methods to stay in touch with your team and stay up-to-date. It's important to act quickly and effectively to minimize potential impacts. Consult with professionals or specialists if the situation requires additional expertise.

• Press Ctrl + K + V (for macOS — ⌘Cmd + K + V).
• Select the desired line from the list.
• Left-click to place it where you need.

9. Wrap text in HTML tags

To add text to the body of the site, for example, a link, address, phone number, or product description, you need to use HTML code. It is important to format elements correctly so that the browser interprets them as part of the web page structure, and not just as text. Use appropriate tags, such as <a> for links, <address> for addresses, or <p> for paragraphs of text. This will ensure the correct display of information and improve the SEO optimization of the page, which contributes to better ranking in search engines. Correct use of semantic tags will help not only in the perception of content by users, but also in its indexing by search engines.

For Windows users, the keyboard shortcut Alt + Shift + W allows you to quickly frame selected text with standard HTML tags. These tags can be replaced with any others at your discretion. There is currently no such hotkey for macOS users, but we will definitely share information as soon as it becomes available.

Bonus: Using Shortcuts

If you're planning to create web pages in Sublime Text, consider the Emmet plugin. This tool greatly simplifies working with HTML and CSS by adding new commands and shortcuts. For example, by typing «!» in your code, Emmet will automatically create the basic structure of your web page with the necessary tags. This speeds up the development process and increases productivity, as you can focus on content and design rather than routine tasks. Using Emmet in Sublime Text is an effective way to optimize your workflow and improve the quality of your layout.