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.

  1. 30 seconds of code
    Collection of useful Javascript snippets (for LWC).
  2. Alignment
    Align code based on special characters (Alt + =).
  3. Salesforce Extension Pack
    Collection of Salesforce official extensions.
  4. Apex Javadoc
    Add Javadoc comment (/** then press tab).
  5. Apex PMD
    Apex static code analysis.
  6. Auto Close Tag
    Automatically add HTML/XML close tag (Add following config to  activate).
    "auto-close-tag.activationOnLanguage": ["*"]
  7. Auto Rename Tag
    Automatically rename paired HTML/XML tag (Add following config  to  activate).
    "auto-rename-tag.activationOnLanguage": ["*"]
  8. Beautify
    Beautify javascript, JSON, CSS, Sass, and HTML (F1).
  9. Better Comments
    Style the comments based on category.
    Bookmark lines in code (Right Click > Bookmarks: Toggle)
  11. Bracket Pair Colorizer
    Colorize matching brackets.
  12. change-case
    Change case of selected text.
  13. Code Spell Checker
    Spell checking on code.
  14. 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')
  15. CSS Peek
    Allow peeking to css ID and class strings as definitions.
  16. Console Log Checker
    Counts or removes any console.logs inside the current document.
  17. Error Lens
    Improve highlighting of errors, warnings and other language diagnostics.
  18. ESLint
    Integrates ESLint JavaScript. Follow these steps after installing the extension.
    In terminal run following commands.
    How to config ESLint: 
  19. File Utils
    A convenient way of creating, duplicating, moving, renaming and deleting files and directories.
  20. Git History
    View git log, file history, compare branches or commits
  21. gitignore
    Language support for .gitignore files
  22. GitLens — Git supercharged
    Adds additional Git capabilities into VS Code.
  23. Indenticator
    Visually highlights the current indent depth.
  24. JavaScript Booster
    Adds extra functionalities for JS files.
  25. JavaScript (ES6) code snippets
    Collection of ES6 JavaScript snippet (for LWC)
  26. Nest Comments
    Toggle nested comments
  27. Output Colorizer
    Syntax highlighting for log files
  28. Partial Diff
    Compare (diff) text selections within a file, across files, or to the clipboard
  29. Prettier – Code formatter
    Code formatter (Ctrl + Shift + P). Follow steps below for config.
    • If you don’t already have a package.json in 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.
      "trailingComma": "none",
      "singleQuote": true,
      "tabWidth": 4,
      "overrides": [
      "files": "**/lwc/
      "options": { "parser": "lwc" }
      "files": "*.{cmp,page,component}",
      "options": { "parser": "html" }
      Finally install extension.
  30. Project Manager
    Switch between different projects.
  31. Remove empty lines
    Removes empty lines from selected text.
  32. Rewrap
    Re-wraps comments and other text to a given line length.
  33. Salesforce Documenter
    Automated Code Documentation Generation for Salesforce
  34. 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
  35. Salesforce Lightning code snippets
    LWC and Aura component snippets
  36. Salesforce Package.xml Generator Extension for VS Code
    Extension for generating Package.xml
  37. Settings Sync
    Synchronize/Backup settings and other VS code configurations.
  38. Split Lines
    Splitting Lines With String Literals.
  39. Trailing Spaces
    Highlight trailing spaces in code.
  40. Turbo Console Log
    Automatically create meaningful console.log() messages for selected variable ( ctrl + alt + L)
  41. Uncrustify
    Code formatter for Apex. (add following config to enable)
    “uncrustify.langOverrides”: {
        “apex”: “JAVA”
  42. Visual Studio IntelliCode
    AI-assisted development features
  43. VTools
    Autohide sidebar and bottom bar when click outside.
  44. XML
    XML Language Support (support for -meta.xml or package.xml)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.