Install Visual studio code and create a lwc component

You need CLI for VsCode, so let’s install the CLI before we install visual studio code-

Install the Command Line Interface (CLI)

1. Install the CLI from https://developer.salesforce.com/tools/sfdxcli.
2. Confirm the CLI is properly installed and on the latest version by running the following command from the command line-
   sfdx update

Install Visual Studio Code (VsCode)

1. Download and install the latest version of Visual Studio Code for your operating system. If you already have Visual Studio Code installed, there’s no need to reinstall it.
2. Launch Visual Studio Code.
3. On the left toolbar, click the Extensions icon .
4. Search for Salesforce Extension Pack and click Install.

We have installed cli and vscode. Now we need to create project first in vscode before creating a lwc component. So, lets create a project first and authorize it with an org, then we will create a lwc component.

Create a Salesforce Project in VsCode

1. Press Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS)
2. Type sfdx and then select SFDX: Create Project or SFDX: Create Project with Manifest and enter.
3. Then select a folder and click Create Project.

Note: SFDX: Create Project will create project without package.xml file while SFDX: Create Project with Manifest will create a project with package.xml.

Authorize your Org

1. Press Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS)
2. Type Authorize and then select ‘SFDX: Authorize an Org’.
3. You will be presented with below options-
   • Project Default – Select this option if your url is defined in package.json
   • Sandbox – Select this option if you are developing your component in sandbox
   • Production – Select this option if you want to create project for dev or production environment.
   • Custom – Select this option if you are not sure about sandbox or production. You will need to enter url in next step if you select this option.
4. Choose accordingly and then you will be directed to browser where you will enter credentials and login.
5. Now you can close your browser once you are successfully authorized. You will see ‘Successfully authorized’ message in output panel as shown below upon successful authorization.

Now lets create a lwc component.

Create a Lightning Web Component