Skip to content

Use Visual Studio Code as Site Editor

Visual Studio Code (VSCode) is a powerful, free source-code editor developed by Microsoft. It's highly extensible and provides excellent support for editing Markdown files, making it an ideal choice for managing your site's content.

Getting Started

  1. Download and install Visual Studio Code for your operating system
  2. For the best experience, install these recommended extensions:
  3. Markdown All in One - Provides keyboard shortcuts, table of contents, auto-preview and more
  4. Markdown Preview Enhanced - Offers a more powerful markdown preview
  5. Path Intellisense - Helps with file path autocomplete

Opening Your Site in VSCode

  1. Launch VSCode
  2. Go to File -> Open Folder
  3. Navigate to your Change Maker V3 application directory
  4. Select the entire project folder to open it

Key Features for Site Editing

File Explorer

The file explorer (accessible via the first icon in the left sidebar) gives you a clear view of your site's structure. Your content is primarily located in the docs folder.

Integrated Preview

VSCode offers a built-in Markdown preview. To use it: 1. Open any markdown file 2. Press Ctrl+Shift+V (or Cmd+Shift+V on Mac) 3. The preview will open side by side with your editor

Search Functionality

  • Quick File Open: Press Ctrl+P (or Cmd+P on Mac) to quickly open any file
  • Full Text Search: Press Ctrl+Shift+F (or Cmd+Shift+F on Mac) to search across all files

Working with Images

  1. Place your images in the appropriate directory (usually alongside your markdown files)
  2. Reference them in your markdown using relative paths: 
    ![Alt text](./image-name.png)

Tips for Efficient Editing

  1. Use the integrated terminal (View -> Terminal) to run site-related commands
  2. Take advantage of VSCode's multi-cursor editing: Hold Alt (Option on Mac) and click to add multiple cursors
  3. Use the built-in Git integration to track your changes
  4. The status bar at the bottom shows helpful information like file type and encoding

Syncing Your Work

VSCode integrates well with version control systems like Git. You can also use various cloud storage solutions to sync your work across devices:

  • GitHub integration (built into VSCode)
  • OneDrive/Dropbox/Google Drive sync
  • Remote development using VSCode's Remote SSH extension

Configuration

VSCode is highly customizable. You can adjust settings like: - Auto-save frequency - Editor font size and family - Color theme - Keyboard shortcuts

Access settings through: - Windows/Linux: File -> Preferences -> Settings - Mac: Code -> Preferences -> Settings

Additional Resources