Extensions are software tools that allow users to customize their browsing in Chrome. Web technologies like HTML, CSS, and JavaScript are used to develop them. For people who make Chrome addons and documentation.
Salesforce Package.xml Generator Extension for VS Code
For development against sandboxes or DE orgs, this plugin provides a User Interface to select metadata components for the Package.xml file (Org Development Model with VS Code). This is comparable to the Add/Remove Metadata Components feature in the Eclipse Force.com IDE.
Salesforce Query Editor
Below is a list of the extension’s features.
- SOQL Builder.
- Execute SOQL Queries.
- Get SOQL Query Plans.
- Update, Create and Delete Records.
- Add Relationship Fields.
- Add Child Parent Relationship Fields.
- Works with any VS Code Theme.
- Works side by side with your Apex Class.
- Access to Field Details, such as Name, Label, Required, Updateable, Groupable and more.
- Compact to not take away the space you have available while writing code.
- Works with Gitpod
Settings Sync
These are some of its main characteristics.
- Use your GitHub account token and Gist.
- Easy to Upload and Download on one click.
- Show a summary page at the end with details about config and extensions effected.
- Auto download Latest Settings on Startup.
- Auto upload Settings on file change.
- Share the Gist with other users and let them download your settings.
- Supports GitHub Enterprise
- Support pragmas with @sync keywords: host, os and env are supported.
- GUI for changing settings / logging in
- Allows you to Sync any file across your machines.
Live Server
The following functionalities are available:
- A Quick Development Live Server with live browser reload.
- Start or Stop server by a single click from status bar.
- Open a HTML file to browser from Explorer menu.[Quick Gif Demo].
- Support for excluding files for change detection.
- Hot Key control.
- Customizable Port Number, Server Root, default browser.
- Support for any browser (Eg: Firefox Nightly) using advance Command Line.
- Support for Chrome Debugging Attachment (More Info). [Quick Gif Demo].
- Remote Connect through WLAN (E.g.: Connect with mobile) [Need Help? See FAQ Section]
- Use preferable host name (localhost or 127.0.0.1).
- Customizable Supporting Tag for Live Reload feature. (Default is Body or head)
- SVG Support
- https Support.
- Support for proxy.
- CORS Enabled
- Multi-root workspace supported.
- Support for any file even dynamic pages through Live Server Web Extension.
Bracket Pair Colorization Toggler
You may rapidly toggle the new global “Bracket Pair Colorization” feature implemented in VS Code version 1.60 with the help of a VS Code extension.
Auto Rename Tag
When you rename one HTML/XML tag, the corresponding HTML/XML tag is also changed automatically.
GitLens — Git supercharged
GitLens offers the following features, to name a few:
- simple backwards and forwards revision navigation via a file’s history
- An unobtrusive current line blame annotation at the end of the line that displays the commit and author who most recently updated the line and provides more specific blame information when hovered over
- authorship CodeLens displays the number of authors and most recent commit at the top of files and/or on code blocks.
- a status bar annotation displaying the author and commit of the most recent modification to the current line
- on-demand file annotations in the editor, including blame, display the author and commit of the most recent modification made to each line of a file. Heatmap: Displays how recently lines were updated in relation to all other changes in the file and up to this point. Highlights any local (unpublished) changes or lines changed by the most recent commit (hot vs. cold)
- rich Side Bar vistas in plenty
- a Commit Details view to give commits and stashes rich details
- a Commits view for examining, managing, and visualizing Git commits a Repositories view for investigating, managing, and visualizing Git repositories
- a File History view that allows you to see, navigate, and investigate the file’s revision history or simply the current file’s selected lines
- a Line History view to view, explore, and browse the revision history of the current file’s selected lines
- a Git branch visualization, exploration, and management perspective
- a Remotes view for Git remotes and remote branches to observe, study, and manage them
- a Stashes view for managing, examining, and visualizing Git stashes
- a Git tag visualization, exploration, and management perspective
- a Git Command Palette to enable easy access to commits, history, and search stashes as well as guided (step-by-step) access to many common Git commands, status — working tree and current branch status
- An interactive rebase editor that is simple to use to set up an interactive rebase session
- terminal links: To rapidly jump to further details for commits, branches, tags, and other topics, ctrl + click on auto links in the integrated terminal.
- GitHub, GitLab, Gitea, Gerrit, Google Source, Bitbucket, and Azure DevOps issue and pull request auto-linking rich hover information supplied for connected issues and pull requests are just a few of the rich remote provider integrations available (GitHub only), connects commits, branches, and pull requests (GitHub only)
- Stronger navigation and comparison commands, more user-defined modes for quickly switching between groups of settings, and more customizable menus and toolbars for control over where menu and toolbar elements are shown
Git History
The following are the extension’s features:
- View and search the details, graph, and git log.
- View an earlier version of the file.
- View and look up the past
- View the genealogy of each or every branch (git log)
- view a file’s history
- seeing a file’s line history (Git Blame).
- View a writer’s biography
- Compared: Branch comparisons
- Verify commitments
- File comparison across commits
- Additional features:
- Github emojis
- Selective committing
- Create Branch, Create Tag
- Reset the commit (soft and hard)
- Conversion of commits
- branches can be made from commits
- View the commit data in a tree view (snapshot of all changes)
- Combine with rebase
CSS Peek
The extension’s core attributes are:
- With Go to Definition and Go to Symbol in Workspace support for CSS/SCSS/LESS (classes and IDs) found in strings within the source code, this addon expands HTML and ejs code editing.
- This was greatly influenced by a comparable Brackets feature called CSS Inline Editors.
- The extension does symbol definition tracking for CSS selectors while supporting all of the standard capabilities (classes, IDs and HTML tags). This comprises:
- Peek: open the CSS file directly in the browser and make any necessary changes. (Ctrl+Shift+F12)
- Go To: create a new editor or navigate directly to the CSS file (F12)
- Hovering over a symbol will display its definition (Ctrl+hover).
- Additionally, if you already know the class or ID name, it supports the Symbol Provider so you can quickly jump to the appropriate CSS/SCSS/LESS code.
- The extension does symbol definition tracking for CSS selectors while supporting all of the standard capabilities (classes, IDs and HTML tags). This comprises:
- Peek: open the CSS file directly in the browser and make any necessary changes. (Ctrl+Shift+F12)
- Go To: create a new editor or navigate directly to the CSS file (F12)
- Hovering over a symbol will display its definition (Ctrl+hover).
- Additionally, if you already know the class or ID name, it supports the Symbol Provider so you can quickly jump to the appropriate CSS/SCSS/LESS code.
JavaScript (ES6) code snippets
Here is a list of things it aids in:
Supported languages (file extensions)
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
- Html (.html)
- Vue (.vue)
Snippets
Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.
Import and export
| Trigger | Content |
| imp→ | imports entire module import fs from ‘fs’; |
| imn→ | imports entire module without module name import ‘animate.css’ |
| imd→ | imports only a portion of the module using destructing import {rename} from ‘fs’; |
| ime→ | imports everything as alias from the module import * as localAlias from ‘fs’; |
| ima→ | imports only a portion of the module as alias import { rename as localRename } from ‘fs’; |
| rqr→ | require package require(”); |
| req→ | require package to const const packageName = require(‘packageName’); |
| mde→ | default module.exports module.exports = {}; |
| env→ | exports name variable export const nameVariable = localVariable; |
| enf→ | exports name function export const log = (parameter) => { console.log(parameter);}; |
| edf→ | exports default function export default function fileName (parameter){ console.log(parameter);}; |
| ecl→ | exports default class export default class Calculator { }; |
| ece→ | exports default class by extending a base one export default class Calculator extends BaseClass { }; |
Class helpers
| Trigger | Content |
| con→ | adds default constructor in the class constructor() {} |
| met→ | creates a method inside a class add() {} |
| pge→ | creates a getter property get propertyName() {return value;} |
| pse→ | creates a setter property set propertyName(value) {} |
Various methods
| Trigger | Content |
| fre→ | forEach loop in ES6 syntax array.forEach(currentItem => {}) |
| fof→ | for … of loop for(const item of object) {} |
| fin→ | for … in loop for(const item in object) {} |
| anfn→ | creates an anonymous function (params) => {} |
| nfn→ | creates a named function const add = (params) => {} |
| dob→ | destructing object syntax const {rename} = fs |
| dar→ | destructing array syntax const [first, second] = [1,2] |
| sti→ | set interval helper method setInterval(() => {}); |
| sto→ | set timeout helper method setTimeout(() => {}); |
| prom→ | creates a new Promise return new Promise((resolve, reject) => {}); |
| thenc→ | adds then and catch declaration to a promise .then((res) => {}).catch((err) => {}); |
Console methods
| Trigger | Content |
| cas→ | console alert method console.assert(expression, object) |
| ccl→ | console clear console.clear() |
| cco→ | console count console.count(label) |
| cdb→ | console debug console.debug(object) |
| cdi→ | console dir console.dir |
| cer→ | console error console.error(object) |
| cgr→ | console group console.group(label) |
| cge→ | console groupEnd console.groupEnd() |
| clg→ | console log console.log(object) |
| clo→ | console log object with name console.log(‘object :>> ‘, object); |
| ctr→ | console trace console.trace(object) |
| cwa→ | console warn console.warn |
| cin→ | console info console.info |
| clt→ | console table console.table |
| cti→ | console time console.time |
| cte→ | console timeEnd console.timeEnd |
These are some of the things it helps with:
- Change the workspace’s color subtly in Visual Studio Code. Ideal for instantly identifying your editor when you have numerous instances of VS Code, use VS Live Share, or use VS Code’s Remote capabilities.
- Read the complete documentation here, which includes a user’s manual and a changelog for Peacock.
Features of the extension include the following:
- Generate colored background for
- css variables
- preprocessor variables
- hsl/hsla colors
- cross browsers colors (red, blue, green…)
- css hexa color
- rgb/rgba color
- argb color
- Color background live update
It aids in A TypeScript, JavaScript, Text, or other file should be loaded. A squiggly underline will appear next to words that are not in the dictionary files.
It supports in:
The scopes of html, css|less|sass|scss|stylus, jsx, blade, and vue are the only ones that support snippets. A tag containing the icon class will be generated when you type the class name of an icon using the selected prefix. fa-layers, fa-layers-counter, fa-layers-text, and fa-layers (span>) are exceptions.
This plugin greatly simplifies debugging by automating the process of creating informative log messages.
Among the features, the following few stand out:
- Todo, FIXME, and other annotations should be highlighted in your code.
- Before publishing the code to production, it’s sometimes easy to forget to go back and examine the TODOs you’ve included while coding. Therefore, I’ve been seeking an extension that emphasizes them and serves as a reminder that there are still notes or tasks that need to be completed.
A few of the characteristics that stand out are as follows:
Once installed and after reloading vscode, you will be presented with a message to Activate the icons.
In case this doesn’t happen, navigate to:
- Linux & Windows => File > Preferences > File Icon Theme > VSCode Icons.
- MacOS => Code > Preferences > File Icon Theme > VSCode Icons.
Displays the matches of the active regular expression in a side-by-side document. The combination of Ctrl+Alt+M (⌥⌘M) will switch this on or off.
Through a status bar entry, global and multiline options can be inserted for comparison with a side-by-side document. When the side-by-side document includes numerous examples to match, this can be helpful.
Some of the features that Bookmarks offers are as follows:
- Mark/unmark positions in your code
- Mark positions in your code and give it name
- Jump forward and backward between bookmarks
- Icons in gutter and overview ruler
- See a list of all Bookmarks in one file and project
- Select lines and regions with bookmarks
- A dedicated Side Bar
Designed to make life simpler for the user so that he can complete all of his coding in a small number of words, making him faster.
It helps in:
View Apex class and trigger outlines, see code completion hints, and identify grammatical mistakes in your code. The Apex Language Server is the engine behind this addon.
With the help of this extension, VS Code can use the ISV Customer Debugger with the sandbox orgs of your subscribers and the real-time Apex Debugger with scratch organizations.
Using a debug log—a record of every interaction in a transaction—Apex Replay Debugger mimics a live debugging session. No longer is it necessary to parse through thousands of log lines manually. As an alternative, Apex Replay Debugger displays the logged data like an interactive debugger, allowing you to troubleshoot your Apex code. Editing your Apex code, releasing or deploying it to your organization, simulating the bug, downloading the resulting debug log, and starting Apex Replay Debugger with that debug log are all steps in the debugging process.
With the aid of this extension, Visual Studio Code can communicate with your orgs using the Salesforce CLI.
This add-on offers code editing capabilities for the Lightning Component framework’s Aura Components programming model. It offers syntax highlighting, code completion, and an outline view of your files using VS Code’s default HTML language server.
This extension offers syntax highlighting, code completion, and an outline view of your files using the Visualforce Language Server and the default HTML language server in Visual Studio Code.
The Lightning Web Components programming model, which is a part of the Lightning Component framework, is supported by this extension’s code editing features. It offers syntax highlighting, code completion, and an outline view of your files using VS Code’s default HTML language server.
Working with Salesforce Lightning Design System (SLDS) in Aura and Lightning is made simpler by this extension:
- Validation with recommended tokens and utility classes
- Syntax highlighting
- Code completion
- Context awareness
These are among the extension’s features:
- RelaxNG (experimental) support (since v0.22.0)
- Syntax error reporting
- General code completion
- Auto-close tags
- Automatic node indentation
- Symbol highlighting
- Document folding
- Document links
- Document symbols and outline
- Renaming support
- Automatic Tag Renaming when editor.linkedEditing is enabled
- Document Formatting
- DTD validation
- DTD completion
- DTD formatting
- XSD validation
- XSD based hover
- XSD based code completion
- XSL support
- XML catalogs
- File associations
- Code actions
- Schema Caching
The workspace folder that was opened contains the ESLint library, which is used by the extension. The extension checks for a global install version if the folder does not offer one. Run npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install if you haven’t already installed ESLint locally or globally.
On new folders you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal. If you have installed ESLint globally (see above) then run eslint –init in a terminal. If you have installed ESLint locally then run .\node_modules\.bin\eslint –init under Windows and ./node_modules/.bin/eslint –init under Linux and Mac.
- An opinionated code formatter is prettier. By analyzing your code and reprinting it according to its own standards, which take the maximum line length into consideration and wrap code as appropriate, it maintains a consistent style
- Less HTML, JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Vue, Angular, HANDLEBARS, Ember, Glimmer, GraphQL, Markdown, and YAML
This extension assists in:
- Analyze the open file.
- run an analysis on a saved file
- Run an analysis on a changed file (new!
- Analyze the entire workplace.
- Analyze a single file.
- the capacity to create custom rules
Salesforce debugs log performance analysis is significantly simpler and quicker with Apex Log Analyzer. It offers a Flamegraph and Calltree for code execution visualization and uses Method and Database Analysis to assist in pinpointing performance and SOQL/DML issues.
