技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

Nuxt3にEslintとprettierを導入する

Nuxt3にEslintとprettierを導入する

ESLintとPrettierはどちらもソースコードの品質を高めるツールになります。

ESLint:静的解析ツール。バグの可能性がある書き方を指摘する。

Prettier:コードフォーマッター。インデント、改行などを自動整形してくれる。

ESLintとPrettierの違いについて - 技術ブログ

1. Eslintの導入

1.1 必要パッケージのインストール

npm install --save-dev eslit eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
  • eslit -> ESLint本体
  • eslint-plugin-vue -> vueファイルを静的検証
  • @vue/eslint-config-typescript -> TSをESLintで検証するために必要なライブラリ
  • @typescript-eslint/parser -> TSをESLintで検証するために必要なライブラリ
  • @typescript-eslint/eslint-plugin -> TSをESLintで検証するために必要なライブラリ

1.2 .eslintrc.ymlの作成

.eslintrc.ymlにEslintの設定情報を記載していきます。

env:
  # windowやalertも含まれるたくさんのブラウザ用のグローバル変数を一気にglobals設定に登録してしまい、ESLintにチェックしなくてよいと伝える
  browser: true
  # ECMAScript2021を適用
  es2021: true
extends:
  # eslint-plugin-vueが推奨するルールを適用/https://eslint.vuejs.org/user-guide/#installation
  - 'plugin:vue/vue3-recommended'
  - '@vue/typescript/recommended'
  # ESLintが推奨するチェック項目でまとめてチェックする
  - 'eslint:recommended'
parserOptions:
  # parserOptionsのecmaVersionは、使用するECMAScriptのバージョンを指定します。envのes2021は指定しているため、それに合わせる
  ecmaVersion: 12
plugins:
  - vue
  - '@typescript-eslint'
rules: {}

1.3 package.jsonのscriptsにeslintの実行コマンドを指定

  "scripts": {
    ...
    "lint-fix": "eslint --fix --ext .ts,.js,.vue .",
  },

--fix は勝手に直しちゃうオプションなのでなしがいい場面もあるかも
--ext で範疇とする拡張子を選ぶ.
最後の . は現在のディレクトリ内を探して、という意味。 --ignore-path で .gitignore に書いてあるものは無視します。

2. Prettierの導入

2.1 必要パッケージのインストール

npm install --save-dev prettier @vue/eslint-config-prettier
  • prettier -> prettier本体
  • @vue/eslint-config-prettier -> ESLintのフォーマットのルールを無効にします。そのため、Prettierが整形した箇所に対してエラーを出さなくなります。

2.2 .prettierrc.ymlの作成

Prettierの設定ファイル.prettierrc.ymlを作成します

# 80文字で折り返す
printWidth: 80
# 半角スペースの数を2にする
tabWidth: 2
# ダブルクオテーションの代わりにシングルクオテーションを利用する
singleQuote: true
# 末尾のセミコロンを無しにする
semi: false

2.3 package.jsonのscriptsにprettierrcの実行コマンドを指定

  "scripts": {
    ...
    "format-fix": "prettier -w .ts,.js,.vue ."
  },

--w で上書き保存します

参考サイト

Vite + Vue3にESLintとPrettierを導入する

Nuxt 3 + Tailwind + esLint + Prettierの環境を作成する