Categories Salesforce
Best Visual Studio Code Extensions for Salesforce Developers
There are many extensions available to increase the power of Visual Studio Code. This article compiles list of best extensions for Salesforce Developers.
- 30 seconds of code
Collection of useful Javascript snippets (for LWC). - Alignment
Align code based on special characters (Alt + =). - Salesforce Extension Pack
Collection of Salesforce official extensions. - Apex Javadoc
Add Javadoc comment (/** then press tab). - Apex PMD
Apex static code analysis. - Auto Close Tag
Automatically add HTML/XML close tag (Add following config to activate)."auto-close-tag.activationOnLanguage": ["*"] - Auto Rename Tag
Automatically rename paired HTML/XML tag (Add following config to activate)."auto-rename-tag.activationOnLanguage": ["*"] - Beautify
Beautify javascript, JSON, CSS, Sass, and HTML (F1). - Better Comments
Style the comments based on category. - Bookmarks
Bookmark lines in code (Right Click > Bookmarks: Toggle) - Bracket Pair Colorizer
Colorize matching brackets. - change-case
Change case of selected text. - Code Spell Checker
Spell checking on code. - Comment Anchors
Place anchors within comments and navigate easily.
ANCHOR - Used to indicate a section in your file
TODO - An item that is awaiting competion
FIXME - An item that requires a bugfix
STUB - Used for generated default snippets
NOTE - An important note for a specific code section
REVIEW - An item that needs additional review
SECTION - Used to define a region (See 'Hierarchical anchors') - CSS Peek
Allow peeking to css ID and class strings as definitions. - Console Log Checker
Counts or removes any console.logs inside the current document. - Error Lens
Improve highlighting of errors, warnings and other language diagnostics. - ESLint
Integrates ESLint JavaScript. Follow these steps after installing the extension.
In terminal run following commands.
How to config ESLint: https://developer.salesforce.com/tools/vscode/en/lwc/linting/ - File Utils
A convenient way of creating, duplicating, moving, renaming and deleting files and directories. - Git History
View git log, file history, compare branches or commits - gitignore
Language support for .gitignore files - GitLens — Git supercharged
Adds additional Git capabilities into VS Code. - Indenticator
Visually highlights the current indent depth. - JavaScript Booster
Adds extra functionalities for JS files. - JavaScript (ES6) code snippets
Collection of ES6 JavaScript snippet (for LWC) - Nest Comments
Toggle nested comments - Output Colorizer
Syntax highlighting for log files - Partial Diff
Compare (diff) text selections within a file, across files, or to the clipboard - Prettier – Code formatter
Code formatter (Ctrl + Shift + P). Follow steps below for config.- If you don’t already have a
package.jsonin your project, run:npm init(You can accept all the defaults). - Install Prettier by running: npm install –save-dev –save-exact prettier.
- Create a Prettier configuration file called .prettierrc, in the root of your project, with the following content.
Finally install extension.{
"trailingComma": "none",
"singleQuote": true,
"tabWidth": 4,
"overrides": [
{
"files": "**/lwc/
**/*.html",
"options": { "parser": "lwc" }
},
{
"files": "*.{cmp,page,component}",
"options": { "parser": "html" }
}
]
}
- If you don’t already have a
- Project Manager
Switch between different projects. - Remove empty lines
Removes empty lines from selected text. - Rewrap
Re-wraps comments and other text to a given line length. - Salesforce Documenter
Automated Code Documentation Generation for Salesforce - Salesforce Lightning Component Snippets
Code snippets for Lightning.
Trigger Type Example l: Lightning l:pill, l:layoutItem, l:verticalNavigationSection… a: Aura a:if, a:iteration, a:attribute… i: Interface i:hasRecordId, i:appHostable, i:hasSObjectName… h: Handler h:init - Salesforce Lightning code snippets
LWC and Aura component snippets - Salesforce Package.xml Generator Extension for VS Code
Extension for generating Package.xml - Settings Sync
Synchronize/Backup settings and other VS code configurations. - Split Lines
Splitting Lines With String Literals. - Trailing Spaces
Highlight trailing spaces in code. - Turbo Console Log
Automatically create meaningful console.log() messages for selected variable ( ctrl + alt + L) - Uncrustify
Code formatter for Apex. (add following config to enable)
“uncrustify.langOverrides”: {
“apex”: “JAVA”
} - Visual Studio IntelliCode
AI-assisted development features - VTools
Autohide sidebar and bottom bar when click outside. - XML
XML Language Support (support for-meta.xmlorpackage.xml)
