You probably know by now that we are fans of Sublime Text. It might look a very simple code editor, but it has a lot of hidden features underneath. After exploring it for a while, you might be surprised that you can do quite a number of cool things in SublimeText. We went in and dug around for a bit and here are just some fo the tips and tricks that we think you would like to play with.
Let’s supercharge your coding experience in Sublime Text.
1. Selection
As a web developer, we would frequently do code editing. Below are some handy keyboard shortcuts that allow you do different types of selections in SublimeText.
| Command + D |
Select a word.
|
| Command + L |
Select a line.
|
| Command + A |
Select the entire content within the document.
|
| Ctrl + Command + M |
Select anything inside the bracket (which is useful when working with CSS or JavaScript)
|
Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this feature:
Command
|
Hold the Command key and click on the lines that you want to select.
|
| Command + Ctrl + G |
Select a code, line, or word first the hit this combo to select the others with the same instances.
|
| Command + D |
Hit this key to quickly select the next code, line, or word that has the same instances as you are currently selecting.
|
See how multi-line selection works below.
2. Sorting CSS
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. But putting them in a particular order will make your codes more organized. In SublimeText, you can select CSS properties and hit F5 to sort the properties in alphabetical order.
You can also use a third-party plugin like CSSComb to give you more control over the property sorting rule.
3. Command Palette
You can do many things quickly with Command Palette such as rename new file, set file syntax, and inserting snippets. To show the Command Palette in SublimeText, hit Command + Shift + P, then the command you intend to perform. Here are some examples.
Renaming file
Set file syntax to HTML
Insert code snippet
4. Switching Between Tabs And Projects
We may have many files opened when working on a project. In SublimeText, we can switch through these files (or tabs) quickly with the following shortcuts:
| Command + T |
Lists tabs that are currently open. Select one to go to the tab.
|
| Command + Shift + ] |
This will bring you immediately to the next tab.
|
| Command + Shift + [ |
While this key will bring you the previous tab.
|
| Command + Ctrl + P |
Switch between the projects that are listed on the SublimeText Sidebar.
|
5. Cross-File Editing
This feature would also be very useful when we are working with multiple files. For example, say that we have several code blocks that are very similar and spread across different files in the project. To change these codes efficiently, you can:
1. Hit Command + Shift + F in Sublime Text. Put the words, sentence, or line of codes that you want to change in the Find field.
Pro Tip: hit Command + E to quickly put the code selected in the Find input field.
2. Specify the file names within the Where input field or add
<open files> so that it will only affect files that are currently open.
3. Put the word or code replacement in the Replace input field, and hit the Replace button.
6. File Crawling
I found this feature really helpful when I’m editing CSS. Hit Command + R. A dialog will appear with a list of CSS selectors on the document, as you can see in the screenshot below. You can search and select the selectors that you intend to navigate to.
I found this a more convenient way to search for code block than using the regular Find feature.
7. Spell Checker
I frequently write in code editor, and I also frequently made some mistake in the spelling. If you are like me, you can enable the spell checker in SublimeText in this way.
Go to Preferences > Settings – User in SublimeText, and add the following line.
- "spell_check": false,
8. Sidebar Enhancement
This plugin, SideBarEnhancements, brings some great enhancements to the SublimeText 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, and Open in Browser.
Tip: Hit F12 key to open the file in the browser.
Read Also: post
9. Change SublimeText Theme
We can also change the entire appearance of SublimeText, and one of my favorites is called Soda Theme, which can be installed through Package Control.
If the theme that you intend to install is not available in the Package Control repository, you can do it manually.
1. Download and Unzip the Theme package.
2. Go to Preferences > Browser Packages…3. Put the theme folder in the Packages folder.
4. Then go to Preferences > Settings – Users, and add the following line to activate the theme.
2. Go to Preferences > Browser Packages…3. Put the theme folder in the Packages folder.
4. Then go to Preferences > Settings – Users, and add the following line to activate the theme.
- "theme": "Soda Light.sublime-theme"
If you are on Windows you can check this out: Change Sublime Text 2 Theme in 3 Steps.
10. Change SublimeText Icon
Apart from changing the theme, you can also change the icon. There are a bunch of nicely designed SublimeText icons that you can pick up in Dribbble. Here’s how you can change the look of the icon:
1. Download one of the icons from Dribbble. Ensure that the icon also comes in
.icns format, otherwise you can convert it first with this tool: iConvert.
2. Run the following command in Terminal.
- open /Applications/Sublime\ Text.app/Contents/Resources/
3. Replace the Sublime Text 3.icns or Sublime Text 2.icns with the one you downloaded.
11. Sync Setting
If you are working in multiple computers, you might want to keep and apply the same Settings for SublimeText across these computers. We can set this up with the help of Dropbox (and a small tweak).
First, run the following command in Terminal.
- mkdir $HOME/Dropbox/sublime-text-3/
- mv "$HOME/Library/Application Support/Sublime Text 3/Packages" "$HOME/Dropbox/sublime-text-3/"
- mv "$HOME/Library/Application Support/Sublime Text 3/Installed Packages" "$HOME/Dropbox/sublime-text-3/"
Then run this command in Terminal in every other computer you want synchronized with the Settings that we have put in Dropbox.
- DSTPATH="$HOME/Library/Application Support/Sublime Text 3"
- DROPBOX_PATH="$HOME/Dropbox/sublime-text-3"
- rm -rf "$DSTPATH/Installed Packages"
- rm -rf "$DSTPATH/Packages"
- mkdir -p "$DSTPATH"
- ln -s "$DROPBOX_PATH/Packages" "$DSTPATH/Packages"
- ln -s "$DROPBOX_PATH/Installed Packages" "$DSTPATH/Installed Packages"
No comments:
Post a Comment