😊

ExpressにてESLint、Prettierを設定してみた

2024/12/27に公開

JavaScript

設定

ESLintの設定
最初に必要なパッケージを追加する
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

コマンド実行後にできたファイルを編集
例

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "@typescript-eslint/eslint-plugin";
import tsparser from "@typescript-eslint/parser";
import prettierConfig from "eslint-config-prettier";
import prettierPlugin from "eslint-plugin-prettier";

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    files: ["**/*.{js,mjs,cjs,ts}"], // 対象ファイルのパターンを指定
  },
  {
    languageOptions: {
      parser: tsparser, // TypeScript用パーサーを指定
      globals: globals.browser, // グローバル変数の設定
    },
  },
  pluginJs.configs.recommended, // ESLintの推奨設定を拡張
  {
    plugins: { "@typescript-eslint": tseslint, prettier: prettierPlugin }, // PrettierとTypeScript ESLintプラグインを追加
  },
  ...tseslint.configs.recommended, // TypeScript ESLintの推奨設定を拡張
  prettierConfig, // Prettierの設定を追加
  {
    rules: {
      // PrettierのルールをESLintでエラーとして扱う
      "prettier/prettier": "error",
      // その他のカスタムルールの定義
      semi: ["error", "always"], // セミコロンを常に使用
      quotes: ["error", "single"], // シングルクオートを使用
      "no-console": "off", // コンソールの使用を許可（デフォルトは警告）
      "@typescript-eslint/no-unused-vars": ["warn", { vars: "all", args: "after-used", ignoreRestSiblings: false }], // 未使用変数の警告
    },
  },
];

Prettierの設定
先ほどコマンドを叩いたので、あとは.prettierrcを手動で作成し、ファイル編集するだけ
例

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

package.jsonの設定
package.jsonを以下のように修正

"format": "prettier --write \"**/*.{js,ts,jsx,tsx,json,md}\""

その後、コマンドを叩くだけでプロジェクト内のコード整形ができる
yarn run format
or
npm run format

余談

コマンド叩いて成型できるのめっちゃテンション上がる

設定

余談

Discussion