TypeScript製Webアプリの開発環境構築
pnpmの使用と、package.jsonに"type": "module"を書いてモジュールシステムとしてES Modulesを用いることを前提としています。 $ pnpm add -D typescript @types/node
code:tsconfig.json
{
"compilerOptions": {
"target": "ES2022",
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"outDir": "./tsc",
"noEmit": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"include": [
"./src/**/*",
"./scripts/**/*",
"./*.config.js",
"./*.config.cjs",
".eslintrc.cjs",
]
}
$ pnpm add react react-dom react-router-dom
$ pnpm add -D @types/react
$ pnpm add tailwindcss github:mgn901/tailwindcss-safe-area
テストツール
$ pnpm add -D @jest/globals jest esbuild-jest
code:jest.config.js
/** @type {import('jest').Config} */
const config = {
transform: {
'^.+\\.tsx?$': 'esbuild-jest',
},
collectCoverage: true,
coverageProvider: 'v8',
};
export default config;
$ pnpm add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier prettier husky lint-staged
package.jsonのnpm scriptsに次の内容を追加する。
code:json
{
"scripts": {
"prepare": "husky install",
"lint": "tsc -p tsconfig.json --noEmit && eslint --no-error-on-unmatched-pattern --cache --fix src scripts"
"format": "prettier --no-error-on-unmatched-pattern --write src scripts",
"test": "jest --passWithNoTests"
}
}
コミット前およびプッシュ前にlint-stagedを実行するように設定する。
Git Hooksを管理するツールであるhuskyと、Gitのステージ上のファイルを対象とするコマンドを実行できるlint-stagedを組み合わせると、コミット前やプッシュ前にコードフォーマットやLintを実行できる。リポジトリ内でコーディングルールやフォーマットを徹底させることができる。 $ pnpm exec husky add .husky/pre-commit "pnpm exec lint-staged -c pre-commit.lint-staged.config.js"
$ pnpm exec husky add .husky/pre-push "pnpm exec lint-staged -c pre-push.lint-staged.config.js"
code:.eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
overrides: [
{
env: {
node: true,
},
parserOptions: {
sourceType: 'script',
},
},
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: 'tsconfig.json',
},
rules: {
'import/extensions': 'off', 'import/prefer-default-export': 'off', 'import/no-relative-packages': 'off', 'react/function-component-definition': [
'error',
{
namedComponents: 'arrow-function',
unnamedComponents: 'arrow-function',
},
],
'react/react-in-jsx-scope': 'off', },
};
code:.prettierrc
{
"printWidth": 100,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"endOfLine": "lf"
}
code:pre-commit.lint-staged.config.js
export default {
'*.{js,jsx,ts,tsx}': [
() => 'pnpm run format',
],
};
code:pre-push.lint-staged.config.js
export default {
'*.{js,jsx,ts,tsx}': [
'pnpm run test',
() => 'pnpm run lint',
],
};