What’s this file?

Description of files/directories in templates.

.vscode directory

This directory contains configuration specific to VS Code.

• Each time you save the code you are editing, Prettier formats it and ESLint (if used) fixes some errors. This automatic behavior is enabled by .vscode/settings.json.

  You might also have your own settings that globally apply to all of your projects, but the local ones (in .vscode of each project) will override the global ones

  By the way VS Code has also its own default formatter. In many cases Prettier might be more useful but sometimes you might rather prefer the default one.

• .vscode/tasks.json defines the default build task invoked by Ctrl + Shift + B or ⇧⌘B. See also the Tips.

LICENSE

Each template contains a LICENSE file, and its content is Creative Commons Zero v1.0 Universal (CC0-1.0 in short). This means that you can copy and use the template without any restrictions.

Other related files:

• The package.json file also has a license field and its value should be consistent with the LICENSE file. See also the documentation of package.json.
• Templates using Rollup also attach a @license tag when generating the output code (this is configured in the rollup.config.js file).

If you create a sketch using one of these templates and want to publish it including the code:

• You may want to remove the license (or attach another one instead) to protect your own code.
• There are several open source licenses and CC0 is one of the least restrictive. It may also take a little time to learn about copyright; let’s check them out.

.gitignore

This file is for specifying which files are to be ignored by Git.

In case you don’t use Git, you won’t need that file as well.

package.json

This file is necessary for using npm or other package managers. It contains several metadata including package dependencies.

It may also contain some user-defined scripts (called “npm scripts”), which are defined in the scripts field and can be run with command-line npm run (command name).

Some templates use TypeScript and/or Rollup for building a JavaScript file to be run on browsers, and this process is programmed with npm scripts.

pnpm-lock.yaml

This file is generated by pnpm (see also the Tips).

If you don’t use pnpm, you can remove that file. When installing dependencies, the default npm will generate package-lock.json instead.

These lock files may not be important for you but google around it if you’re curious.

style.css

This CSS file determines the visual appearance of index.html.

In each template, style.css removes margin/padding and sets display: block for the canvas. This is useful if you create sketches that fit to the entire window.

.eslintrc.json

Configuration for ESLint.

ESLint is highly configurable; here you can see a long list of rules.

Each template is designed to use Prettier for formatting code and do not enable ESLint rules that only affect the appearance of the code.
However, the lines-around-comment rule is enabled, because the behavior of this rule is not covered by Prettier. Unfortunately a TypeScript version of this rule does not exist at the time writing this.

tsconfig.json

Configuration for TypeScript.

This file will automatically referred by TypeScript compiler.

rollup.config.js

Configuration for Rollup.

If you run the rollup command with --config option and do not provide any path, Rollup will refer to rollup.config.js.