Set up Sublime Text for Laravel Development

Warning!

This was written over two years ago, so some information might be outdated. Frameworks and best practices change. The web moves fast! You may need to adjust a few things if you follow this article word for word.

Interested in using Sublime Text for Laravel Development? Here's how to set it up from scratch like a Pro!

If you're still using Sublime Text, I would highly recommend that you check out Visual Studio Code instead. It outclasses sublime text in nearly every way, has a massive community and is open source!

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:

Copied!

 1* AdvancedNewFile
 2* Auto Semi-Colon
 3* BracketHighlighter
 4* ColorHighlighter
 5* DocBlockr
 6* DotENV
 7* Emmet
 8* GitGutter
 9* Githubinator
10* LESS
11* Material Theme _(this is just the theme I use)_
12* Laravel Blade Highlighter
13* Laravel Blade Spacer
14* Laravel Docs
15* Sass
16* SidebarEnhancements
17* SublimeLinter _(language definitions are separate!)_
18* SublimeLinter-php
19* Vue Syntax Highlight

* 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 1* AdvancedNewFile
 2* Auto Semi-Colon
 3* BracketHighlighter
 4* ColorHighlighter
 5* DocBlockr
 6* DotENV
 7* Emmet
 8* GitGutter
 9* Githubinator
10* LESS
11* Material Theme _(this is just the theme I use)_
12* Laravel Blade Highlighter
13* Laravel Blade Spacer
14* Laravel Docs
15* Sass
16* SidebarEnhancements
17* SublimeLinter _(language definitions are separate!)_
18* SublimeLinter-php
19* Vue Syntax Highlight

* 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

Copied!

 1"ignored_packages": [],
 2"always_show_minimap_viewport": true,
 3"bold_folder_labels": true,
 4"font_options": ["gray_antialias", "subpixel_antialias"],
 5"indent_guide_options": ["draw_normal", "draw_active"], // Highlight active indent
 6"line_padding_bottom": 6,
 7"line_padding_top": 6,
 8"overlay_scroll_bars": "enabled",
 9"highlight_line": true,
10"rulers": [80],
11"translate_tabs_to_spaces": true,

"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, 1"ignored_packages": [],
 2"always_show_minimap_viewport": true,
 3"bold_folder_labels": true,
 4"font_options": ["gray_antialias", "subpixel_antialias"],
 5"indent_guide_options": ["draw_normal", "draw_active"], // Highlight active indent
 6"line_padding_bottom": 6,
 7"line_padding_top": 6,
 8"overlay_scroll_bars": "enabled",
 9"highlight_line": true,
10"rulers": [80],
11"translate_tabs_to_spaces": true,

"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!

Copied!

 1[
 2  {
 3    "keys": ["j", "j"],
 4    "command": "exit_insert_mode",
 5    "context": [
 6      { "key": "setting.command_mode", "operand": false },
 7      { "key": "setting.is_widget", "operand": false }
 8    ]
 9  }
10]

[
  {
    "keys": ["j", "j"],
    "command": "exit_insert_mode",
    "context": [
      { "key": "setting.command_mode", "operand": false },
      { "key": "setting.is_widget", "operand": false }
    ]
  }
] 1[
 2  {
 3    "keys": ["j", "j"],
 4    "command": "exit_insert_mode",
 5    "context": [
 6      { "key": "setting.command_mode", "operand": false },
 7      { "key": "setting.is_widget", "operand": false }
 8    ]
 9  }
10]

[
  {
    "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, you can find me on twitter

Enjoy this article? Follow me on Twitter for more tips, articles and links.

😢 Awww, nobody has liked or mentioned this on Twitter yet.

Older

« Shortcut to Open Laravel Docs from Your Editor

Newer

Setting Up a Mac for Web Development »

Set up Sublime Text for Laravel Development

Step One: Install Sublime

Step Two: Install Package Control

Step Three: Install Initial Packages

Step Four: Configuration

Want Updates?