Web Development Workflow Using Sublime Text

A while back I wrote a post on my workflow with Notepad++. It was back when I was exploring different text editors and comparing them. But I have since changed my workflow. Now I make sure there’s a local copy of the work, and sync to the server on save. That way I can have a backup at all times. Never know when some accident may occur and all the files are wiped away on the server. I also backup to a Bitbucket repository. I’ve come to love using Sublime Text, so I thought I’d share about it here.

Note: I am a PC user, so where Ctrl is, use Cmd if you use a Mac. Ignore the bit about Git Bash since you will have an actual Unix terminal. For PC users, the good news is, Windows 10 is going to come out with a Linux Bash built in, though it is still in development. You can experience a preview of this Linux Bash through the fast track of receiving updates, though it’s not recommended if you don’t have another computer.

Packages I use

Package Control for easy managing and adding new packages

Ctrl + Shift + P to have it pop up.

Type “install” for a list of packages to install.

Type “Package” to get the full list of package control functions.

• This should be the first package anyone gets when using Sublime Text.

There’s a website for Package Control that lists all the packages and details about them.

ProjectManager for easy management of projects

Ctrl + Alt + P for switching between projects. This is helpful when you have multiple projects.

EncodingHelper for converting other language encodings to UTF-8

This is useful for localized files when migrating from the old Shift-JS, for example, to UTF-8.

SFTP for syncing files from local to remote and vs versa

This makes viewing changes to files quicker versus having to use an SFTP client such as Filezilla. There’s also the option for renaming or deleting files locally and remotely at the same time. Each project will need a sftp-config.json file though, with the SFTP credentials.

Ctrl + Shift + P and then type SFTP to get a list of SFTP commands.

Right-click on a sidebar item to get a list of what you can do with SFTP.

SideBarGit for quick add, commit, and push to repository

For quick backups, there is one command for adding, committing, and pushing all at the same time. There are other options such as just adding, branching, etc. That way you don’t need to use the command line, and do more in one window.

Tidying code and debugging code related packages

HTML-CSS-JS Prettify for tidying the code quickly, especially when cleaning old web pages

SublimeLinter for debugging code

SublimeLinter-php for debugging PHP, an extension of SublimeLinter

SublimeLinter-ruby for debugging Ruby, an extension of SublimeLinter

Look and feel related packages

Theme – LP light theme

Frontend Light Color Scheme for color scheme

Git Bash

Although there are a lot that can be done without the command line, for some work, the command line is needed. For that, I chose to use Git Bash because it’s a light-weight unix terminal that allows you to ssh to the server as well as secure copy (scp) between local and remote content, and other basic bash commands. I prefer this to MSYS2 and Cygwin because it’s faster to load, and faster to use in general, with minimal lagging. When I want to rsync, I use MSYS2 since it’s installed via Pacman, the package manager for MSYS2. I could not figure out how to get that in Git Bash.

What’s your workflow?

Please feel free to share about your development workflow. I know I had posted previously, but it’s nice to hear from people again.