Dev Pack for Salesforce is a collection of useful VS Code extensions for Salesforce development. The pack includes extensions for Apex, Lightning Web Components (LWC), SOQL queries, and general development features.
- Auto-Configuration - Sets up Prettier formatting and Better Comments for Salesforce development
- Apex Log Management - Bulk delete Apex logs from your org
- Quick Metadata Refresh - Pull metadata from org with quick pick options
- Environment Health Check - Via bundled SF Preflight extension
- Salesforce Extension Pack
- Salesforce CLI Integration - This extension (salesforcedx-vscode-core) interacts with Salesforce CLI to provide core functionality.
- Salesforce Apex - This extension (salesforcedx-vscode-apex) uses the Apex Language Server to provide features such as syntax highlighting and code completion.
- Apex Interactive Debugger - This extension (salesforcedx-vscode-apex-debugger) enables VS Code to use the real-time Apex Debugger with your scratch orgs or to use ISV Customer Debugger for your subscribers’ orgs.
- Apex Replay Debugger - This extension (salesforcedx-vscode-apex-replay-debugger) enables VS Code to replay Apex execution from Apex debug logs.
- Salesforce Lightning Web Components - This extension supports Lightning web component bundles. It uses the HTML language server from VS Code.
- Aura Components - This extension (salesforcedx-vscode-lightning) supports Aura component bundles. It uses the HTML language server from VS Code.
- Visualforce - This extension (salesforcedx-vscode-visualforce) supports Visualforce pages and components. It uses the Visualforce Language Server and the HTML language server from VS Code.
- SOQL - This extension (salesforcedx-vscode-soql) enables you to interactively build a SOQL query via a form-based visual editor, view the query as you build, and save the output to a .csv or .json file.
- Salesforce Lightning Design System (SLDS) Validator - This extension (salesforcedx-vscode-slds) simplifies working with the Salesforce Lightning Design System (SLDS). It provides code completion, syntax highlighting, and validation with recommended tokens and utility classes.
- Agentforce for Developers - This extension (salesforcedx-einstein-gpt) uses generative AI to make Salesforce development in Visual Studio Code richer with features such as natural language to code generation, inline autocompletion for Apex and LWC code, and test case generation for Apex classes.
- Salesforce Code Analyzer - This extension (sfdx-code-analyzer-vscode) scans your code using multiple rule engines to produce lists of violations that you can use to improve your code.
- Apex Log Analyzer - This extension helps you analyze Apex logs.
- One Dark Pro Theme - A popular dark theme for Visual Studio Code.
- Prettier - An opinionated code formatter that enforces a consistent style.
- ESLint - Integrates ESLint JavaScript into VS Code.
- VSCode Icons - Adds icons to the Visual Studio Code editor.
- Better Comments - Improves your comment annotations with different colors.
- Indent Rainbow - Makes indentation levels more readable with color coding.
- Markdownlint - Provides Markdown linting and style checking.
- Code Spell Checker - A basic spell checker that works well with code.
- Lightning Flow Scanner - Scans and validates Salesforce Lightning Flows.
- Log File Highlighter - Highlights log files to make them easier to read.
- Error Lens - Improves highlighting of errors, warnings and other language diagnostics.
- SF Preflight - Environment health checks and setup verification for Salesforce development.
- SF Metadata Tracker - Track and monitor Salesforce metadata changes in your org.
- SF Flow Visualizer - Visualize and analyze Salesforce Flow metadata with an interactive diagram.
- Launch Visual Studio Code
- Go to View → Extensions
- Search for
Dev Pack for Salesforce - Click on Install
- Reload Visual Studio Code to complete the installation.
On the first installation, Dev Pack for Salesforce automatically sets the following themes and icons:
- Icon theme:
vscode-icons - Color theme:
One Dark Pro Darker
This setup is only done the first time the extension is installed. Feel free to change after the initial setup.
This command updates the Prettier settings for Apex and JavaScript files in your workspace which enables formatting using prettier and features like format on save. You can manually update the Prettier settings by running the following command:
{
"command": "dev-pack-salesforce.updateSettings",
"title": "Dev Pack for Salesforce: Update prettier formatting settings"
}To run this command:
- Open the Command Palette (View → Command Palette or Cmd+Shift+P).
- Type Dev Pack for Salesforce: Update prettier formatting settings and select it.
This introduces some comment highlighting tags which helps improve readability. Try some of these:
// ? this is a question
// > this is a highlighted note
// ! this is an alert
// // strike through the code
// todo: this is a todo
// fixme: this is a fixme
// note: this is a note
// deprecated: this is a deprecated
// important: this is an important
// # this is information
// * this is a important note
You can manually update the Better Comments settings by running the following command:
{
"command": "dev-pack-salesforce.updateBetterCommentsSettings",
"title": "Dev Pack for Salesforce: Update better comments settings"
}To run this command:
- Open the Command Palette (View → Command Palette or Cmd+Shift+P).
- Type Dev Pack for Salesforce: Update better comments settings and select it.
After installing Dev Pack for Salesforce, you will have access to all the included extensions. Simply open a Salesforce project and start developing!
This extension pack is licensed under the MIT License. See the LICENSE file for more information.
Contributions are welcome! If you'd like to contribute to this project, please open an issue or a pull request on GitHub.