Sublime Text Laravel Development Setup Guide

Posted Dec 18th, 2017
« Back to All Posts

Setting up your tools properly as a web developer can drastically improve your productivity. This article will show you how to setup sublime text for Laravel development and outline a few packages and settings that could make a big impact on your workflow. Although your final setup may differ from mine, this will at least give you an idea of how I go about setting up my development machines.

Step One: Install Sublime

First, install sublime text from here. This one should be a no-brainer, but I thought I'd mention it in case you hadn't done it yet!

Step Two: Install Package Control

Our second step is to install package control. You should be able to hit Ctrl + Shift + P (Cmd on mac) and find the Install Package Control command. If you for some reason don't see that command in the list, you can alternatively install package control following the directions found here. This involves opening up the sublime console (not your normal terminal!) and pasting in the command found on their install page. To open the console, go to View > Show Console in sublime text.

Step Three: Install Initial Packages

Now that we've got sublime and package control installed, we can use it to install all sorts of packages to improve the editor. To install a package, type Ctrl + Shift + P (Cmd on mac) and find the Package Control: Install Package command (start typing "Install Package" and you'll find it). From there, you can find and install tons of different packages from the package control registry. Your personal package preferences may vary (I'd encourage you to explore!), but I'll list the rough set that I use below:

* AdvancedNewFile
* Auto Semi-Colon
* BracketHighlighter
* ColorHighlighter
* DocBlockr
* DotENV
* Emmet
* GitGutter
* Githubinator
* LESS
* Material Theme _(this is just the theme I use)_
* Laravel Blade Highlighter
* Laravel Blade Spacer
* Laravel Docs
* Sass
* SidebarEnhancements
* SublimeLinter _(language definitions are separate!)_
* SublimeLinter-php
* Vue Syntax Highlight

Once you've finished installing your first set of plugins, it's usually a good idea to restart sublime text before we move on to configuring things.

Step Four: Configuration

Now that we've installed everything, it's time to configure some basic editor and package settings. You can hit Ctrl + , (Cmd on mac) to see the sublime preferences. All of the defaults are on the left, and your user-specific preferences are on the right. Just like the packages you install, your individual preferences file will likely differ from mine, that's totally okay! Here are the most important contents of my sublime user settings file. Note that the first step for me is always to remove Vintage from the ignored_packages entry in the settings file.

Preferences.sublime-settings

"ignored_packages": [],
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"font_options": ["gray_antialias", "subpixel_antialias"],
"indent_guide_options": ["draw_normal", "draw_active"], // Highlight active indent
"line_padding_bottom": 6,
"line_padding_top": 6,
"overlay_scroll_bars": "enabled",
"highlight_line": true,
"rulers": [80],
"translate_tabs_to_spaces": true,

Key Bindings Sublime Text > Preferences > Key Bindings
If you're like me and you like to enable Vintage (vim) mode, mapping jj to easily get from edit mode back to command mode is a must!

[
    { "keys": ["j", "j"], "command": "exit_insert_mode",
            "context":
            [
                { "key": "setting.command_mode", "operand": false },
                { "key": "setting.is_widget", "operand": false }
            ]
       }
]

This should give you a general idea of how I configure Sublime Text on my development machines. As always, if you have any questions, please do leave a comment below!

Comments? Suggestions?