今回はVueにおけるESLint、Prettierの導入から設定までをご紹介します！

ESLint、Prettierの設定は正直個人の好き嫌いが分かれるので、ご参考までに見て下さい！！

特に上級者に向けたわけではなく、初心者～中級者に向けた設定となっております。

今回の記事を書くにあたって、下記の記事を参考にさせて頂きました。ご協力誠にありがとうございます。

【Vue】はじめてのeslintとprettier設定
 もうprettierで消耗したくない人へのvueでのeslint設定

また、細かい設定などはこちらの記事を見ていただくと良いかと。

それでは順を追って説明します！

パッケージのインストール

npm i -D babel-eslint eslint-config-prettier eslint-plugin-prettier eslint eslint-plugin-vue prettier prettier-eslint vue-eslint-parser eslint-plugin-vue-types

ESLintの設定

プロジェクト直下に.eslintrc.jsを作成します。

そして、下記のように設定します。

eslintrc.js

module.exports = {
  "env": {
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended",
    "plugin:vue-types/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "vue"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "sourceType": "module",
    "parser": "babel-eslint"
  },
  "root": true,
  "rules": {
    // 'generator-star-spacing': 'off',
    // 'no-debugger': process.env.BASE_URL === 'production' ? 'error' : 'off',
    "prettier/prettier": 0,
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "always"
    }],
    //propsのtype宣言なし
    // "vue/require-prop-types": 0,
    // propsの初期値は設定しない
    "vue-types/require-default-prop": 0,
    //propsのアッパーケース(myProp)、ケバブケース(my-prop)の使用を可とする
    "vue/attribute-hyphenation": 0,
    "vue/no-parsing-error": 0,
    // 不要なカッコは消す
    "no-extra-parens": 1,
    // 無駄なスペースは削除
    "no-multi-spaces": 2
  }
}

ここで、主に２つの設定について説明します。

vue/html-closing-bracket-newline

eslintrc.js

"vue/html-closing-bracket-newline": ["error", {
      "multiline": "always"
    }],

こちらは、タグの最後を改行してよいかの判断を行っております。

App.vue


<!-- （１） -->

<input 
  v-model="email" 
  type="email" 
  class="form-control" 
  aria-describedby="emailHelp" 
  required="required" 
/>

<!-- （２） -->

<input 
  v-model="email" 
  type="email" 
  class="form-control" 
  aria-describedby="emailHelp" 
  required="required" />

恐らく、皆さんがしっくりくるのは（１）の方だと思います。"multiline": "always"この設定を行わないと、（１）にエラーが表示されてしまいす。また、（２）の方が好きと言う方は、"multiline": "never"と設定してください。

vue/require-prop-types

こちらは、propsで引数を受け取るときに型定義を行うかの判断を行っています。

下の例を見て下さい。

App.vue

<script>

props: {
    userRights: {
      type: Number,
      required: true,
      default: 1
    }
  },

props: ["userRights"]

恐らく、皆さんが見慣れているのはprops: ["userRights"]こちらだと思います。
"vue/require-prop-types": 0この設定を行わないと、上のように引数として受け取るものは文字型、数値、Boolean、Object、、、、など１つ１つ設定しなければなりません。Typescriptを学んだことがある人はそれほど抵抗はないかもしれませんが、僕が思うに、フロントの部分を作る上では非効率的かなと思ったので型定義は行わないようにしました。

Prettierの設定

/.prettierrc

{
  "printWidth":120,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

自分が一番しっくりくるのはこの設定でした。

package.jsonの設定

後はpackage.jsonでscriptsプロパティにESLint、Prettierを実行できるキーを作成しましょう！

package.json

{
  "scripts": {
    // 省略
    "lint": "eslint --fix src/**/*.{js,vue}",
    "prettier": "prettier --write ./src/**/*.{js,vue} ./functions/index.js",
  },
}

そしたら以下のようにコマンドを実行して見て下さい。

npm run prettier

npm run lint

と、こんな感じで設定することでストレフリーで開発を進めることができました！

コピペして使って頂いても結構です！！

ESLint、Prettierの設定については、いまいち僕も理解はできていないので何か間違いがあればご指適ください。

設定を組むのに割と時間がかかったので、皆さんの助けになればなと思います！

以上、「リピート用！！Vue版ESLint、Prettierの導入・設定（初心者～中級者向け）」でした！

Typescript用の設定もこちらの記事保存用！！Typescriptファイル作成、ESLint、Prettier設定備忘録で書いているので、ぜひ気になった方はご覧ください！

良ければ、LGTM、コメントお願いします。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading