BETA

ESLintとprettierを使ってコードの品質を保とう

投稿日:2019-02-02
最終更新:2019-02-02

ESLintとprettierとは

参考URLに簡潔に説明がされているので簡単に言うと
設定しておけばコードの記述ミスを指摘してくれたり、設定したルールに自動的に整形してくれるものです。

参考URL
ESLint 最初の一歩
Prettier 入門 ~ESLintとの違いを理解して併用する~

なぜ2つも導入するのか?

ESLintとprettierでは得意不得意なことがあるので2つを併用して補うといった感じで使います

使用するには?

いくつか使用方法があるみたいですが
エディタの拡張機能で使用する場合と
プロジェクトがあるローカルにnpmインストールする方法
があるみたいです

エディタで使用する場合はESLintをグローバルインストールする必要があるみたいです
ただし、グローバルでESLintをインストールして使用すると以下のメリットデメリットがある

  • eslintコマンドパスが通っているので便利
  • プロジェクト毎にESLintのバージョンを変えれない
  • チームで設定などの足並みを簡単に揃えることができない

詳細は下記のURLを見てください

参考URL
ESLint をグローバルにインストールせずに使う

使用してみる

上記の理由によりローカルでのインストールをしていきます。
Prettier 入門 ~ESLintとの違いを理解して併用する~

ここに載っているやり方をやっていけば間違いありません!感謝!

エラーが・・・

上記のURLを参考にして導入できましたが2つほどエラーが出たので紹介しておきます。

  • prettier useName.js —writeをコマンドしたらエラー
    私の場合はパスの通し忘れでした
    何度かディレクトリを行き来していて再入力を忘れていました
PATH=$PATH:./node_modules/.bin
  • eslint alert is not defined というエラーが出る
{  
    "env": {  
      "browser": true,  
      "es6": true,  
    }  
}

.eslintrcの設定で”browser”:trueが抜けていたからエラーが出ていました
最初はrulesの設定のせいかと迷っていましたが抜けていたせいでした・・

ちなみ”env”などの説明はこちらです
ESLint
※公式なので英語です

ほぼ参考URLの紹介でした。
コードの静的解析や自動整形は学習や開発でコードレビューをして貰う際にレビュワーの方の
負担を減らすことができます
自分にあった方法で取り入れていきましょう

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@tomorebの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう