Vue.js の開発にESLint + Prettier + Vetur を導入してみた

はじめに

vue.jsの学習に伴い、タイトルにあるように静的解析ツールなどを導入してみたのですが、色々苦労したのでその振り返りです。
エディタはVscodeを使用しています。

Vetur、ESlint、PrettierをVscodeに導入する

ESLintとPrettierを別々に実行するようなプロセスで設定を行っていきます。

marketplace.visualstudio.com

marketplace.visualstudio.com

marketplace.visualstudio.com

ESLint と Prettierをプロジェクトにインストールする

yarn add -D eslint prettier eslint-plugin-vue eslint-config-prettier

eslint-config-prettierはESLintとPrettierの競合する箇所を取り除いてくれます。
eslint-plugin-vueを導入する理由は、 VeturのLinterとしての機能をESLintに委譲したい為です。

jsconfig.jsonを作成する

Vue CLIを使用し、Typescriptを使用していない場合はjsconfig.jsonをプロジェクトの直下に配置します。

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "baseUrl": "./",
    "paths": {
      "@/*": ["components/*"]
    }
  },
  "include": [
    "src/**/*.vue",
    "src/**/*.js"
  ]
}

VeturのLinterとしての機能をESLintに委譲する為の設定を行う

公式を参考にして、vscodeのsettings.jsonに下記を追加します。

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
"vetur.validation.template": false

.eslintrcjsonlを作成する

eslintrc.jsonをプロジェクト直下に配置します。 注: Vue2系を使用した際の設定です。

{
  "env": {
      "browser": true,
      "es6": true
  },
  "extends": [
      "eslint:recommended",
      "plugin:vue/base",
      "plugin:vue/essential",
      "prettier"
  ],
  "parserOptions": {
      "ecmaVersion": 12,
      "sourceType": "module"
  }
}

eslint-plugin-vueの詳細な設定はこちらを参照してください。

.prettierrc.ymlを作成する

.prettierrc.ymlをプロジェクト直下に配置します。

singleQuote: true
printWidth: 10

こちらは適宜必要なルールを追加してください。

settings.jsonに設定を追加する

作業を行っているファイルを保存した際に、自動でESLintとPrettierが実行されるようにします。
その他諸々の設定も追加しています。

// コードフォーマッターとしてprettierを指定する。
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
// ファイル保存時にコードフォーマッターが実行される。
  "editor.formatOnSave": true,
// ファイル保存時にESLIntが実行される。
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },

### 動作確認 まずはPrettierとESLintのルールが重複していないか以下のコマンドで確認します。

yarn  eslint-config-prettier path/to/main.js

次に、Prettierの動作確認をします

yarn prettier --check path/to/main.js

最後にESLintの動作確認をします

yarn eslint path/to/main.js

エラーが発生しなければ、以上で設定は完了です!!