VSCode+TypeScript+ESLint+Prettierの環境立ち上げ方法まとめ

前提

以下の環境のプロジェクトのセットアップをしたい。

• VSCode - 開発環境
• TypeScript - 型つきJavaScript
• ESLint - JS/TSの静的解析
• Prettier - コードフォーマット
• yarn - パッケージマネージャー

手順

VSCodeの設定

拡張機能インストール

• ESLint (dbaeumer.vscode-eslint)
  • ESLintがVSCodeと連携するために必要
• Prettier - Code formatter (esbenp.prettier-vscode)
  • PrettierがVSCodeと連携するために必要
• Error Lens (usernamehw.errorlens)
  • エラーが見やすくて便利

.vscode以下の設定ファイル作成

.vscode/extensions.json

上記で入れた拡張機能を他の入れてないメンバーに促せるようにする

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "usernamehw.errorlens",
  ]
}

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2
}

.gitignore作成

node_modules/

package.json作成

yarn init -y

パッケージインストール

yarn add --dev typescript eslint prettier eslint-config-prettier

tsconfig.json作成

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
  },
  "exclude": ["node_modules"],
  "include": [
    "**/*.ts",
  ],
}

.eslintrc.json作成

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
  }
}

.prettierrc作成

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": false,
  "endOfLine": "lf"
}

（参考）package.jsonの中身

{
  "name": "langx-firebase-sdk",
  "version": "1.0.0",
  "main": "index.js",
  "author": "My Name <[e-mail]>",
  "license": "MIT",
  "devDependencies": {
    "eslint": "^8.47.0",
    "eslint-config-prettier": "^9.0.0",
    "prettier": "^3.0.2",
    "typescript": "^5.1.6"
  }
}

注意

• eslint-plugin-prettierは入れない
  • ESLintの「静的解析」の機能にPrettierのルールを連携させる＝Prettierに従っていないとESLintに怒られるようになる。
  • この記事によると、Prettierまで怒られるのは煩わしいので非推奨になっているとのこと

参考