Set Up an Editor, Linter, and Org

Whatever your development workflow, you have to set up your code editor, set up linting, and configure an org to see your component in action.

To develop Lightning web components, use your favorite code editor.

We recommend using Visual Studio Code because its Salesforce Extension Pack provides powerful features for working with the Salesforce CLI, the Lightning Component framework, Apex, and Visualforce.

If you choose to work with Visual Studio Code, install it and the Salesforce Extension Pack.

We also recommend using Prettier for code formatting. VS Code can install Prettier as an extension. For other editors, see the Prettier documentation.

You can’t develop Lightning web components in the Salesforce Developer Console.

Linting finds errors in your code while you’re editing, before you compile. Linting is more than spell-checking, it steers you away from anti-patterns and towards good patterns. Salesforce has created ESLint rules to minimize Lightning Web Components programming mistakes.

If you’re using a Salesforce DX project, you don’t have to set up linting manually. See Develop in Scratch Orgs and Develop in Non-Scratch Orgs.

If you aren’t using a Salesforce DX project, install the ESLint rules from the command line. See the github/salesforce/eslint-plugin-lwc and github/salesforce/eslint-config-lwc repositories for instructions.

There are three configuration levels for linting rules. Check out the eslint-config-lwc README and choose the configuration that matches your coding needs.

If you are developing components to run in Lightning Web Security, see Install ESLint Rules for Lightning Web Security.

Sign up for a Developer Edition org.

You can develop Lightning web components in scratch orgs and non-scratch orgs. To create scratch orgs, configure an org as a Dev Hub. Local development requires a scratch org.

The Salesforce CLI works a bit differently with scratch orgs than it does with non-scratch orgs. We create a project and go over the workflows in Develop with Salesforce DX Tools.

Beginning in Winter ’23, Lightning Web Security is enabled by default in scratch orgs. For more information, see Enable and Disable LWS in Scratch Orgs.

To make it easier to debug JavaScript code, enable debug mode in your org. When you enable debug mode, framework JavaScript code isn’t minified, so it’s easier to read and debug. Debug mode also adds more detailed output for some warnings and errors.

Only enable debug mode for users who are actively developing or debugging JavaScript. Salesforce is slower for users who have it enabled.

  1. In Salesforce, from Setup, enter Debug Mode in the Quick Find box, then select Debug Mode.
  2. In the user list, locate any users who need debug mode enabled. If necessary, use the standard list view controls to filter your org’s users.
  3. Enable the selection checkbox next to users for whom you want to enable debug mode.
  4. Click Enable.

See Also