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 with the Salesforce Extension Pack.
The Salesforce Extension Pack installs helpful extensions for LWC development, including those for Apex code completion and SLDS validation. 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.
Note
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.
We recommend migrating your projects to ESLint v9 as soon as possible. Starting in Spring ‘26, all new ESLint rules and bug fixes will only support ESLint v9.
To make your projects compatible with ESLint v9, follow the instructions in Salesforce Developers: Lightning Web Components Now Supports ESLint v9. For information about breaking changes for ESLint v9, see ESLint: Migrate to v9.x.
Important
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.
Tip
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 (LWS) is enabled by default in scratch orgs. For more information, see Enable and Disable LWS in Scratch Orgs.
Note
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.
Debug Mode in the Quick Find box, then select Debug Mode.See Also
j