I found auto-save when I decided I was going to write my resume in HTML and never use MS Word again. Hopefully.

Props to James Zhang for writing this plugin. When you enable it, it automatically saves the currently open file after each edit. Calls to save are debounced by 1 second to avoid overworking the Sublime Text API.

One annoying side effect of saving is that it closes the autocomplete window if it’s open. Since you only have a second between when you stop typing and save is called, it renders autocomplete sort of useless. So I added an option to the plugin that avoids calling save. Instead, it grabs the text in the open file and writes it to another file in the same directory, with .autosave appended before the file extension.

For editing HTML, here’s the workflow I use:

  • Install auto-save via Package Control.
  • Open <file>.html in ST, and from the Command Palette run Toggle AutoSave Backup: current file only.
  • Install gulp-server-livereload or something similar via npm, and have it watch your current directory.
  • Fire up your browser and head to wherever gulp-server-livereload is serving your files. Open <file>.autosave.html, in the browser, go back to ST and edit away.

You’re editing HTML and seeing how it looks in your browser, with style sheets and all, in real time. Magic! Having two monitors, one for ST and one for your browser, makes this even sweeter.

To get a live preview of Markdown, there are a few extra steps:

  • Install MarkdownEditing, or something similar, via Package Control.
  • Install markdown-html.
  • Use it in watch mode: markdown-html -w <file>.autosave.md -o <file>.html. As you edit <file>.md, auto-save continually writes it to <file>.autosave.md, and markdown-html continually compiles this to <file>.html.
  • Fire up your browser and head to wherever gulp-server-livereload is serving your files. Open <file>.html, go back to ST and edit away.

markdown-html is a beauty. The documentation is an ode to simplicity, and the plugin even supports injecting custom CSS and JS into the HTML output. Although it’s harder to set up, this workflow is superior to using a Markdown editor like Byword or Macdown. You get to edit text with a real text editor, and your “preview” is anything but — it’s literally the browser’s rendering of the document!

Setup aside, for serious editing of static HTML docs this is a no-brainer, and I think that’s true for Markdown as well. Let me know what you think…