When I started writing this weekly blog on dev.to, like 3 months ago, I didn't know what tools to use, so I just turned to the one I use and like the most these days: VSCode.
Since then, I've been customizing my blogging workspace to include all the tools I need to write my articles fast and comfortably in VSCode and then copy-paste them to DEV.
In this article, I'll show you the extensions and tools I use to write DEV articles in VSCode:
1. Markdown extension
I use an extension called Markdown all in one that adds markdown support to VSCode.
One of its most powerful features is auto-preview, which allows us to write markdown and preview it on the side:
This extension includes other cool features, for example, you can automatically create a table of contents, and also use shortcuts like Ctrl + B to toggle bold text.
2. Spell checker extension
To keep my writing free of spelling mistakes I installed Code spell checker. This extension catches common spelling errors and gives you suggestions to fix them by pressing Ctrl + . over the misspelled word.
Pro tip: This extension is also useful to avoid spelling mistakes when you're coding at the speed of light 😂
3. Emoji extension 😉
I like to add emojis to my articles every now and then, and this extension is great for that: :emojisense:.
Just write : and start writing the name of the emoji and the extension will display emoji options like so:
4. Git
I sometimes write my articles from different devices. Maybe I start working on my laptop and then finish the article on my desktop PC. That's why I use git to keep my work synced on all my devices within a Blog repo that contains all of my articles and even cover images and other resources.
5. VSCode workspaces
Extensions can be enabled for a specific workspace if you don't need them all the time. I created a Blogging workspace in VSCode to setup extensions that I will only use on my articles. For example, I don't normally use emojis while coding, so I disabled that extension for every other workspace:
Thoughts? 💬
Was this post useful? What tools do you use for your DEV articles?
Top comments (24)
Command+Control+Spacebarfor mac, orcontrol+dotfor ubuntu 18+Overall I think I'll stick with dev.to but I like the idea :)
Thank you!
I actually do use Grammarly once I copy everything to the browser. I tried an unofficial extension on VSCode but didn't work well for me.
And yes, at first I felt like using git would be too much, but since I'm using VSCode for everything else its just convenient.
Shameless plug here but I started working on this and I think it's a pretty appropriate continuation
Version and automate your dev.to publishing with GitHub Actions
Rémy 🤖 ・ Oct 1 '19 ・ 2 min read
That's awesome, Rémy! I wanted to build a CD pipeline in Gitlab to do exactly that, but haven't had the time yet. Maybe I'll just try your solution with GitHub Actions.
Fantastic! Tell me what you think, it's still a bit rough for now
Great article, what do you use as your publishing platform? Gatsbyjs, Hugo?
Hahaha thanks, should of used a plugin to check this comment
You're
Some great tips here. Thanks.
I’ve been writing the content in google docs then copying and pasting into vs code and then adding code snippets and converting to markdown. This seems a much more efficient workflow!
Hey Paula thank you for the tips! Are there any tools you tend to refer to in your article writing process to speed up the process? Such as tools for code snippets or screenshots? Thanks!
There is this extension called Code Snap for VSCode that takes beautiful screenshot of your code.
I don't normally take code screenshots for my articles, I prefer using the markdown option that looks great on DEV and also allows other people to copy the code examples. Here are some examples by markdownguide.org.
I know my cover image looks like I took a screenshot in VSCode, but it's actually designed using Adobe Illustrator 😂, because I couldn't find a way to use extensions like Code Snap to take a screenshot so big :/ For normal sized screenshots works fine though.
If you're on windows I highly recommend using Sharex for screen captures. Super convenient and all sorts of features.
This workflow could be even more powerful if it could be possible to post to DEV via VSCode itself.
🤔🤘🏽
Absolutely! I wanted to use Gitlab/Azure pipelines to achieve that, but I haven't had the time to try yet. @xowap did it with GitHub actions, in case you want to check that out.
And there's also an unofficial DEV Community extension for vscode that allows you to publish articles, but I haven't try that either.
Great tips! Looks like it's time to modernize my process 😅
Thank you, Luka!
I've been an "inliner" until reading your post. VSCode from now on!
Whoa that's super cool...I must say I love ur tips...am getting them right away
Glad I could help!
I actually once looked to see if I could do this. Thanks !
Happy to help!