📖

Node.js + ESLint + Prettier + TypeScript の初期設定

2021/08/26に公開約8,200字

npm initでプロジェクト初期化

プロジェクトディレクリを作成して、そのディレクトリ内で以下のコマンドを実行します。

npm init -y
mkdir src
touch src/index.ts

TypeScript の実行環境を作る

以下のコマンドを実行します。

npm i -D typescript ts-node ts-node-dev @types/node
npx tsc --init

package.jsonscripts に以下を登録します。

package.json
"scripts": {
    "dev": "ts-node-dev --respawn ./src/app.ts",
    "start": "ts-node --transpile-only ./src/app.ts",
}

ESLint と Prettier を導入する

ESLint のインストール

npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npx eslint --init

設定内容は以下の通り。

You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) y
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

Prettier のインストール

ESLint はコードの正しさを保つのに対し、 Prettier はコードの読みやすさを保つためのツールです。

npm install -D prettier eslint-config-prettier
touch .prettierrc.js

.prettierrc.jsに以下をコピペします。

.prettierrc.js
module.exports = {
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 100,
  semi: false,
}

eslint-config-prettierは ESLint のルールのうち、Prettier と相容れないものを無効化する共有設定です。
eslint-plugin-prettierは Prettier のルールを ESLint のルールに統合するためのプラグインです。

.eslintrc.js'prettier を追加します。

.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
+    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  }
}

コマンドで Linter、 Formatter を実行するために、package.json に以下を追加します。

package.json
  "scripts": {
    "dev": "ts-node-dev --respawn",
+    "lint": "eslint './src/**/*.{js,jsx,ts,tsx}'",
+    "lint:fix": "eslint --fix './src/**/*.{js,jsx,ts,tsx}'",
+    "format": "prettier --check ./src",
+    "format:fix": "prettier --write ./src"
  },

"scripts"にも書いていますが、--checkオプションをつけて実行すると、Prettier はコードの内容をチェックするだけで整形はしません。

--writeオプションをつけると、.prettierrc.prettierrc.js)の設定に基づいてコードが整形されます。

Node + express のプロジェクトを始める場合

npm i express
npm i -D @types/express

WebStorm の自動フォーマットの設定

私の場合は WebStorm を使っているので、 WebStorm の設定について記載しますが、 Visual Studio Code にも同様の機能があります。

WebStorm > Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint

WebStorm > Preferences > Languages & Frameworks > JavaScript > Prettier

参考

React Native を TypeScript + ESLint + Prettier + Storybook で環境構築

E2E テスト

Playwright をインストールします。

npm i -D @playwright/test
npx playwright install

# スクレイピングなどに playwright を使う場合
npm i playwright

参考

Getting Started - Playwright

単体テスト

npm i jest @types/jest ts-jest -D
touch jest.config.js
jest.config.js
module.exports = {
  "roots": [
    "<rootDir>/src"
  ],
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
}

ここまでの作業をまとめてスクリプトで実行する

setup.sh
#!/bin/zsh

npm init -y
mkdir src
touch src/index.ts

npm i -D typescript ts-node ts-node-dev @types/node

npx tsc --init
npm i -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
npx eslint --init

npm install -D prettier eslint-config-prettier
touch .prettierrc.js

gibo dump node > .gitignore

cat << EOF > .prettierrc.js
module.exports = {
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 100,
  semi: false,
}
EOF

cat << EOF

.eslintrc.js
  extends: [
    'standard',
    'prettier',
  ],

package.json
  "scripts": {
    "dev": "ts-node-dev --respawn ./src/index.ts",
    "start": "ts-node --transpile-only ./src/index.ts",
    "lint": "eslint './src/**/*.{js,jsx,ts,tsx}'",
    "lint:fix": "eslint --fix './src/**/*.{js,jsx,ts,tsx}'",
    "format": "prettier --check ./src",
    "format:fix": "prettier --write ./src"
  },
EOF

参考

Jest - TypeScript Deep Dive

Node.js のバージョンを固定する

プロジェクトのルートディレクトリに .node-version を作成します。

touch .node-version

.node-version ファイルに Node.js のバージョンを記載します。

ディレクトリ構造

Node + Express で API サーバーを作る場合

Project structure for an Express REST API when there is no "standard way" を参考にする場合。

cd src
mkdir {controllers,db,routes,services,tests,utils}
touch {controllers/index.ts,db/index.ts,routes/index.ts,services/index.ts,utils/index.ts}

A better project structure with Express and Node.Js を参考にする場合。

cd src
mkdir {controllers,routes,models,middleware}
touch {controllers/index.ts,routes/index.ts,models/index.ts,middleware/index.ts}

Node.js + express サーバーを動かす

src/app.ts
import express from 'express'

const app: express.Express = express()

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.listen(3000, () => {
  console.log('Node.js app listening on port 3000!')
})
 $ npm run dev

ブラウザで http://localhost:3000/ を叩くと Hello World が表示されます。

環境変数を利用する

$ npm install dotenv --save
$ touch .env
TEST_ENV='This is test config!'
src/app.ts
import dotenv from 'dotenv'

dotenv.config()
const env = process.env.TEST_ENV
console.log('env:', env) // env: This is test config!

cron を利用する

$ npm i cron
$ npm i -D @types/cron
services/cronService.ts
import { CronJob } from 'cron'

export const useCronService = () => {
  const cronJob = new CronJob('10 * * * * *', () => {
    console.log('Hello Cron!')
  })

  return {
    cronJob,
  }
}

参考

How to make a Cron job for a typescript class method

React で TypeScript のプロジェクトを始める

$ npx create-react-app my-type-app --template typescript

React Hooks ESLint プラグイン

$ npm install eslint-plugin-react-hooks --save-dev
// Your ESLint configuration
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

フックのルール

モックサーバーの準備

$ npm i json-server --dev
$ npx json-server --watch db.json --port 3100

  \{^_^}/ hi!

db.json
{
  "todos":[
    {
      "id": 1,
      "content": "Install Create React App",
      "done": true
    },
    {
      "id": 2,
      "content": "モックサーバーを準備する",
      "done": false
    },
    {
      "id": 3,
      "content": "継続的デプロイの準備をする",
      "done": false
    }
  ]
}

http://localhost:3100/todosで JSON を取得できるようになります。

GitHubで編集を提案

Discussion

ログインするとコメントできます