2019-2-16

VSCode+Vue+ESLintで保存時フォーマット+コミット時にリント

Prettier も組み合わせて使いたかったけど諦めた。組み合わせて使おうとしたらコミット時の整形内容と、エディタで保存時にかかる整形内容が何故か異なってしまって気持ちが悪かった。

なので、ESLint でカバー可能な範囲のフォーマットだけ行うことに。

手順

• 保存時に自動フォーマットされるようにする
  • eslintとeslint-plugin-vueをインストール
  • .eslintrc.jsを配置
  • VSCode に ESLint プラグインインストール
  • VSCode のsetting.jsonを弄って保存時フォーマットを有効に
• コミット時にフォーマット&リントされるようにする
  • huskyとlint-stagedをインストール
  • package.jsonを弄る

保存時に自動フォーマットされるようにする

eslintとeslint-plugin-vueをインストール

npm i -D eslint eslint-plugin-vue

.eslintrc.jsを配置

設定の一例

module.exports = {
  env: {
    es6: true,
  },
  extends: ['standard', 'plugin:vue/recommended'],
  plugins: ['vue'],
  parserOptions: {
    // 「sourceType: 'module'」にしないと、imoportがエラーになる
    // デフォだとWebpackとか使っていない環境向けになってるとか多分そういうあれ
    // https://eslint.org/docs/user-guide/configuring
    sourceType: 'module',
  },
  rules: {
    // ケツカンマは複数行で必ずついていて欲しい
    'comma-dangle': ['error', 'always-multiline'],
  },
}

VSCode に ESLint プラグインインストール

ESLintで検索すれば出てくる。

VSCode のsetting.jsonを弄って保存時フォーマットを有効に

以下の内容を追記する。

;[
  (~'eslint.autoFixOnSave': true),
  ('eslint.validate': [
    {
      language: 'javascript',
      autoFix: true,
    },
    {
      language: 'vue',
      autoFix: true,
    }
  ]),
]

コミット時にフォーマット&リントされるようにする

huskyとlint-stagedをインストール

huskyはコミット直前のタイミングでnpm scriptを呼び出せるようになるやつ。

lint-stagedはhuskyと組み合わせてステージングエリアのファイルに対してコミット前にリントして、失敗したらコミットさせないようにできるやつ。

npm i -D husky lint-staged

package.jsonを弄る

以下の内容を追加する。

{
  ~
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
}