---
schema_version: "1"
id: 059b4f7e0c13d9c83be882b1106ec286f265fc0efc0f862116002f2917c1327f
title: Visualforce Development with Salesforce Extensions
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/salesforcedx/sfvscode/guides/programming-languages/visualforce-writing.md
canonical_url: https://developer.salesforce.com/docs/platform/sfvscode-extensions/guide/visualforce-writing.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f94ebedef10f7bdfa22fec7612abc8d8f75f685bc4a5bbeafbf50234d7c47b11
products:
  - Salesforce Extensions for Visual Studio Code
  - salesforcedx
---
# Visualforce Development with Salesforce Extensions

Use the Visualforce Extension for VS Code to efficiently create Visualforce components.

**note:** Interested in creating new Visualforce components? We recommend building Lightning web components instead. They’re more modern and powerful custom HTML elements for your Salesforce apps and sites.

## Code Completion

Use Ctrl+Space for code completion for:

- Standard Visualforce components (tags and attributes), with Salesforce documentation
- HTML tags
- CSS
- JavaScript

  ![Code completion options and associated documentation in a `.page` file](https://developer.salesforce.com/docs/platform/media/vscode/visualforce_completion.png)

## Syntax Highlighting

Get syntax highlighting in some sections of various files (`.page`, `.component`, `.app`, and so on).

- HTML portions
- Embedded CSS and JavaScript portions

  ![Colored syntax highlighting in a .page file](https://developer.salesforce.com/docs/platform/media/vscode/visualforce_syntax.png)

## Outline View

See an outline view by using Ctrl+Shift+O on Windows or Linux or Cmd+Shift+O on macOS.

![List of symbols in a .page file](https://developer.salesforce.com/docs/platform/media/vscode/visualforce_outline.png)

## See Also

[Visualforce Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_intro.htm)