VisualStudioCodeでTypeScript開発 の履歴(No.3)

更新

プログラミング/p5js

parcel を使って Visual Studio Code で Type Script で開発する†

https://ics.media/entry/210129/ こちらの記事を参考にしました。

以下の準備で parcel をサーバーにして chrome でデバッグまで行えます。

Type Script で書けると安心感が違いますね。

package.json

LANG:json
{
  "private": true,
  "scripts": {
    "dev": "parcel src/index.html --open",
    "build": "parcel build src/index.html",
    "clear": "rm -rf dist .parcel-cache",
    "lint": "prettier --write . && eslint -c eslint.config.mjs ."
  },
  "devDependencies": {
    "@types/eslint": "^9.6.1",
    "@types/p5": "^1.7.6",
    "esbuild": "^0.25.0",
    "eslint": "^9.21.0",
    "eslint-config-prettier": "^10.0.1",
    "globals": "^16.0.0",
    "parcel": "^2.13.3",
    "prettier": "^3.5.2",
    "typescript": "^5.7.3",
    "typescript-eslint": "^8.24.1"
  },
  "dependencies": {
    "p5": "^1.11.3"
  }
}

eslint.mjs

LANG: js
import js from '@eslint/js';
import ts from 'typescript-eslint';
import prettier from 'eslint-config-prettier';
import globals from 'globals';

/** @type {import('eslint').Linter.Config[]} */
export default [
  js.configs.recommended,
  ...ts.configs.recommended,
  prettier,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
  },
  {
    ignores: ['dist/'],
  },
];

.prettierrc

LANG: js
{
  "useTabs": false,
  "singleQuote": true,
  "quoteProps": "consistent",
  "trailingComma": "es5",
  "printWidth": 100
}

.prettierignore

# Package Managers
package-lock.json
pnpm-lock.yaml
yarn.lock

.gitignore

node_modules
/.parcel-cache
/dist

style.css

LANG: css
html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

main.ts

LANG: typescript
import p5 from 'p5';

export const sketch = (p: p5) => {

  p.setup = () => {
    const c = p.createCanvas(400, 400);
 };

  p.draw = () => {
    p.fill(220);
    p.rect(0, 0, 400, 400);
    p.line(0,0,400,400);
  };
};

sketch(p);

index.html

LANG: html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello p5</title>
    <script src="main.ts" type="module"></script>
  </head>
  <body>
    <h1></h1>
    <div id="p5wrapper" style="position: relative"></div>
  </body>
</html>

.vscode/lounch.json

LANG: js
{
  // https://parceljs.org/recipes/debugging/
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:1234",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "/__parcel_source_root/*": "${webRoot}/*"
      }
    }
  ]
}

tsconfig.json

LANG: json
{
  "compilerOptions": {
    "lib":["es2023", "dom"],
    "esModuleInterop": true,
  }
}
Counter: 72 (from 2010/06/03), today: 1, yesterday: 1