Switch branches/tags
Nothing to show
Latest commit f154447 Sep 22, 2017 @jfilter add two new plugins
Permalink
Failed to load latest commit information.
README.md add two new plugins Sep 22, 2017
preview.gif change preview gif May 12, 2017

README.md

Previews Sublime in use with some of the used plugins.

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

  1. Plugins
    1. Administrative
    2. General
    3. Javascript
    4. HTML & CSS
    5. Linter
    6. Other
  2. Themes
  3. Settings

1. Plugins

šŸ—ƒ 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.
  • SideBarEnhacements: 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.

āŒØļø 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.

ā˜•ļø iii. Javascript

šŸŽØ 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

2. Themes

The built-in themes do not support recent syntax such as ES2015. In the following, I list some I have test and do it.

3. 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/Solarized Color Scheme/Solarized (light).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,
    // NB: the following could lead to a lot of (unnecessary) changes in other's peoples files
    "trim_trailing_white_space_on_save": true,
    "word_wrap": true
}

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