Write Posts in DEV Community using Visual Studio Code
Tags: showdev, vscode
Published: 2019-10-03 11:00:34

---
title: Write Posts in DEV Community using Visual Studio Code
published: true
description: 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.
tags: showdev, vscode
cover_image: https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/dev-cover.png
---

[DEV Community](https://dev.to) is one of the most famous platform for developers to share great ideas. Thanks to [DEV API](https://docs.dev.to/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](https://marketplace.visualstudio.com/items?itemName=sneezry.vscode-devto) to write posts in DEV Community using Visual Studio Code.

# Prerequisites

To get started, you need install [Visual Studio Code](https://code.visualstudio.com/). For better user experience, you can also install one or more [markdown extensions](https://marketplace.visualstudio.com/search?term=markdown&target=VSCode&category=All%20categories&sortBy=Relevance) 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.
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/start.png)

# 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:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/generate-key.png)

2. Copy the generated API key:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/get-key.png)

3. Back to Visual Studio Code, and click **Sign in**, paste API key:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/set-key.png)

4. You can see all your posts after signed in:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/signed-in.png)

# Edit or Write A New Post

1. To edit a post, click its title in post list to open in Visual Studio Code:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/edit.png)

2. Press `Ctrl` + `S` to save your changes.
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/saving.png)

3. Click the **Plus** icon to create a new post:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/create-new.png)

> **Updated on 2019/10/23**
>
> You can use [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.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:
>    ![](https://i.imgur.com/GOZzyS6.png)

# 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:

![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/view-online.png)

# 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**:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/publish.png)

# 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:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/generate-token.png)

3. Copy the generated token.

4. Click **Upload images** at bottom left corner of Visual Studio Code:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/set-token.png)
   > 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:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/uploading-image.png)

6. After upload complete, the code will insert to your current post automatically:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/auto-insert-image.png)

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**:
   ![](https://raw.githubusercontent.com/Sneezry/_dev_community_post_images_/master/remove-token.png)

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