Sublime Text 3 Plugins for Frontend Web Development
Sublime is great and for many still the best text editor available. But out of the box, it lacks some features that modern competitors have already built-in. Plugins help to stay ahead but it's a hassle to keep up with all of them. In order to help you, I compiled a list of plugins I use for my daily frontend web development.
If you know plugins that should be on this list, just open an issue. 😉
This list was shared by (among others):
Table of Contents
- HTML & CSS
🗃 i. Administrative
These plugins are kind of 'meta' because they are not concerned with writing code.
Package Control: This package enables you to install other packages. Since build 3124, you can install it within Sublime via Tools ➡ Install Package Control.
AdvancedNewFile: A better way to create new files. For instance, it automatically creates a folder when needed.
SideBarEnhancements: Adds features such as renaming to the sidebar.
A File Icon: Add icons to the files in the sidebar.
ProjectManager: Organizing project files by putting them in a central location.
TodoReview: Scans files for
TODOs and more.
FindKeyConflicts: Key conflicts are inevitable when you use a lot of plugins.
Editor Config: Maintain consistent coding styles between different editors.
Sync Settings: Keep Sublime settings in sync via Github-Gist.
Package Syncing: Keep all you settings, packages etc in sync via Dropbox and co
SFTP: Transfer files to a server via FTPS and SFTP. The plugin is like Sublime Nagware. You can use it for free but get a reminder to buy a licence.
TerminalView: A Linux/macOS plugin for Sublime Text 3 that allows for terminals inside editor views.
⌨️ ii. General
Useful for all languages.
All Autocomplete: Indexes all open files for auto-completion.
BracketHighlighter: Improves the already built-in highlighting.
Terminal: Open Terminal with current working directory set to the directory of the open file on a hot key.
AlignTab: Align your code by
| or your own RegEx.
GitGutter: Displays modified lines in the gutter (left to the line numbers).
Git: Includes some git commands.
GitSavvy: Full git and GitHub integration.
Gitignore: Fetches templates for the .gitignore provided by Github.
Local History: Keep a local history of your files.
DashDoc: Open current selection in Dash on a hot key.
Text Pastry: Extend the power of multiple selections with features such as incremental numbers and date ranges.
🎨 iv. HTML & CSS
Sass: Sass is a preprocessor extending CSS and this plugins adds the language support.
SassSolutions: Auto-complete for variables and mixins from your 'settings.scss' file.
CSS3: Replaces the built-in CSS support with a more up-to-date one. Includes cssnext support. Follow the instructions to make it work properly.
Emmet: Allows you to write HTML very fast. You have to learn their way though.
- Color Highlighter
🔥 v. Linter
Linters help you to spot mistakes in your code early on. In order to make them work properly, check the instructions in the packages. For some, you have to install additional tools.
👥 vi. Other
The built-in themes do not support recent syntax such as ES2015. In the following, I list some I have test and do it.
// Disallows approving auto-complete suggestions with 'enter' to prevent ambiguous situations.
// You have to get used to it but also Sublime strongly recommends it.
// Allow auto-complete suggestion within snippets.
"color_scheme": "Packages/Solarized Color Scheme/Solarized (light).tmTheme",
"font_face": "Input Sans Narrow",
// Highlights the indentation of the current scope.
// NB: the following could lead to a lot of (unnecessary) changes in other's peoples files
This work is licensed under a Creative Commons Attribution 4.0 International License.