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:

helloWorld.html
helloWorld.js
helloWorld.js-meta.xml

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 

Salesforce MVP | Lightning Champion | 16x Salesforce Certified | Application Architect | 6x Trailhead Ranger | Techforce Services | Australia

Leave a Reply

Your email address will not be published. Required fields are marked *

*