In this post:
- How to compare files with sublime
- natively
- using plugin Compare Side-By-Side
Plugins are extremely helpful in bringing extra features to Sublime Text, I highly recommend using Package Control to manage your plugins. Bracket highlighter is a plugin that highlights tags and brackets (go figure!) But seriously, it is a powerful tool that shows you the start and end point of every section of code you are. Enteleform's answer works if the cursor is directly next to a parenthesis, square bracket, or curly brace, but not otherwise. Funny voice changer program. Having all of these highlighted regardless of cursor position without a separate plugin is not possible with the default Java syntax that ships with Sublime.
How to compare files with sublime
Native search in Sublime Text 3
Sublime Text has incorporated file comparison - Diff files - which is not easy to be seen at least for Linux and MacOS. In order to make it work you need to follow this steps(steps tested on Sublime 3 and Ubuntu):
- Go to File
- Open Folder
- Navigate to the directory which contains the files to be compared(select this folder)
- Open
- Folders sidebar should appear - if you don't see the sidebar you need to go to ( View -> Sidebar - Show Sidebar)
- In the sidebar select the files for comparison(with pressing CTRL (Linux and Windows) or ⌘ (on OS X)
- Diff Files..
Using plugin Compare Side-By-Side
A better and easier way to compare files in Sublime text editor is by using a plugin:
How to install Compare Side-By-Side(check below how to install package control):
- Go to Preferences
- Package controlCTRL+SHIFT+P
- Install Package
- Search for Compare Side-By-Side
- Left click with the mouse
In order to compare you need to:
- Select the first file for comparison to be active
- Go to the second one with right click of the mouse
- Compare with active tab
or you can use: Compare with..
In order to remove this plugin:
- Preferences
- Package control
- Remove Package
- Search for Compare Side-By-Side
- Left click with the mouse
Install package control
In order to install package control you can visit this page and follow the instructions: Sublime Install package control
Manual installation
- Preferences
- Browse Packages…
- Browse up a folder and then into the Installed Packages/ folder
- Download Package Control.sublime-package
- copy the file into the Installed Packages/ directory
- Restart Sublime Text
or automated:
- View
- Show Console
- Paste this code(for Sublime 3)
Add permanent highlighting for file types
By default all files in Sublime are opened as Plain text. It's rather annoying to open files from some association files and manually select the highlighting. If you know the file type association and the related highlighting then you can set it up in Sublime editor by:
- View
- Syntax
- Open all with current extension as ..
- Select language - for example HTML ( in my case I have files .hbs which are related to HTML)
- Left click of the mouse
e
Now every time when you open file from this file type you will have this association.
In order to restore the default value you can:
- View
- Syntax
- Open all with current extension as ..
- Plain text
Search with regular expressions in Sublime Text editor
If you want to perform are regex searches in Sublime you need to enable the regex search by:
- Find
- Find - CTRL + F
- Enable regex search by pressing this button .* (next to Aa from search menu)
- Enter the Regex expression - for example searching for numbers: d+
- Find
The world of IDE software is massive with programs for every operating system. My personal favorite is Sublime Text, and I use it for all my coding projects.
Aside from Sublime's many optional themes, keyboard shortcuts and lightning-fast workflow, it also has a vast community of developers that create extensions that make the software even better and easier to use.
If you search around you'll find hundreds of extensions to pick from. And for this post, I've curated some of the best Sublime extensions that'll save time and effort in any web dev workflow.
In order to remove this plugin:
- Preferences
- Package control
- Remove Package
- Search for Compare Side-By-Side
- Left click with the mouse
Install package control
In order to install package control you can visit this page and follow the instructions: Sublime Install package control
Manual installation
- Preferences
- Browse Packages…
- Browse up a folder and then into the Installed Packages/ folder
- Download Package Control.sublime-package
- copy the file into the Installed Packages/ directory
- Restart Sublime Text
or automated:
- View
- Show Console
- Paste this code(for Sublime 3)
Add permanent highlighting for file types
By default all files in Sublime are opened as Plain text. It's rather annoying to open files from some association files and manually select the highlighting. If you know the file type association and the related highlighting then you can set it up in Sublime editor by:
- View
- Syntax
- Open all with current extension as ..
- Select language - for example HTML ( in my case I have files .hbs which are related to HTML)
- Left click of the mouse
e
Now every time when you open file from this file type you will have this association.
In order to restore the default value you can:
- View
- Syntax
- Open all with current extension as ..
- Plain text
Search with regular expressions in Sublime Text editor
If you want to perform are regex searches in Sublime you need to enable the regex search by:
- Find
- Find - CTRL + F
- Enable regex search by pressing this button .* (next to Aa from search menu)
- Enter the Regex expression - for example searching for numbers: d+
- Find
The world of IDE software is massive with programs for every operating system. My personal favorite is Sublime Text, and I use it for all my coding projects.
Aside from Sublime's many optional themes, keyboard shortcuts and lightning-fast workflow, it also has a vast community of developers that create extensions that make the software even better and easier to use.
If you search around you'll find hundreds of extensions to pick from. And for this post, I've curated some of the best Sublime extensions that'll save time and effort in any web dev workflow.
If you're looking for Sublime Text extensions for WordPress, try this collection.
1. Emmet
Sublime Text and Emmet are practically one and the same. The Emmet extension doesn't serve just one function or purpose.
It's a massive toolkit for web developers with a bunch of handy coding features, extra keyboard shortcuts, and features for automating your workflow. This can help you manage your code snippets or add extra features like auto-image attributes.
If you look through Emmet's massive documentation you're sure to find a bunch of handy things you can adopt. It'll take some adjusting to make this a normal part of your workflow, but in the end, it's worth learning.
There's no better extension for Sublime Text than Emmet. Especially for anyone frequently coding websites from scratch.
2. Autoprefixer
Many of the newer CSS3 properties have prefixes to handle different rendering engines. These are mostly used for the WebKit, Gecko, and Microsoft engines which are grouped together as vendor prefixes.
Not every property requires these prefixes anymore. Browsers have come a long way in a few short years, and most CSS3 properties can run without prefixed code.
But if you want to support the largest possible audience then you'll want Autoprefixer. This can be installed via the Sublime package manager with just a few clicks, and it's even easier to add into your codebase.
3. Themr
Sublime comes with a couple default themes with certain syntax highlighting styles. But you may want to add more into your arsenal and that's where Themr can help.
This small add-on lets you sort through available UI themes and organize them according to your favorites, even assigning keyboard shortcuts if needed.
Plus you can add new themes as you find them and organize them all together. Your 'favorite' themes can even be saved as presets based on whatever file types you're using(ex: HTML, JS, and PHP files).
4. JSHint
Debugging JavaScript is a pain. If you practice debugging you'll naturally get better at the process, but it's still not easy to do.
With Sublime's JSHint extension you can bring JavaScript debugging right to your IDE. This simple add-on lets you test your JavaScript code from any JS file.
A new console window appears on the IDE where you can sift through errors, find what they mean, and quickly correct them.
You can even run this from the terminal window if you want to check a file outside of Sublime. An excellent tool for developers who continuously find themselves working in JavaScript.
5. Auto Filename
Almost every webpage references other files somewhere in the code. These files could be images, JS scripts, stylesheets, or even other dynamic pages like .php files.
Starcraft brood war campaign. With Auto Filename you'll save loads of time manually entering these files. Just start typing the name and this extensions handles the rest with an autocomplete field.
It works for all elements inside your HTML so you can quickly add directory paths for images, CSS files, JavaScript plugins, you name it.
6. Sidebar Enhancements
Sublime Text comes with an optional sidebar view that works like a directory. This is handy when you're working on a larger project with multiple files and includes.
Sidebar Enhancements takes the default Sublime sidebar and, well. enhances it!
This gives you multiple folder views, more options in the right-click context menu, easy copying of path URIs and other handy options like 'open with' for graphics.
Not every developer uses the sidebar feature. I even turn it off when I'm just editing single files. But if you continuously use Sublime's sidebar this extension will prove invaluable to your workflow.
Sublime Text 3 For Mac
7. ColorPicker
Most of us are familiar with color picker tools in programs like Photoshop. They work great and often they're all we need for a solid UI process.
Sublime's ColorPicker extension lets you bring the color selection process right into your IDE. Of course, there are plenty of free color webapps you could rely on instead.
But this plugin is superb since it works right inside the code window.
8. Git
Vs Code Vs Sublime 3
If you've never used Git version control then it can be a long road to learn. The right resources will help and once you fully understand Git you'll never want to go back.
One of the best resources you can use is the Git extension for Sublime. This automates the Git version control workflow and makes it super easy for you to manage packages from your IDE.
It's a super simple plugin to work with, and it's compatible with all operating systems.
Many developers prefer to use the command line for Git management, but Sublime is another viable choice.
9. Bracket Highlighter
Here's an sought-after feature that's definitely useful when coding big pages.
The Bracket Highlighter extension automatically highlights the opening and closing brackets inside your code. All you need to do is place your cursor inside the starting(or ending) bracket, then sift through the file to find the matching tag.
Sublime Text 3 Download
It'll help you visualize HTML containers in your page and see which elements are contained inside other elements.
Sublime does have a small bracket highlighting feature with Emmet, but I prefer this extension since the highlighting is much clearer.
Sublime Text 2
Related Posts
