Installation of Visual Studio Code:- Step 1: Install Visual Studio Code The installation of Visual Studio Code depends on the platform. Go to the official website of Microsoft to install the Visual Studio Code. https://visualstudio.microsoft.com/downloads/ Here click on the Free Download button and choose your platform for installation.

Step 2: Install CLI

CLI stands for Command Line Interface. Salesforce CLI provides a lot of commands to make life easy.  It creates different environments for development, testing, individual org for teams, and merging the code in a single org using scratch org and version control. Copy the link for the installation of CLI https://developer.salesforce.com/tools/sfdxcli

Step 3: VS Code

After downloading open the Visual Studio Code, you will see something like these.

Step 4: Extensions

Now click on VIEW and then EXTENSIONS or just click on the symbol of Extensions shown in the image below.

Step 5: Install Extensions

Type  Salesforce Extension Pack in the search box and click install This pack provides features for working with the development org (scratch org, sandboxes, and DE org), Apex, Aura components, and Visualforce. This extension pack consists of 9 extensions which are as follows:-

1. Salesforce CLI Integration: This extension interacts with Salesforce CLI to provide core functionality.
2. Apex: This extension provided syntax highlighting and code completion for Apex.
3. Aura Components: This extension enables you to work on Aura components.
4. Visualforce: This extension enables you to work on Visualforce Pages and Components just through your IDE.
5. Apex Interactive Debugger: This extension enables you to debug your apex code from your IDE.
6. Lightning Web Components: This extension supports and uses the HTML language server from VS Code.
7. Apex Replay Debugger: This extension replays the apex execution from a debug log reference and helps in debugging the error in the apex code.
8. Salesforce Lightning Design System (SLDS) Validator:- This extension simplifies working with the Salesforce Lightning Design System (SLDS) and provides code completion, syntax highlighting, and validation with recommended tokens and utility classes.
9. SOQL: This extension enables you to interactively build Salesforce Object Query Language(SOQL).

Step 6: Create a Project and connect with Org

1. Click VIEW and then click Command Palette or else just press Ctrl+Shift+P
2. Type -> SFDX: Create Project with Manifest and select Standard project.
3. Enter the Project Name to create the folder and choose the location for the folder. As the folder has been created, we can see different files and folder which has been created through extensions.
4. Connect the org:
   • Click VIEW and then click Command Palette or else just press Ctrl+Shift+P
   • Type -> SFDX: Authorize an Org, and select the required development org(project default, Production, Sandbox, Custom).
   • We selected Project Default, entered the Alias name, and choose the org to which we want to connect.
   • Now we can see the same Alias name at the end of the VS Code same as the image

Basic of Lightning Web Component:-

Lightning Web Component is the Salesforce implementation of that new breed of lightweight frameworks built on web standards. Lightning Web Component is formed with the help of HTML, JavaScript, CSS(optional), and XML configuration files, which all define the metadata values for the component.

• Naming Convention of File:
  • Must begin with a lowercase letter
  • Must contain only alphanumeric or underscore characters
  • Must be unique in the namespace
  • Can’t include whitespace
  • Can’t end with an underscore
  • Can’t contain a hyphen (dash)

Structure of Lightning Web Component:-

• Create Lightning Web Component:
  • Click ‘VIEW’ and then click ‘Command Palette’ or else just press ‘Ctrl+Shift+P’.
  • Type ->SFDX: Create Lightning Web Component
  • Enter the file name as -> firstHelloLWC_Component
  • Choose ‘force-app\main\default’ as a directory. It will create an LWC component. Our LWC component by default has 3 files: .html, .js, and meta.xml.
• .html file:
  • .html file contains all the markups, normal HTML tags, lightning tags, as well as lightning component elements inside the tag.
  • Code:

    Hello, {greeting}!

• .js file:
  • As LWC is using the core concept of web standards, and JavaScript is the main programming or scripting language to handle web applications. It defines business logic and event handling like On click of a button, on-page load, getting data from Salesforce object, etc.
  • Code:
    import { LightningElement } from ‘lwc’;

    export default class FirstHelloLWC_Component extends LightningElement {

        greeting = ‘World’;

        changeHandler(event){

      this.greeting = event.target.value;

        }

    }
• .xml file
  • Each Lightning web component folder must include a configuration file named .js-meta. XML. The configuration file defines the metadata values for the component, including targets and the design configuration for the Lightning App Builder and Experience Builder.
  • We set to deploy components for different pages like the App page, Record page, etc.
  • Code:

    
    
    
    56.0
    true
    
    lightning__HomePage
    
    
    

• Deploy LWC component to Org:
  • Right-click on the folder and select ‘SFDX: Deploy Source to Org’.
• Add this component to the Lightning home page:
  • App launcher -> Sales -> Home tab -> Setup -> edit page > find ‘firstHelloLWC_Component’ in custom list > drag it to page > save > activate
  • Our ‘firstHelloLWC_Component’ component can be seen below in the image.