vue.jsにeslintを設定した話(vscode使っています)

eslintとvue.js用のeslintプラグインをinstallする

今回はグローバルにインストールします。
npm i -g eslint eslint-plugin-vue
※上記はnpmですが、yarnでも大丈夫です。

vscodeに読み込ませるnode_moduleを設定

vscodeの"基本設定=>設定"のUser Settingsのjsonファイルを開いてください。 次に、自分の好きなパスのnode_moduleを設定してください。(今回はglobalのを読み込ませています。)

"eslint.nodePath": "/Users/[ユーザー名]/node_modules",
"eslint.enable": true,

.eslintrc.jsonを設置する

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

.
├── .git
├── .gitignore
├── .eslintrc.json # <=ここに入れる 
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
├── bin
├── config
├── config.ru
├── db
├── lib
├── log
├── node_modules
├── package.json
├── public
├── storage
├── test
├── tmp
├── vendor
└── yarn.lock

内容はとりあえず下記で大丈夫です。(カスタマイズは各々が行ってください)
.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ]
}

上記で設定は完了です。

補足

下記プラグインについての補足です。
https://github.com/vuejs/eslint-plugin-vue

それぞれ、vue style guidの規約でどこまで反映するかを表しています。
"plugin:vue/recommended"を設定しておけばとりあえず、全て反映してくれるので、特にこだわりがなければ"plugin:vue/recommended"でよいかと思います。

• plugin:vue/base - Settings and rules to enable correct ESLint parsing
• plugin:vue/essential - Above, plus rules to prevent errors or unintended behavior
• plugin:vue/strongly-recommended - Above, plus rules to considerably improve code readability and/or dev experience
• plugin:vue/recommended - Above, plus rules to enforce subjective community defaults to ensure consistency