Test tour: MERN starter kit

[egamma]

Test Tours/Exploratory Testing. We will use a starter kit and use it for a 'GuideBook Tour'. The final goal would be to show a cool demo of how you can use VS Code to do MEARN.

You have discovered the MERN starter kit http://mern.io/ and want to get started with it using Code

• do you get the extension recommendations (e.g. eslint)?
• set it up for development.
  • setup debugging
  • setup tasks if applicable
  • eslint is already setup, check the linting behaviour when using the vscode-eslint extension.
  • check Intellisense behaviour
• start implement something fun
• are there additional JSON schemas that should be defined/used to simplify development
• check that all artifacts/file types have syntax coloring
• think of demo of some of the VS Code goodness

Link issues you discover to this issue.
Share findings in this issue.

[egamma]

• Debugger setup tuning for using VS Code with the mern.io starter kit #22378 Debugger setup tuning for using VS Code with the mearn.io starter kit debug
• No IntelliSense for Express in MERN starter kit #23317 No IntelliSense for Express in MERN starter kit

[michelkaporin]

Extensions required to use MERN fully with VS Code

Tasks: npm support,
Linting: ESLint
Chrome Debug: Debugger for Chrome

Report

• Extension recommendations include both of the extensions, however they are not at the top of the recommendation list. Maybe this can be improved?
• eslint linting behaviour works well, no problems found with it. ✔️
• Intellisense works fine. ✔️
• No additional JSON schemas needs to be defined to simplify development, as to my mind. ✔️
• Syntax colouring. ✔️

Some configuration examples

• tasks.json can be setup with 'npm support' module and tasks work fine for test, watch and lint commands. Example:

{
    "taskName": "lint",
    "args": ["run", "lint"]
}

• Chrome debug can be setup the following way:

{
    "name": "Launch localhost", 
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:8000",
    "webRoot": "${workspaceRoot}",
    "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*"
    }
},
{
    "name": "Attach localhost",
    "type": "chrome",
    "request": "attach",
    "port": 9222,
    "url": "http://localhost:8000",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
    "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*"
    }
}

[waderyan]

Issues referenced below.

Note - for the extension candidate issues, I opened this docs issue. We should see if we can make them more discoverable to extension authors.

[weinand]

A first cut of a "MERN Recipe" is available here: https://github.com/weinand/vscode-recipes/tree/master/MERN-Starter