Analyze Your Code and Deploy It to Your Org

You’ve installed the tools we recommend for developing Lightning Web Components. And you copied and pasted some broken code, which we know would result in a failed deployment. You’d probably say you’ve never done this in real life before, right?

Fixing JavaScript Errors

The most important task as a developer, after searching on the web for—hopefully working—code, is to write working code yourself. Let’s fix the errors that we introduced before, starting with the JavaScript file.

1. Open Visual Studio Code.
   
2. Click myFirstWebComponent.js.
   
3. Hover over the red-underlined word track. This brings up the error messages related to this specific error:
   
   
   
   
4. Click the Problems tab to show all the errors that appear in the files you have opened currently. You should see something like this:
   
   
   

Both the current file and the Problems tab show you errors detected in your code.

The first error message indicates that it’s the result of a requirement of the Lightning Web Components engine. Such errors include “LWC” followed by a number. If you look closely at the code, you see in the first line that we’re importing LightningElement from the lwc engine, but we’re not importing track. Let’s fix that:

• Click right after the word LightningElement (within the curly braces).
  
• Enter track, and don’t forget to separate the two words with a comma. Your code should look like this:
  import { LightningElement, track } from 'lwc';
  
• Press CMD + S on macOS, or CTRL + S on Windows or Linux, to save the file.
  

Both errors, and the red lines, go away.

The IDE validates the contents of a file as you type by default. You can set this as a preference within Visual Studio Code to validate either as you type or after you save a file.

But wait, why did both errors disappear? And why was the other error message prepended with [eslint]?

The Lightning Web Components extension ships by default with ESLint. ESLint is a widely used linting tool that evaluates code for errors, coding best practices, and more. Salesforce provides specific ESLint rules out of the box for you as a Lightning Web Component developer so that you can write great code. And if you make a mistake, the linting rules help you see it before you deploy your code. Isn’t that great?

The above error message indicated [no-undef]. That error message means that you defined a property, in this case the decorator track, but didn't declare it before. This is one of many super helpful linting rules that help you keep your code clean and maintainable.

Do you remember the .eslintrc file that was added automatically to the lwc metadata folder? That’s the configuration file, which defines the Salesforce-specific linting rules:

{

   "extends": "plugin:@salesforce/eslint-config-lwc/recommended"

}

Salesforce provides different rulesets, including base, recommended, and extended. Because these linting rules are specific to a project, you can use different rulesets for different projects.

When you deploy Lightning web components, Salesforce automatically validates your code against the @salesforce/eslint-config-lwc/base linting rule. Keep that in mind if you reconfigure the linting rules yourself.

If you want to read more about ESLint or the Salesforce-provided linting rules, check out the GitHub repository.

Now that we have a working JavaScript file, let’s fix the HTML markup in your web component template.

Fixing HTML Template Errors

Now that you’ve fixed the errors in the JavaScript file, you’ll learn how to use the intellisense feature of Visual Studio Code in tandem with the Salesforce Lightning Web Components extension.

1. Open myFirstWebComponent.html in Visual Studio Code.
   
2. Place the cursor into the empty curly braces of the red-underlined for:each attribute.
   
3. Press CTRL + Space. You’ll see the intellisense dropdown.
   
   
   
4. Select contact and press Enter to insert contact.
   
5. Add an s to make contact plural: contacts.
   
6. Next, add this attribute to the red-marked div tag: key={contact.Id}
   
7. Press CMD + S on macOS, or CTRL + S on Windows or Linux, to save the file.
   

Your code should look like this:

<lightning-card title="ContactInformation" icon-name="custom:custom14">

   <div class="slds-m-around_medium">

      <template for:each={contacts} for:item="contact">

         <div key={contact.Id}>

            {contact.Name}, {contact.Title}

         </div>

      </template>

   </div>

</lightning-card>

You saw two things while fixing the code.

First, intellisense on expressions within the HTML markup. The Lightning Web Components extension provides intellisense, which means that if you add other properties or functions to your JavaScript file, they will be automatically available for you within the template file. That‘s a huge time saver!

Second, you experienced the on-the-fly validation of code, or in this case markup. It’s the same as in the JavaScript file. If you are, for example, missing a required attribute, the IDE will tell you.

You also get intellisense on all base Lightning components within your template file. When you start typing <lightning, you get a list like this.

And when you hover the cursor over existing markup, the extension provides you with rich information about the selected base component.

One cause of warning messages about code or tokens is an outdated installation of Salesforce CLI. The component code generated by CLI is only as up to date as your CLI installation. SLDS Validator (one piece of the Salesforce Extensions Pack) flags outdated code, so an older CLI is likely to result in more warnings.

For this badge, you can disregard design token warnings because they won't keep you from completing the steps. Outside this badge, however, you should investigate all warning messages and keep Salesforce CLI up to date.

Deploy and Configure Your New Lightning Web Component

Now that all of your code is fixed, it’s time to push your local metadata to your scratch org.

1. To deploy the metadata to your org, enter this command in the Terminal tab:
   sf project deploy start
   
2. Press Enter.
   

After your metadata is pushed successfully to your scratch org, you can add the component to the Account record layout.

1. To open the default scratch org, enter this command in the Terminal tab:
   sf org open
   
2. Press Enter.
   

Now let’s configure the Account record page.

1. From the App Launcher ( ), find and select Sales.
   
2. Click the Accounts tab, then click New to create an account. Enter Component Developers as Account Name, then click Save.
   
3. Click the gear icon ( ), then select Edit Page to open Lightning App Builder.
   
4. Drag the myFirstWebComponent component onto the page.
   
5. Click Save, then click Activate.
   
6. Click Assign as Org Default, then click Next, then Save.
   
7. Click Back () to return to the Account record.
   

That’s it! This project showed you how to install and use the recommended developer tools for developing Lightning Web Components. And you learned how to copy and paste code with errors (which you should avoid in the future).

We can't check your work in a scratch org, but you can still click Verify Step and earn the badge. Then check out the Trailhead Sample Gallery and the Lightning Web Component Recipes to see more code examples to help you learn to develop great Lightning web components.