Construct provides its own built-in code editor based on CodeMirror to help you conveniently write JavaScript code in your project. However you may wish to use an external code editor, such as an industry-standard tool like VS Code. This is also necessary for using TypeScript. Construct has special features to help you use external editors, and this guide describes how they work.
save a folder project
First of all, make sure you save your project to a folder. This means all your project files, including your script files, are saved as individual files within the project folder, rather than all contained within a .c3p file. For more information see the section on project folders in Saving projects.
enable auto-reload
Once saved to a folder, right-click the main Scripts folder in the Project Bar, and select the Auto reload all on preview menu option. After doing that the menu option will appear with a tick to indicate the auto-reload mode is enabled.
Enabling this setting means that every time you preview in Construct, it will re-load all your script files from the project folder, ensuring any changes made by an external editor are loaded.
open external editor
Now you can open your script files in your favorite external code editing tool like VS Code. If the tool has an option to open a folder, you probably want to open the scripts subfolder in your project folder, as that is the folder that contains all your JavaScript code. Then you should be able to view and edit your project's script files.
make changes
Now try making a change in the external editor, save the change, and go to Construct and preview the project. The changes made in the external editor should be immediately reflected in preview.
When auto-reload mode is enabled, Construct also shows notifications when you preview indicating how many script files were changed. If you also have a script file open in Construct when you preview, Construct will also reload the file from the project folder to show its latest contents.