How to Open Lightning Web Component (LWC) files force to Open Separate Tab in Visual Studio Code (VSC)

Visual Studio Code is a awesome open source editor from Microsoft. By default, in Visual Studio Code, Lightning Web Component (LWC) files open in the same tab instead of Separate Tab.

Here is the workaround to achieve to force open the Lightning Web Component (LWC) files into separate tab in Visual Studio Code.

Lightning Web Component contain three defaults files like HTML, Javascript and meta.xml

For Example:


Default Visual Studio Code to open the file into same window/tab, to force to Open separate tab/new tab in visual studio code then Disable the Preview Mode from File -> Preferences -> Settings (Refer the below screenshots)


Settings -> Type “preview” in the search text field and uncheck the Enable Preview as highlighted.

Demo Video:- 


Written by 

3x Salesforce MVP | Platform Champion | 18x Salesforce Certified | MuleSoft Certified | 8x Trailhead Ranger | TechForce Services | Sydney | Australia

Leave a Reply

Your email address will not be published.