How do I insert lightning web component child templates and their JS files using SFDX?

Question

Context

I have a parent component in vscode.

parent.html

<template>
    <my-child-component></my-child-component>
</template>

parent.js

import { LightningElement, api } from 'lwc';

export default class Parent extends LightningElement {}

I have a child component in different files using SFDX vscode.

myChildComponent.html

<template>
    <div>Hello World</div>
</template>

myChildComponent.js

import { LightningElement, api } from 'lwc';

export default class Parent extends LightningElement {}

My vscode file structure looks like this:

--force-app
--|main
---|default
----|aura
----|lwc
-----|app
------|parent.html
------|parent.js
------|myChildComponent.html
------|myChildComponent.js
----|.eslintrc.json
----|jsconfig.json

My jsconfig.json looks like this.

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "baseUrl": ".",
        "paths": {
            "c/player": [
                "app/parent.js",
            ]
        }
    },
    "include": [
        "**/*",
        "../../../../.sfdx/typings/lwc/**/*.d.ts"
    ]
}

Question

How do I add the myChildComponent into the parent component using SFDX and vscode? I have tried running the code as is above, and I have tried adding this into the jsconfig.json

"paths": {
            "c/player": [
                "app/parent.js",
                "app/myChildComponent.js"
            ]
        }

Answer 1

That's not how LWC works. Each component should be in its own folder. That is, your file structure would look more like this:

-- force-app
--| main
---| default
----| lwc
-----| parent
------| parent.html
------| parent.js
-----| myChildComponent
------| myChildComponent.html
------| myChildComponent.js

Check out the docs and look at an example, more of which you can find on the Trailhead.

Answer 2

@sfdcfox gave an awesome answer/guidelines. For others who might have a similiar question I have some subtle points that I missed.

The file structure should include meta.xml files for each component.

-- force-app
--| main
---| default
----| lwc
-----| parent
------| parent.html
------| parent.js
------| parent.js-meta.xml
-----| myChildComponent
------| myChildComponent.html
------| myChildComponent.js
------| myChildComponent.js-meta.xml

The parent XML can look like this:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parent">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

The myChildComponent XML can look like this:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="myChildComponent">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
</LightningComponentBundle>

Also, one addtional small point I found. In the parent.html reference to myChildComponent should be wrapped in a div tag.

<template>
  <div>
    <c-myChildComponent></c-myChildComponent>
  </div>
</template>