Test tour: MERN starter kit

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.

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

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}/*"
    }
}

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.

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

Navigation Menu

Repository navigation

Test tour: MERN starter kit #22277

Extensions required to use MERN fully with VS Code

Report

Some configuration examples

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Test tour: MERN starter kit #22277

Description

Activity

egamma commented on Mar 30, 2017

michelkaporin commented on Apr 7, 2017

Extensions required to use MERN fully with VS Code

Report

Some configuration examples

waderyan commented on Apr 7, 2017

weinand commented on May 9, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions