Writing Mode in VS Code

I’m a big fan of writing. I’m also a big fan of using my code editor and Markdown for that!

Code editors are usually packed with a bunch of useful features, such as multi-selection, syntax highlighting, a file tree easy to operate, and sometimes even Markdown support – which I need for writing my articles, notes, to-do lists, and absolutely everything I can write using Markdown. I love having a consistent workflow and that’s crucial to me, so why not?

After configuring my editor of choice, VS Code, to get rid of the coding mode clutter (and also after an important update on its zen mode ❤️), I’ve finally achieved a totally distraction-free writing experience!

Setting up the “Writing Mode”

1. User Settings

There are some important details to achieve total focus on writing. No line numbers, word wrap enabled, comfortable line height, no rulers, are some of them.

Since I only write in Markdown, I only set up those settings (and other tweaks) specifically for that language.

// github.com/diessica/dotfiles/blob/master/vscode/settings.json
{
  ....

  "[markdown]": {
    // force centering in zen mode
    "zenMode.centerLayout": true,
    // use the beautiful duospace font when available
    "editor.fontFamily": "iA Writer Duospace, monospace",
    // enable word wrap, since horizontal scroll while writing isn't human
    "editor.wordWrap": true,
    // i don't need line numbers, i'm not coding
    "editor.lineNumbers": "off",
    // light by default, but can be easily toggled to dark
    "workbench.colorTheme": "Default Light+",
    // i don't need rules, i'm not coding
    "editor.rulers": [],
    // larger text, to improve focus on writing
    "editor.fontSize": 14,
    // more comfortable line height
    "editor.lineHeight": 25,
    // disable editor suggestions based on previous words
    "editor.quickSuggestions": false,
  },

  ...
}

You can learn more about this file by checking the docs on "User and Workspace Settings".

Now, toggle zen mode in VS Code (see Keybindings, or View > Toggle Zen Mode) and check if that fits you!

2. Theme

Honestly, I think the default themes provided by VS Code do a great job. I use Dark+ as the dark theme; for light themes, either Quiet Light or Solarized Light.

If you don't like them, feel free to pick anything else, since most themes provide sufficient Markdown support anyway. Just don't procrastinate – a good theme won't make you a better writer.

3. Font

My font of choice for writing is the Duospace, designed by the people behind the text editor iaWriter. It’s a free and beautiful font shaped for the perfect writing experience.

4. Extensions

• Spell Checker catches your spelling errors.
• Word Count helps you to not to be too wordy.
• Markdown All in One gives you some extra power to play with Markdown files.
• Paste Image lets you directly paste images from clipboard to files.

Extra tips

• VS Code’s Markdown Preview is your friend – use it when you’re done with writing!
• Configure the spell checker for your language, there are dictionary extensions for that available in the marketplace. I also have the Brazilian Portuguese package installed, for instance.
• Like extensions? Keep exploring! The extension alex, for instance, catches insensitive, inconsiderate writing in texts.
• Learn the Markdown keybindings provided by the All in One extension for a better workflow.

Happy writing! 🌟