JavaScript のフレームワーク、Vue.js を使用した開発の際に便利だった、ESLint とPrettier について記述。また、設定方法も記述する。これも何番煎じかわからない。

ここで説明すること

ESLint とPrettier について簡単な概要
ESLint とPrettier をVue.js を使ったプロジェクトにインストールする方法、設定方法

ESLint

JavaScript の構文チェックツールのこと。
構文のエラーを見つけたり、構文のスタイル(構文で使用しているカッコやスペースの使い方)を統一したりすることができる。
https://eslint.org/

Prettier

Prettier はソースコードを整形してくれるツールのこと。
JavaSrcipt やVue.js、CSS、SCSS等のソースコードを整形してくれる。
https://prettier.io/

ESLint とPrettier を併用するメリット

ESLint は構文チェックをしてくれる。しかし、「ソースコードを整形してくれる」という点ではESLint とPrettier で共通している。別にどちらかを使えばよいのでは？？となるが、ESLint だけだと整形のチェックをしてくれる範囲が狭い。しかし、Prettier はESLint では整形できない部分をカバーしてくれるため、今回はESLint とPrettier を併用する。

インストール

Vue.js を使ったプロジェクト(vue-cli を使って作成したプロジェクト)が存在していることを前提に記述する。

ターミナルを開いて、Vue のプロジェクトのディレクトリ内且つpackage.json のファイルが存在するディレクトリ内で以下のコマンドを実行し、ESLint とPrettier のパッケージをインストールする。(今回はyarn コマンドで実行)

yarn add -D eslint eslint-config-prettier eslint-plugin-prettier

yarn add -D prettier prettier-eslint prettier-eslint-cli

.eslintrc.js の設定

インストール後、.eslintrc.js を開き、以下を記述する。(ない場合は作成)
extends の部分には以下を記述。

 extends: [
        'plugin:vue/essential',
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:prettier/recommended"
    ],

rules の部分には以下を記述。

rules: {
        "semi": [2, "never"],
        "quotes": [2, "single"],
        "single": { "allowTemplateLiterals": true },
        "no-console": "off",
        "vue/max-attributes-per-line": "off",
        "prettier/prettier": ["error", { "semi": false, "singleQuote": true }],
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }

rules の部分にeslint を使って構文をチェックしたりコードを整形したりするためのルールを決めている。
以下では主な構文ルールを説明する。

semi : 構文の末尾にセミコロンをつける (今回は付けない設定)
quotes : 文字列はダブルクォートで記述 (今回はシングルクォートに設定)
no-console : console の使用をしないこと (今回は使っている)

また、prettier でのコードの整形ルールも決めている。構文の末尾はセミコロンなし、文字列はシングルクォートのルールを設定している。そうではなかった場合は警告を表示するようにしている。
Prettier でも整形のルールを細かく決めることができるが、今回は、特に凝ったルールを決めていないため、無駄な改行があったりスペースがあったりした際に警告が表示されるようにしている。
※エラーではなく警告のため、警告が表示されていてもコーディングはできる。ただし、警告がうるさい…。

lintfix コマンドでの一発整形

コーディングして、気づいたらめちゃめちゃESLint やPrettier の警告文出ていた…ということがあるため、そういうときにターミナルからコマンドyarn lintfix で一気に整形してくれるようにpackage.json に以下を記述する。

"scripts": {
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore --ignore-path .eslintignore ."
  }

参考URL

ありがとうございました。
https://qiita.com/mysticatea/items/f523dab04a25f617c87d
https://qiita.com/kashimura0001/items/f2270364d57e1828ea78
https://garafu.blogspot.com/2017/02/eslint-rules-jp.html