Dockerで立てたNode.js, TypeScript環境にESLintとprettierを導入して、VSCode保存でコード整形も行う

FROM node:lts-stretch-slim
WORKDIR /src

version: "3"

services:
  app:
    build: .
    container_name: stripe-practice
    ports:
      - "8080:8080"
    working_dir: /src
    volumes:
      - ./:/src
    # docker run -iを意味する
    stdin_open: true
    # -tを意味する
    tty: true

npm init

npm install typescript

npm i @types/node

npx tsc --init

npx tsc

npm install express
npm install -D @types/express

import express from "express";
const app: express.Express = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

//CROS対応（というか完全無防備：本番環境ではだめ絶対）
app.use(
  (req: express.Request, res: express.Response, next: express.NextFunction) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "*");
    res.header("Access-Control-Allow-Headers", "*");
    next();
  }
);

app.listen(8080, () => {
  console.log("Start on port 8080.");
});

type User = {
  id: number;
  name: string;
  email: string;
};

const users: User[] = [
  { id: 1, name: "User1", email: "user1@test.local" },
  { id: 2, name: "User2", email: "user2@test.local" },
  { id: 3, name: "User3", email: "user3@test.local" },
];

//一覧取得
app.get("/users", (req: express.Request, res: express.Response) => {
  res.send(JSON.stringify(users));
});

npm install prettier
npm install eslint

# eslintのprettierと共存する設定とTypeScriptに対応する設定をインストールする
npm install eslint-config-prettier
npm install @typescript-eslint/eslint-plugin

# eslintの初期化をする。色々聞かれるので選択していく。esrintrc.jsが作成される
npx eslint --init

# eslintで静的解析する エラーがたくさん出る。
npx eslint index.ts

# 上記のエラーをなくしてくれる
npx eslint --fix index.ts

# コードを整形してくれるインデントを揃えたりしてくれる。
prettier --write index.ts

{
  "printWidth": 120,
  "singleQuote": true,
  "semi": false
}

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    // 環境構築した時点ではReactの導入はしてないのでコメントアウトした
    // 'plugin:react/recommended',
    "airbnb",
    "prettier",
    // 下記を追加している記事があるが2021/8/4の時点では必要なくなった。
    // prettierの方で統一された。
    // 'prettier/@typescript-eslint'
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
    project: "./tsconfig.json",
  },
  plugins: [
    // 環境構築した時点ではReactの導入はしてないのでコメントアウトした
    // 'react',
    "@typescript-eslint",
  ],
  root: true,
  rules: {
    // "quotes": ["error", "double"]
    // console.logがコードに含まれるとエラーになるので無視するようにルールを追加
    "no-console": "off",
  },
};

/.eslintrc.js
/index.js

// tsconfigを拡張してTypeScript用のESLintの設定を追加してる。
// なので下記の設定をtsconfigに設定すれば、このファイルを生成する必要はない。
// ただここに書いているのはtsにコンパイラするのではなく、あくまでESLintの静的解析の対象か対象外に
// なるファイルの事指していると思われる。
{
  "extends": "./tsconfig.json",
  // コンパイルする対象ファイルを設定する
  "include": ["*.ts"],
  // コンパイルを除外するファイルを設定する。
  "exclude": ["node_modules", "dist"]
}

{
  // eslintとprettierrcの設定
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.lineNumbers": "on",
  "eslint.packageManager": "npm",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "npm.packageManager": "npm",
  "typescript.enablePromptUseWorkspaceTsdk": true
}