Create a Salesforce DX Project in Visual Studio Code

Create a Salesforce DX Project

Open Visual Studio Code editor --> open the Command Palette by pressing Ctrl+Shift+P --> then type SFDX: Create Project with Manifest press Enter -->then Enter the Project Name press Enter --> then Select the Folder to Store project files. Then client on Create. It will take some time to create a project structure.

Authorize Your Developer org

Open the Command Palette by pressing Ctrl+Shift+P --> then type SFDX: Authorize an Org press Enter -->then accept the Project Default login URL option --> Then it will open a browser to login with your developer org credentials. That's it.

Create a First Lightning Web Component

Create Hello World Lightning web component

1. Open the Command Palette by pressing Ctrl+Shift+P, then type SFDX: Create Lightning Web Component press enter.
2. Enter helloWorld for the name of the new component then press enter to create.

then it will create 3 files like below screen.

3. In the HTML file, helloWorld.html, copy and paste the following code.

[<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Hello, {greeting}!</p>
            <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
        </div>
    </lightning-card>
</template>]

4.  In the JavaScript file, helloWorld.js, copy and paste the following code.

[import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
    @track greeting = 'World';
    changeHandler(event) {
        this.greeting = event.target.value;
    }
}]

5.  In the XML file helloWorld.js-meta.xml, copy and paste the following code.

[<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>]

Sample code Credits: Salesforce.com