loading...
Cover image for Write Posts in DEV Community using Visual Studio Code

Write Posts in DEV Community using Visual Studio Code

sneezry profile image Zhe Li Updated on ・4 min read

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).

Posted on by:

Discussion

pic
Editor guide
 

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

 

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

 

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.

 

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

 
 

Damn, this is pretty awesome. Thanks a lot

 

Very cool 🥰😎🥰

 

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

 

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

 

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

 

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

 

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

 

So cool I'll try this out!

 

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

 

Awesome, gonna try ist out!

 
 

This is Lit!!! :D great

 

Ohhh that’s good!