LoginSignup
9

More than 5 years have passed since last update.

ESLint とPrettier を使って構文チェックやコードの整形ができる環境をつくる

Posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9