React-native-windows: Add Windows configuration to VS Code's RN Tools

[kmelmon]

When installing VS Code's react-native-tools, you'll get configurations to run on Android/iOS, but there is no configuration to run on Windows. We should add that configuration. This will avoid the manual steps as outlined in the wiki. See: https://github.com/microsoft/react-native-windows/wiki/VS-Code-Debugging

The manual steps currently look like copy/pasting this into launch.json:
{
"name": "Debug Windows",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "windows"
}

Note that we may need to track this with a task in the VS Code github as well. Starting here to make it easier to track on the RN4W side.

[chrisglein]

It's possible you don't have react-native-windows set up so this needs to not do nothing. Could it be a prompt to direct the developer to RNW?
This would need to be an edit in the VSCode repo, not ours.

[nasadigital]

I have added the Windows configuration to the presets in the React Native extension.
If react-native-windows is not set up, the session fails with the following message: error Unrecognized command "run-windows".
If everything looks reasonable, I'll go ahead and edit the wiki.
Please let me know, if I missed anything!

[kmelmon]

I have added the Windows configuration to the presets in the React Native extension.
If react-native-windows is not set up, the session fails with the following message: error Unrecognized command "run-windows".
If everything looks reasonable, I'll go ahead and edit the wiki.
Please let me know, if I missed anything!

@nasadigital Would it be possible to add something in the plugin code to detect if react-native-windows is installed when running the new command and display something to the user to let them know they need to first install it? This would help new react-native-windows customers avoid potential confusion.

I'd like to see a message displayed like:
It appears you don't have react-native-windows installed. Go to https://github.com/microsoft/react-native-windows#getting-started for more info.

[nasadigital]

@nasadigital Would it be possible to add something in the plugin code to detect if react-native-windows is installed when running the new command and display something to the user to let them know they need to first install it? This would help new react-native-windows customers avoid potential confusion.

I'd like to see a message displayed like:
It appears you don't have react-native-windows installed. Go to https://github.com/microsoft/react-native-windows#getting-started for more info.

@kmelmon Makes sense, let me give it a go!
How would I go about checking whether react-native-windows is installed? Is checking for the 'rnpm-plugin-windows' dependency sufficient or is it more reasonable to check if a windows directory exists in the project root?

[acoates-ms]

I'd do a require.resolve('react-native-windows', {paths: [ pathOfTheProject ] }); with a try catch to see if it succeeeds. The rnpm-plugin-windows dependency is optional, its really just an installation helper, so isn't a good thing to check.

[nasadigital]

Sounds good! I'll chat with RN extensions folks and send out a PR promptly.

[nasadigital]

With the generous help of RN extension folks, a more helpful message is shown to the user if they try to debug windows and it seems they haven't installed the 'react-native-windows' package.
If everything looks reasonable, I'll go ahead and edit the wiki.

[kmelmon]

Thanks @nasadigital! #1191 looks good, feel free to edit the wiki.

[SounD120]

Hi @kmelmon . React Native Tools v0.14.0 with Debug Windows scenario just have been released.

[nasadigital]

@kmelmon I didn't have permissions to edit the wiki so I asked @savatia to check in the changes.
Let me know if there is anything else I can do.

[kmelmon]

@nasadigital I can add you as a core contributor. First I'll need you to link your github account to the Microsoft org. Go here: https://opensource.microsoft.com/link

[nasadigital]

@kmelmon Thank you! I linked the account and the wiki is updated: https://github.com/microsoft/react-native-windows/wiki/VS-Code-Debugging

[chrisglein]

@nasadigital @kmelmon Sounds like everything is wrapped up here? Safe to close this issue?