React VSCode Stop Auto Close Tag - Javascript

When coding with React in Visual Studio Code, you may notice that the editor automatically closes HTML tags for you. While this can be convenient in some cases, it can also be a nuisance when you're typing JSX and the editor keeps trying to close your tags prematurely.

Solution - Disable Auto Close Tags

To disable the auto close tag feature in VSCode, you can go to File > Preferences > Settings (or use the keyboard shortcut Ctrl+,) and search for "auto close tags". Then, uncheck the box labeled "Auto Closing Tags".

// Disable auto close tags in VSCode
"html.autoClosingTags": false

Solution - Use a Different Extension

If you prefer to keep the auto close tag feature but want to only disable it for specific file types (such as JSX), you can use a different extension like Auto Close Tag which lets you configure which file types to exclude.

// Configure Auto Close Tag to exclude JSX
"auto-close-tag.excludedFileTypes": ["jsx"]

Conclusion

By disabling the auto close tag feature or using a different extension that allows you to configure exclude rules, you can improve your workflow and reduce frustration when coding React in Visual Studio Code.