DEV Community

loading...
Cover image for Writing DEV articles in VSCode

Writing DEV articles in VSCode

paulasantamaria profile image Paula Santamaría ・2 min read

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:

VSCode screenshot with the editor split in two. Markdown code on the left and preview on the right

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:

Screenshot of VSCode "enable extension" menu with the "Enable (Workspace)" option selected)

Thoughts? 💬

Was this post useful? What tools do you use for your DEV articles?

Discussion (24)

Collapse
almenon profile image
Almenon
  1. Pretty cool!
  2. If you have chrome you can also turn on enhanced spell check, or you can use grammarly.
  3. In windows you can use windows+period to activate the emoji keyboard, or Command+Control+Spacebar for mac, or control+dot for ubuntu 18+
  4. Seems like a bit of a heavyweight solution but I could definitely see that being useful
  5. Yep, useful feature for cutting down on extension bloat. 👍

Overall I think I'll stick with dev.to but I like the idea :)

Collapse
paulasantamaria profile image
Paula Santamaría Author

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.

Collapse
xowap profile image
Rémy 🤖

Shameless plug here but I started working on this and I think it's a pretty appropriate continuation

Collapse
paulasantamaria profile image
Paula Santamaría Author

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.

Collapse
xowap profile image
Rémy 🤖

Fantastic! Tell me what you think, it's still a bit rough for now

Collapse
aortizoj15 profile image
Alexis Ortiz Ojeda

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!

Collapse
ajmalhassan profile image
Ajmal Hassan

There is this extension called Code Snap for VSCode that takes beautiful screenshot of your code.

Collapse
paulasantamaria profile image
Paula Santamaría Author

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.

Collapse
almenon profile image
Almenon

If you're on windows I highly recommend using Sharex for screen captures. Super convenient and all sorts of features.

Collapse
mwolfaardt profile image
mwolfaardt • Edited

Great article, what do you use as your publishing platform? Gatsbyjs, Hugo?

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
mwolfaardt profile image
mwolfaardt

Hahaha thanks, should of used a plugin to check this comment

Thread Thread
Sloan, the sloth mascot
Comment deleted
ryansully profile image
Collapse
chrisrhymes profile image
C.S. Rhymes

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!

Collapse
cescquintero profile image
Francisco Quintero 🇨🇴

This workflow could be even more powerful if it could be possible to post to DEV via VSCode itself.

🤔🤘🏽

Collapse
paulasantamaria profile image
Paula Santamaría Author

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.

Collapse
benjamincodez profile image
benjamincodes

Whoa that's super cool...I must say I love ur tips...am getting them right away

Collapse
paulasantamaria profile image
Paula Santamaría Author

Glad I could help!

Collapse
ronsoak profile image
ronsoak

I actually once looked to see if I could do this. Thanks !

Collapse
paulasantamaria profile image
Collapse
lvidakovic profile image
Luka Vidaković

Great tips! Looks like it's time to modernize my process 😅

Collapse
paulasantamaria profile image
Collapse
wrldwzrd89 profile image
Eric Ahnell

I've been an "inliner" until reading your post. VSCode from now on!

Forem Open with the Forem app