ESlint, prettierを使ってjavascript, vueのコード品質を保つ

scssのコード品質については stylelint,prettierを使ってscssのコード品質を保つ - みわのブログを参考。

また、.jsと.vueが混在しているプロジェクトを想定。(.jsについてはjQueryも使っている想定)

eslint, prettierをインストール

$ yarn add babel-eslint eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue

参考

• babel-eslint - npm
• eslint - npm
• eslint-config-airbnb - npm
• eslint-config-prettier - npm
• eslint-plugin-import - npm
• eslint-plugin-prettier - npm
• eslint-plugin-vue - npm

prettierrcの設定・.eslintrc.jsonの設定

.prettierrc

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "proseWrap": "preserve"
} 

参考

• Options · Prettier

.eslintrc.json

{
  "env": {
    "es6": true,
    "browser": true,
    "jquery": true // if use $
  },
  "plugins": [
    "import"
  ],
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module",
    "allowImportExportEverywhere": false
  },
  "extends": [
    "airbnb-base",
    "eslint:recommended",
    "plugin:vue/recommended",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "gon": true
  },
  "rules": {
    "semi": [
      "error",
      "never"
    ],
    "comma-dangle": [
      "error",
      "never"
    ],
    "no-param-reassign": [
      "error", {
        "ignorePropertyModificationsFor": [
          "state"
        ]
      } 
    ],
    "prettier/prettier": [
      "error",
      {
        "printWidth": 120,
        "singleQuote": true,
        "trailingComma": "none",
        "semi": false
      }
    ]
  }
}

参考

• prettierの使い方 - Qiita
• ESLintとPrettierを併用するときの設定(eslint-plugin-prettier, eslint-config-prettier) - dackdive’s blog
• Vue.jsにPrettier環境を設定するときのメモ - Qiita
• もうprettierで消耗したくない人へのvueでのeslint設定 - Qiita
• Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
• Vue.jsスタイルガイドとeslint-plugin-vue検証ルールのマッピング - Qiita
• 運用中のVue.jsプロジェクトにESLintを入れるためにやったこと - Qiita
• ESLintのエラールール。日本語ざっくり解説スタイル編 - Qiita

package.json(npm script)

app/frontend/javascriptsよりも下にjs,vueファイルを入れている場合。

{
  "scripts": {
    "lint:javascript": "eslint --fix app/frontend/javascripts/**/*.{js,vue}"
  },
}