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. 😉

Administrative
General
Javascript
HTML & CSS
Linter
Other
Settings

Plugins

🗃 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.
SideBarEnhacements: Adds features such as renaming to the sidebar.
A File Icon: Add icons to the files in the sidebar.
TodoReview: Scans files for TODOs and more.
FindKeyConflicts: Key conflicts are inevitably when you use a lot of plugins.
Editor Config: Maintain consistent coding styles between different editors.
Sync Settings: Keep settings in sync via Github-Gist.

⌨️ General

Useful for all languages.

All Complete: 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 changes in the gutter (left to the line numbers).
Git: Includes some git commands into Sublime.
GitSavvy: Full git and GitHub integration.
Gitignore: Fetches templates for the .gitignore provided by Github.
DashDoc: Open current selection in Dash on a hot key.
Local History: Keep a local history of your files. Even though I use git on almost every project, I still don't commit every change. It gives a better feeling to have the possibility to go back to every change.


☕️ Javascript

Tern for Sublime: Static Javascript code analyzer with auto-completion, function argument hints, 'go to definition' and more. The installation and configuration can be a little bit tricky but it's worth it. Choose Tern over SublimeCodeIntel (unmaintained) and JavaScript Completions (buggy).
JavaScript & NodeJS Snippets
Console Wrap: Fast way to log to console.
Babel: Syntax definitions for ES6 JavaScript with React JSX extensions.
TypeScript
Elm Language Support

🎨 HTML & CSS

Sass: Sass is a preprocessor extending CSS and this plugins adds the language support.
SassSolutions: Auto-complete variables/mixins from your 'settings.scss' file.
CSS3: Replaces the built-in CSS support with a more up-to-date information. Includes cssnext support. Follow the instructions to reduce misbehaviour with other plugins.
Emmet: Allows you to write HTML very fast. You have to learn their way though.
Color Highlighter

🔥 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.

SublimeLinter
SublimeLinter-HTML-tidy
SublimeLinter-CSSlint
SublimeLinter-contrib-SCSS-lint
SublimeLinter-contrib-ESLint
SublimeLinter-flow
SublimeLinter-contrib-elm-make
SublimeLinter-JSON

👥 Other

Markdown Preview
Advanced CSV

Settings
{
    // Disallows approving auto-complete suggestions with 'enter' to prevent ambiguous situations.
    // You have to get used to it but also Sublime strongly recommends it.
    "auto_complete_commit_on_tab": true,
    "auto_complete_delay": 0,
    // Allow auto-complete suggestion within snippets.
    "auto_complete_with_fields": true,
    "color_scheme": "Packages/User/SublimeLinter/Solarized (Light) (SL).tmTheme",
    "create_window_at_startup": false,
    "draw_white_space": "all",
    "ensure_newline_at_eof_on_save": true,
    "font_face": "Input Sans Narrow",
    "font_size": 15,
    "highlight_line": true,
    "ignored_packages":
    [
        "CSS",
        "Vintage"
    ],
    // Highlights the indentation of the current scope.
    "indent_guide_options":
    [
        "draw_normal",
        "draw_active"
    ],
    "indent_to_bracket": true,
    "rulers":
    [
        80
    ],
    "tab_size": 2,
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "word_wrap": true
}



This work is licensed under a Creative Commons Attribution 4.0 International License.

jfilter / Sublime-Text-Plugins-for-Frontend-Web-Development

Sublime Text 3 Plugins for Frontend Web Development

Table of Contents

Plugins

🗃 Administrative

⌨️ General

☕️ Javascript

🎨 HTML & CSS

🔥 Linter

👥 Other

Settings