Write Posts in DEV Community using Visual Studio Code

DEV Community is one of the most famous platform for developers to share great ideas. Thanks to DEV API, I made an extension to make it possible to write posts using Visual Studio Code.

In this article, you will learn how to use DEV Community extension for Visual Studio Code to write posts in DEV Community using Visual Studio Code.

Prerequisites

To get started, you need install Visual Studio Code. For better user experience, you can also install one or more markdown extensions for Visual Studio Code.

Install the DEV Community extension

1. In Visual Studio Code, open Extensions and search for dev.to.

2. Click Install to install the extension.

3. Restart Visual Studio Code and select DEV icon on the activity bar.
   

Sign In DEV Community Account

To write posts you need to sign in your DEV Community account first.

1. Click Create API key in DEV COMMUNITY: POSTS view to open DEV Community account dashboard in browser. Input vscode in description inputbox then click Generate API key button:
   

2. Copy the generated API key:
   

3. Back to Visual Studio Code, and click Sign in, paste API key:
   

4. You can see all your posts after signed in:
   

Edit or Write A New Post

1. To edit a post, click its title in post list to open in Visual Studio Code:
   

2. Press Ctrl + S to save your changes.
   

3. Click the Plus icon to create a new post:
   

Updated on 2019/10/23

You can use Code Spell Checker for spell check. To make Code Spell Checker work with DEV Community extension, you need add devto to Code Spell Checker allowed schemas:

1. Click File - Preferences - Settings to open Visual Studio Code settings page.
2. Search Allowed Schemas, click Add Item button to add devto into the list:

Preview and View Online

Visual Studio Code has built-in support for markdown preview, you can press Ctrl + K then press V (Ctrl + K V) to preview locally.

To published post, you can also right click its title in the post list to select View online to view the post in browser:

Publish A Post

To publish a post you can do one of the followings:

1. Change publish value to true in post yaml properties at top of the content, and save the post.

2. Right click the post in post list and select Publish post:
   

Insert Images

Like any markdown, you can insert online images like following:

![description](image-url)

Updated on 2019/10/8

From v0.0.11, the extension uploads images to Imgur by default. If you would like to upload to GitHub instead, press Ctrl + Shift + P and execute DEV Community: Update GitHub personal access token to configure GitHub token, and the extension will upload images to your GitHub repository then.

The DEV Community extension can help you to quickly upload images to GitHub and insert the code to your current post.

1. Open browser and go to https://github.com/settings/tokens/new.

2. Input vscode in note inputbox, check repo scope and click Generate token button:
   

3. Copy the generated token.

4. Click Upload images at bottom left corner of Visual Studio Code:
   

   From v0.0.11, you need set GitHub token by executing DEV Community: Update GitHub personal access token command. Or the image will be uploaded to Imgur. See step 7.

5. Select the image you would like to upload, and the extension starts to upload the image to GitHub:
   

6. After upload complete, the code will insert to your current post automatically:
   

7. To change or remove GitHub token, press Ctrl + Shift + P, and execute DEV Community: Update GitHub personal access token and DEV Community: Remove GitHub personal access token:
   

Feedback and Contribute

DEV Community extension for Visual Studio Code is published under MIT license. You can find its source code from https://github.com/Sneezry/vscode-devto. This extension is still in preview, and its functionality may be limited. If you have any feedback, welcome to open a ticket at https://github.com/Sneezry/vscode-devto/issues (GitHub account required).

Comments

[Amanda Iaria]

This is cool. Now if we can get Grammarly in VScode ... unless it is and I just didn't know.

[Josh Corbett]

I use a plugin called Code Spell Checker and seems to work fairly well.
No grammar correction sadly, but definitely helps with typos!

[Zhe Li]

Sadly, it seems Code Spell Checker doesn't work with this extension. I have opened an issue to request them to support this extension: github.com/streetsidesoftware/vsco...

---

Code Spell Checker can work with DEV Community extension. Search Updated on 2019/10/23 in the post to learn more.

[Deepu K Sasidharan]

I found this and kind of works github.com/znck/grammarly

[Muhammad Umair]

There are few extensions for typos not sure if they validate grammar

[James Shipman]

Is there a way to add a post to a series from this extension; or should this be done on the site still?

[Zhe Li]

You can add series property in yaml section on top of the article.

[James Shipman]

Ah, perfect. Thank you :) this is a great extension.

[Douglas Fugazi]

Damn, this is pretty awesome. Thanks a lot

[Muhammad Umair]

Very cool 🥰😎🥰

[Damian]

Very good idea! It would be great to have more user friendly image upload, but still looks really good :)

[gdahboy]

what you have done is so great , i just used this tools and now we need to move forward and work on other extension for the auto-complete and suggestions

[Saurabh Daware 🌻]

So cool I'll try this out!

[Josh]

I'm not sure why, but trying to sign in just gives me an Unexpected end of JSON input error =/

[Simon Holdorf]

Awesome, gonna try ist out!

[Paweł Kowalski]

Cool beans :D