Every developer has their own tooling and special setup—I know I do. It's that tooling that can help you become a faster, stronger, and more productive developer.
One of the ways I find new tools is through pairing with other developers. I'll exist working on a trouble, and see the person I'm pairing with exercise some magical thing in a two 2d flash.
This is the moment I interrupt the pairing session to detect out what that tool was, where to get it, and how to use it. This is by no ways the almost efficient mode of finding new tools, but it's ofttimes when I find the best ones.
With all this in mind, I spent some fourth dimension polling front end developers here at Shopify, to become a listing of all the essential Sublime Text plugins they simply can't live without.
To make things a flake easier, I broke the plugins into the following categories:
- Installation
- Snippets and code style
- Git integration
- Linters and syntax highlighting
- Editor enhancements
- Themes and fun
If yous want to ensure that what yous're building is secure, be sure to check out our commodity on website security.
Installation
1. Parcel Control
Bundle Command is the beginning and probably nigh essential Sublime Text plugin. It enables the easy installation, download, and update of packages or plugins into Sublime Text. The terms package and plugin are often used interchangeably.
To install Package Control, follow the instructions found on the Package Control website. From there, you can simply type in ctrl+shift+p on Windows, or cmd+shift+p on a Mac to open up the Control Palette.
Once the Command Palette is open up, y'all can then blazon Install Package, to install a plugin from the Parcel Control website. You can besides type Add Repository, which allows you to add plugins that are not hosted on the Parcel Control website, by simply using their repository url (make sure non to include .git at the end). And finally, Remove Parcel, will let you uninstall a plugin from your organization by removing it, equally well as any assets from the Sublime packages directory.
Observe your new favorite Markdown editor in our roundup.
Snippets and lawmaking manner
Snippets are a great built-in characteristic of Sublime Text. You lot tin can build your own, in add-on to using the preinstalled ones, or apply a plugin that has a bunch for you like Pismire. The mode snippets work is simple—you lot simply begin typing a keyword that activates a snippet, and press tab to expand the text.
2. Ant
Emmet is a plugin that enables faster HTML and CSS creation with the apply of snippets. It uses abbreviations that expand to valid HTML tags.
For example, to build out a navigation you only need to type the following code:
Which volition expand to:
View Emmet plugin
3. Alignment
Alignment plugin helps to easily align multiple selections, or multi-line selections. What that means is y'all can align multiple selections, or lines, via delimiter such every bit =. Simply blazon ctrl + alt + a on Windows, or cmd + ctrl + a on a Mac, to marshal your selection. To align with :follow this tutorial to setup custom delimiters.
View Alignment plugin
Git integration
Near developers use some type of version control. These days, Git seems to be the most popular. Here are a few Git related plugins for Sublime Text that make working with Git a lot easier.
4. SublimeGit
SublimeGit brings Git into Sublime, so yous don't demand to go dorsum and forth between the command line and your text editor. You used to take to pay for this plugin (that's how crawly it is), but this past yr it was open-sourced. It has a huge list of features, which you can observe in the SublimeGit docs. To go started quickly, install the plugin and use the Control Palette to launch your Git commands.
View SublimeGit plugin
five. GitGutter
GitGutter brings some native Cantlet functionality to Sublime, adding diff hints to the gutter of the sidebar. You tin additionally hover on the indicators in the sidebar, to see a unequal popup. You can perform a multifariousness of commands on the change, such equally copying the content of the diff state, reverting the changes back to the country in Git, jumping to next or previous alter, and more.
Check out our list of the 21 best Cantlet packages for forepart developers.
View GitGutter plugin
6. GitHubinator
GitHubinator is a plugin that shows selected text on a remote GitHub or Bitbucket repository. You but highlight the text you want to search for, right click to open the context card, and launch the respective Github or Bitbucket web folio in your default browser. This plugin is amazing if you need to figure out who'southward worked on a file previously, or check the Git blame.
View GitHubinator plugin
7. GitOpenChangedFiles
GitOpenChangedFiles isn't coy well-nigh what information technology does; its proper noun says it all. Simply install and run cmd + option + o on a Mac, or ctrl + shift + o on Windows, and lookout this plugin open the respective files for you in Sublime Text, with all the files you lot've changed in your co-operative.
View GitOpenChangedFiles plugin
You might also like: The Essential List of Resources for Shopify Theme Development.
Linters and syntax highlighting
While working on teams, consistency is imperative. Linters and syntax highlighting aid provide that consistency and set best practices.
8. SublimeLinter
SublimeLinter is the most popular linter available on Sublime, as it currently sits in the pinnacle 25 downloads on Bundle Manager. Once installed, yous'll also want to install plugins for the diverse languages that you lot might code in.
To do this, just open up Package Control to install plugins with the same proper noun. Simply blazon SublimeLinter-<lintername>, for example SublimeLinter-jshint. Yous must install linter plugins with SublimeLinter—the version for Sublime Text 3 doesn't come up with them pre-installed.
View SublimeLinter plugin
nine. ChangeQuotes
ChangeQuotes "converts unmarried and double quotes, and and re-escapes quotes within the cord," according to their docs. One time installed, whenever you want to change quotes, make sure your cursor is inside the quoted text. Open the Command Palette to run ChangeQuotes—there is no demand to select the text to alter quotes.
View ChangeQuotes plugin
There are a ton of plugins for syntax highlighting. These are the two major plugins we use at Shopify, that autumn outside the existing syntax highlighting that ships with Sublime Text.
10. SASS
The Sass plugin adds syntax highlighting too as tab/code completion, for Sass and SCSS files.
View Sass plugin
11. Babel
Babel adds syntax definitions for ES6 JavaScript, with React JSX extensions.
View Babel plugin
12. Siteleaf's Liquid Syntax
Siteleaf's Liquid Syntax adds liquid syntax highlighting for Liquid as well as some handy snippets.
View Siteleaf's Liquid Syntax
Editor enhancements
13. SideBarEnhancements
SideBarEnhancements provides enhancements to the operations on Sidebar of Files and Folders for Sublime Text. Peculiarly, it sets delete options equally a "Move to trash," includes an "Open up with…", gives you lot the ability to movement files, and more.
View SideBar Enhancements plugin
14. Maybs Quit
Maybs Quit enables a quick panel to ostend quitting Sublime Text. Both cmd/ctrl+w and cmd/ctrl+q are also close to one another on the keyboard, and tin can lead to mistakes. Avoid quitting Sublime Text unintentionally when yous're only trying to shut a file, by using Maybs Quit!
View Maybs Quit plugin
15. AutoFileName
AutoFileName follows through on its proper name: it completes filenames automatically. It triggers a dropdown with file names relative to your existing file and subsequent path as you type.
View AutoFileName plugin
You lot might also like:How to Add together CSS Text Animation to Custom Themes.
sixteen. View In Browser
View In Browser helps you to launch your projects into your default browser with a unproblematic shortcut, ctrl+alt+v. Information technology also enables shortcuts for various other browsers installed on your computer, such as Chrome, Firefox, Internet Explorer and more.
Checkout View In Browser plugin
17. GhostText
GhostText is probably one of the coolest plugins I've seen in awhile. It allows you to link your Sublime Text editor (with all your plugins 🎉) to text areas in a browser. For example, you could work on a CodePen, but practice all the editing in your main text editor. You just demand to install the plugin and browser extension. Simply highlight the text surface area you want to link, and click the browser extension: then magic happens. ✨🐇🎩✨
View GhostText plugin
eighteen. BracketHighlighter
BracketHighlighter does exactly what it says: information technology highlights the brackets in your code. Information technology matches a multifariousness of brackets, such every bit [], (), {}, "", '', #!xml <tag></tag>, as well every bit custom brackets if you lot add them.
View BracketHighlighter plugin
xix. Gutter Color
Gutter Color is a swell plugin that displays a colored icon for all lines containing a color. What'southward dainty near this plugin, compared to others, is that the colour highlighting is a bit less intrusive, as information technology only appears in the gutter (instead of behind a highlighted word). It will delight the designer in you.
20. ColorPicker
ColorPicker enables a color picker dialog and allows users to insert or change a selected color. To open the colour picker, simply type cmd+shift+c on a Mac, or ctrl+shift+c on Windows or Linux. By default the hexcode inserted is uppercase, just you can change it to employ lowercase messages by going to preferences and and then bundle settings.
View ColorPicker plugin
21. A File Icon
A File Icon is great for hands scanning what files yous have in your projection. Information technology simply adds pretty and customizable icons to supported files in your project sidebar. It'southward supported by Material and Indigestible Themes for customized thematic icons.
View A File Icon plugin
Themes and fun
Since you'll nigh likely spend lot of fourth dimension using your text editor, it's overnice to arrive as visually pleasing equally possible. It'southward of import to know that themes are dissimilar from color schemes. A theme is the look of your editor itself, such as the sidebar UI, tabs, modal windows, etc. A color scheme is the background and syntax highlight colors of the primary editing area.
Resource to Grow Your Skills
Get your free copy of the Technology Product CSV sent directly to your inbox.
By inbound your e-mail - we'll also send you lot marketing emails related to Shopify. You can unsubscribe anytime.
22. Colour Sublime
Color Sublime is a plugin that enables the installation of colour schemes to your editor. These color schemes modify the syntax highlighting. What'due south bully about this is you tin cycle through a list of schemes, rather than having to install each one and see if you like it.
View Colour Sublime plugin
23. DA UI
DA UI is a set of beautiful, make clean interface and syntax themes for Sublime Text 3. The DA UI plugin likewise has custom icon support with A File Icon.
View DA UI plugin
24. Theme - Spacegray
Theme - Spacegray is a set up of custom UI themes for Sublime Text ii and 3 which are very minimal and clean. Spacegray likewise comes with Base16 color schemes.
25. Emoji
Because...why not. The Emoji plugin allows you to insert emoji via the Command Palette. Amazing!
View Emoji plugin
Y'all might also like: How to Arts and crafts the Best 404 Pages for your Clients.
Plugins for all! 🎉
There are a ton of plugins you tin install to customize your evolution feel. Hopefully, this article shows you a few new ones that y'all'll enjoy. Practise what makes sense for you lot and your job, and whatsoever will brand you more efficient. Happy coding!
Grow your business with the Shopify Partner Plan
Whether you offer marketing, customization, or web pattern and development services, the Shopify Partner Plan will gear up you lot up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.
Sign up
DOWNLOAD HERE
Posted by: yazziespir1982.blogspot.com
Post a Comment