Vue3にESLintとPrettierを導入する

はじめに

チーム開発を意識して開発できるようにESlintとPrettierを導入してみました。

環境

MacBook Pro intel 2020
macOS Monterey バージョン12.6
Node.js 18.7.1
Vue 3.3.4
npm 9.8.1

ESlintのインストール

JavaScriptの静的解析ツールであるESlintと、VueとPrettierに必要なプラグインとパッケージもインストールします。

eslint: デフォルトのESlint
eslint-plugin-vue: ESlintのプラグイン、Vueをサポート
eslint-config-prettier: PrettierとESLint間のスタイルルールの競合を解消

npm install --save eslint eslint-plugin-vue eslint-config-prettier

Prettierのインストール

JavaScriptの自動フォーマッターであるPrettierをインストールします。

npm install --save-dev prettier

ESlintの設定ファイル

手動で設定ファイルを作成します。私はYAML形式で作成しました。
rulesにルールの上書きが可能です。今回は最低限必要そうな設定のみ記述しています。

.eslintrc.yml

extends:
    # eslintデフォルト推奨ルール
  - 'eslint:recommended'
    # vue3推奨のルール
  - 'plugin:vue/vue3-recommended'
    # prettierのルール
  - 'prettier'

env:
  browser: true
  es2021: true
  # setup関数内でのコンパイラマクロをサポート
  vue/setup-compiler-macros: true

parserOptions:
  ecmaVersion: 12

rules: {}

Prettierの設定ファイル

手動で設定ファイルを作成します。私はYAML形式で作成しました。
自動フォーマットのルールを記述します。

.prettierrc.yml

printWidth: 150
tabWidth: 2
semi: false
singleQuote: true
trailingComma: 'all'
endOfLine: 'lf'

スクリプトの記述

スクリプトを記述します。拡張子jsとvueがスクリプトの対象です。

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "format": "prettier --write 'src/**/*.{js,vue}'",
    "lint": "eslint --fix 'src/**/*.{js,vue}'",
    "fix": "npm run format && npm run lint",
    "test": "jest"
  },
  "dependencies": {
  },
  "devDependencies": {
  }
}

下記のコマンドでPrettierとeslintが実行されます。

npm run fix

あとがき

当たり前ですがfixしなければスクリプトは実行されません。commit前にfixするようにpre-commitを設定するのが良いと思います。

参考