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 で上書き保存します
