VisualStudioCodeでTypeScript開発 の変更点

更新 
#author("2025-03-18T04:40:32+00:00","default:administrator","administrator")
#author("2025-03-22T09:37:30+00:00","default:administrator","administrator")
[[プログラミング/p5js]]

* parcel を使って Visual Studio Code で Type Script で開発する [#a1235d78]

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
.vscode/launch.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: 82 (from 2010/06/03), today: 1, yesterday: 1