SFDC Stop - Always the latest about Salesforce


Full Tutorial Series with videos, free apps, live sessions, salesforce consulting and much more.


Telegram logo   Join our Telegram Channel

Sunday, 9 June 2019

How to setup Visual Studio Code for Salesforce ?

Visual Studio Code is the latest IDE for Salesforce Development and in this blog post, I am going to tell you how you can setup Visual Studio Code for Salesforce Development. So, let's begin.

Download and Install VSCode

To download Visual Studio Code to your system, just go to:- https://code.visualstudio.com/ and you'll see an option to download VSCode for your system. I recommend you to download the stable build which is usually free from bugs, however, if you're keen to get the latest upcoming features before the world, you can download the insiders edition too.


Download and install VSCode in your system and on opening, you'll see the welcome screen as shown below:-

Download and Install Salesforce DX CLI

Now, as we've installed VSCode in our system, the next step is to install Salesforce DX CLI. To install that, go to:- https://developer.salesforce.com/tools/sfdxcli and you'll see the page as shown below from where you can download the salesforce dx cli and install the same on your system.


Once you have sfdx cli installed, you can test it by opening the command window and typing sfdx and then pressing enter you should get the result similar to the one given in the below image:-


Cool. You've now properly installed Salesforce DX CLI in your system. Let's get to the next step.

Install Salesforce Extension Pack

In order to make our IDE Salesforce ready. Salesforce has made it's own extension pack available for developers. Once you open your VSCode IDE you can click on the 4th icon on the left hand sidebar menu which is for managing extensions. Search for Salesforce Extension Pack and click on the first search result as shown in the below image:-


I've already installed that in my VSCode IDE so it's giving me the option to disable or uninstall it however you'll see a green button with install written on it as shown in the other search results in the image, just click on that button and it'll install the Salesforce Extension Pack for you. Salesforce Extension pack consists of a number of extensions, all of which are published by Salesforce. The extension pack has the following extensions as of now which will be activated automatically as you install this pack:-
  1. Salesforce CLI Integration
  2. Apex
  3. Visualforce
  4. Aura Components
  5. Apex Interactive Debugger
  6. Apex Replay Debugger
  7. Lightning Web Components
Many more extensions can be added to this extension pack in future as it's officially maintained by Salesforce.

Connecting with your Salesforce Org

Now, as you've installed Salesforce DX CLI, VS Code and all the required extensions, you're good to connect your IDE with your Salesforce Org. To do so, use command:- Ctrl + Shift + P or go to the View -> Command Palette and you'll see the command palette. Start writing:- Create Project with Manifest and press enter on the first option as shown below:-


In the next step, you need to enter the project name as shown below:-


Next, you need to select the location where you want the project to be created. Move to the desired location in the dialog box as shown below and click on Create Project


Your project will be created and you'll see the project structure in the left panel of VS Code which will be similar to the below image.


Now, we need to authorize an org. Press:- Ctrl + Shift + P and type Authorize an Org. Here, we're going to connect with our dev org or a sandbox instead of a dev hub or scratch org. You'll see the first option as:- Authorize an Org and press enter.


Next, we need to select the environment we need to connect to:-


You can connect to a sandbox or a production environment and even specify a custom url. Here, I am going to connect with my dev org which is a production environment for me. Just select your environment and press enter.

Now, we need to enter the org alias i.e. a familiar username for your org. I personally keep the same name which I have entered as the project name. In my case it's:- SFDCStopOrg. Just enter the alias as shown in the below image and press enter.


It'll automatically open your default browser and the login page where you can login with your org credentials. After logging in, Salesforce DX CLI will ask for the required permissions as shown in the below image, click Allow.


It'll give Salesforce DX CLI the required permissions and will open your org. Switch back to VS Code and you'll see a message similar to the below image:-


As shown in the above image, you may now close the browser. Now, we've successfully authorized our org. The next step is to get all our classes, triggers and other required files in our IDE. To do so, open package.xml from the manifest subfolder present in the left pane. Right click anywhere in package.xml and click the option:- SFDX: Retrieve Source in Manifest from Org as shown in the below image:-


It'll retrieve all the metadata from your org which is specified in your package.xml file. For more information on how to create your package.xml, you can refer to the official salesforce documentation here:- https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta/manifest_samples.htm

Once, you've fetched all the data, you can see it under the force-app folder in the respective subfolders as shown below:-


We can open any class, lightning component, vf page or any other metadata by simply clicking on it and it'll show in the VS Code Editor as shown in the below image:-


You can do your changes and push the required changes to your org by right clicking and selecting:- SFDX: Deploy This Source to Org option. Similarly, to fetch the updated file from org to VS Code IDE, you can select SFDX: Retrieve This Source from Org. In order to get the whole org's refresh just move on to your package.xml, right click and select SFDX: Retrieve Source in Manifest from Org option.

So, that's all for this tutorial, give it a try and let me know in the comments down below if you're able to use VS Code for your development tasks and even if you face any issue while implementing the above process.

Happy Trailblazing..!!

42 comments:

  1. Great Tutorial!! I have a question. Is there any way to get the complete package.xml file using VSCode?

    ReplyDelete
    Replies
    1. Hi Gaurav,

      There is a VSCode extension named as:- Salesforce Package.xml Generator Extension for VS Code which will help you to generate package.xml dynamically within VSCode. You can download it here:- https://marketplace.visualstudio.com/items?itemName=VignaeshRamA.sfdx-package-xml-generator

      Delete
  2. Thank you for taking time to write these instructions out. Lifesaver!

    ReplyDelete
    Replies
    1. Glad to know that it helped wiggity :-) Make sure to share it too..!!

      Delete
  3. Kill the process running on port 1717 or use a custom connected app and update OauthLocalPort in the sfdx-project.json file.
    16:25:12.188 sfdx force:auth:web:login --setalias vscodeOrg --instanceurl http://login.salesforce.com --setdefaultusername ended with exit code 1

    ReplyDelete
    Replies
    1. Hey, this error is occuring because VSCode is trying to use port 1717 however, any other process is already running on that port. You can navigate to the sfdx-project.json file and add an entry as:- "OauthLocalPort" : "1919" or any other port number that maybe free in your system. Hope that helps :-) Thanks for reaching out.

      Delete
    2. Hi! Rahul,
      is it works without using custom connected app

      Delete
  4. I have authorised my production org, and the left hand pane looks identical to yours except I don't have the manifest folder with the package.xml in, how do I perform the last step?

    ReplyDelete
    Replies
    1. Hi, please make sure you've initially created the project using Create Project with Manifest option. You should have the manifest folder with package.xml inside it at that instant itself.

      Delete
    2. Yes, I realised my mistake, thanks!
      Would you happen to know how I can bring in the Salesforce Reports? I was hoping to use this to manipulate their folder locations (bulk moves). Previous guides suggested using Eclipse IDE but that's been retired now and replaced with this as far as I understand.

      Delete
    3. You can try adding the reports to the package.xml like:-

      <types>
      <members>unfiled$public/Merchandise_in_Stock</members>
      <name>Report</name>
      </types>
      <types>
      <members>*</members>
      <name>ReportType</name>
      </types>

      Use * for all reports, otherwise specify the name. Then you can right click again and click on:- SFDX: Retrieve Source in Manifest from Org to fetch the latest data.

      Delete
    4. Thanks for this. I have tried both * and foldername$public/* as members but no reports are downloaded. foldername$public/report_name works however for a single report. Any idea how to download all or all in one folder?

      Delete
    5. I just checked the docs and got to know that you can't use the wildcard * for reports, so I think you need to specify the name of each report in the package.xml, that's the only option:- https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta/meta_report.htm

      But that's also not an issue, we have a VSCode Extension for this, have a look at the third extension in this blog:- https://www.sfdcstop.com/2019/06/top-10-vscode-extensions-for-salesforce.html

      Delete
    6. That's helpful thanks. I managed to get them all downloaded. I tried to move just a couple of them in the file structure (per the Eclipse IDE approach) and then highlight and deploy them back to the server using the menu option but I got the message:
      sf:INVALID_OPERATION: INVALID_OPERATION: testLevel of NoTestRun cannot be used in production organizations
      I popped one of the commands into the terminal adding "-l RunLocalTests" and that appears to have worked okay. Is there any way I can add this additional switch to the resulting commands from the "SFDX: Deploy Source to Org" menu option so I can highlight a number of files and deploy at once and not manually enter commands for each file?

      Delete
    7. VSCode is not mainly built for production deployments and you cannot directly deploy code to production using SFDX without running any tests. If you are using a windows system, this might help you:- https://www.sfdcstop.com/2019/06/sfdx-deploy-tool.html

      Delete
    8. Happy to run tests, that's what the command did in VSCode's own terminal and the production deployment was successful. All I'm looking to do now is augment the commands generated via the menu in the UI to include this extra switch.
      I took a quick look at this tool you linked but I don't think it will provide me anything more useful that VSCode's terminal already does for this use case.

      Delete
    9. Yup, it's the same. It's just you don't need to copy and paste commands in terminal and you can use it to deploy easily from one org to another by setting it up only once.

      Delete
  5. Hi Rahul how can i connect multiple orgs using VS code? Do i just follow the same process for another org? Please let me know. Thanks.

    ReplyDelete
    Replies
    1. Hi, I haven't seen any option to authorize multiple orgs for the same source code. So, it's the same process if you want to connect multiple orgs. Each org will be linked to it's own project.

      Delete
  6. How Can I get a specific class to download ? Basically I want to download XML for this class - presenceUserConfigs

    https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta/meta_presenceuserconfig.htm

    ReplyDelete
    Replies
    1. Hi, it's already shown in the link you shared, you can include the same in package.xml with the name:- PresenceUserConfig

      Delete
  7. Excellent! This is exactly what I was looking for.

    ReplyDelete
    Replies
    1. Thanks for the feedback Chet, make sure to share it among others too :-)

      Delete

  8. display accounts detail table format using in grid view using lightning component.
    please tell me

    ReplyDelete
    Replies
    1. Use lightning datatable for the same:- https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example

      Delete
  9. -->display accounts in grid view using lightning.

    ReplyDelete
    Replies
    1. Use lightning datatable for the same:- https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example

      Delete
  10. Replies
    1. You're most welcome Anne. Happy to know that you liked it :-) Make sure to share it among others too..!!

      Delete
  11. Hi Rahul,
    I accidentally found this blog which contains the information is super useful and well written with screen shots.
    Thanks for sharing

    ReplyDelete
    Replies
    1. Glad to know that you liked it buddy :-) Keep learning, and do share it in your network..!!

      Delete
  12. Great tutorial. Worked perfectly. Thanks.

    ReplyDelete
    Replies
    1. Happy to know that RJ. Make sure to share it among your team :-)

      Delete
  13. Thanks for the step by step instruction.
    able to setup and running in less than 15 minutes.
    also shared with all my team members.
    finally entire team moved from eclipse force.com editor to VS code with your help.

    ReplyDelete
    Replies
    1. Wow...!! That's amazing. I am so happy to know that it helped :-)

      Delete
  14. Thanks buddy!!

    Could you please also create one blog for Gitlab CI/CD pipeline?

    ReplyDelete
    Replies
    1. Hi Piyush, sure buddy. I actually gave a live session on the same stuff at TrailheaDX India 2018. Will try to replicate that in the form of a blog. Meanwhile you can add a message on our group:- https://t.me/joinchat/LavReljDKkknR_k8cnM-HQ so that I keep a note of the same.

      Delete
  15. i have accidentally authorized my free developer account instead of my trial head play account, how can i unauthorized the developer account ?

    ReplyDelete
    Replies
    1. You can simply re-authorize the project with your trailhead org following the same steps.

      Delete