Zenn
🍣

eslint に prettier を連携

2023/03/26に公開
ESLint
JavaScript
Prettier
tech

対象読者

  • JavaScript を使う方
  • Node.js を使う方
  • eslint を使う方

prettier 自体は他の言語でも使えるのですが、チェックしてないので対象読者を絞っています。

今回の記事は前回の eslint 設定が完了している箇所からの続きになりますので、前回の続きから追記になります。

prettier とは

今回は prettier というフォーマッターを eslint に対応させていきたいと思います。

このフォーマッターですが、しっかり設定しないと eslint のフォーマットとバッティングすることがしばしばあります。

今回は Node.js をターゲットに解説していきます。

導入

Prettier をインストール

npm install --save-dev prettier eslint-config-prettier

eslint-config-prettier とは

ESlint と prettier の設定を併用する時に使用する。
これを使うことで ESLint のフォーマット関連のルールを無効にできます。

prettier の設定

prettierrc.json

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

上から

  • 改行が１２０文字(デフォルト：80)
  • 文字列はシングルクォーテーションで統一(デフォルト：ダブルクォーテーション)
  • セミコンロンなし(デフォルト：あり)

という設定にしています。

また package.json 内に書くこともできます。

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.30.5",
    "@typescript-eslint/parser": "^5.30.5",
    "eslint": "^8.19.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.2.4",
    "eslint-plugin-promise": "^6.0.0",
    "prettier": "^2.7.1"
  },
  // ★以下を追記
  "prettier": {
    "printWidth": 120,
    "singleQuote": true,
    "semi": false
  }
}

eslint に設定

.eslintrc.js

module.exports = {
  env: {
    es2021: true,
    node: true
  },
  extends: [
    'standard',
    'prettier' // ★こちらを追記
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  }
}

★ の行を追記しています。

補足
extends は下に書かれているもので上書きされていくので、prettier を一番したに追記しています。

実行

shell

npx prettier --write src/*.ts

package.json にコマンドを追加

npm コマンドで実行できるようにする設定です。

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
		"format": "prettier --write src/*.ts" // ★こちらを追記
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.30.5",
    "@typescript-eslint/parser": "^5.30.5",
    "eslint": "^8.19.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.2.4",
    "eslint-plugin-promise": "^6.0.0",
    "prettier": "^2.7.1"
  },
  "prettier": {
    "printWidth": 120,
    "singleQuote": true,
    "semi": false
  }
}

★ の行を追記しています。

この対応を入れると以下のコマンドでフォーマットできます。

shell

npm run format

おわりに

さて、今回でいい感じに prettier が動いていい感じにソースコードのフォーマットができたかと思います。
次回は React・Next を使う時の prettier 設定について書いていきます。

参考文献

ESLint + Prettier を導入した TypeScript 開発環境

Typescript 環境で、ESLint と prettier 入れてみた

Discussion