Nuxt.jsの基礎勉強-ESlintをつかってみた-

ESlint Nuxt.js Vue.js

はじめに

今回はNuxt.jsの勉強としてESlintを用いたコードフォーマットチェックと自動調整を行なったことについてまとめる。

ESlintのインストール

開発ツール - NuxtJSの公式に沿ってESlintのみをインストールすることにした。

$ npm install --save-dev babel-eslint eslint eslint-plugin-vue

ESlintの設定

  • .eslintrc.jsに以下の設定を記述。

※ rules:以下に書かれているのが今回のESlintのルールになる。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    'eslint:recommended',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/recommended',
  ],
  // required to lint *.vue files
  plugins: ['vue'],
  // add your custom rules here
  rules: {
    semi: [2, 'never'],
    'no-console': 'off',
    'vue/max-attributes-per-line': 'off',
  },
}
  • package.jsonにコマンドのショートカットを登録する。
  "scripts": {
    (中略)
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
  },

ESlintを使ってみる

上記設定をした後に以下のコードを打つことで.jsと.vueファイルをチェックしてくれる。(lintはチェックのみ)

$ npm run lint

また、lintfixをすることで自動でコードを調整ある程度してくれる。

$ npm run lintfix

終わりに

以前rubocopを使ったことがあったおかげでESlintの概要を掴みやすかった。