ESLintを使うとnode開発はとっても便利

2020-05-06T06:10:56Z | 2分で読めます | 更新日時 2020-05-06T06:10:56Z

@

これまでvimメインでやってきたものの最近のVSC(Visual Studio Code)はとっても便利な環境が整えられており、しかも無料ですから使わない手はありません。
インデントは2文字か、4文字なのか?、改行コードは、LF、CRLF?、文字列はシングルクォートで囲むのか、ダブルクオートで囲むのか?行末のセミコロンは必要か、不要か?など、コーディングスタイルのこだわりなどもあって、これを共通化させるために少々の設定が必要です。以下、設定手順です。

まず、必要となるのは、以下の3点です。順に見ていきましょう

VSCにESLintをインストール

左側の拡張機能ボタンをクリック、eslintを検索し、インストールします。インストールを済ませたら、再読み込み(リロード)を行います。

プロジェクトにeslintをインストールします

VSCのコンソールもしくは、別のコンソールからインストールします。

ルールファイル.eslintrc.jsを設定します

初回ですので、ウィザード形式で設定してみます。コンソールにて

このような形で問われてきますので、カーソルキーで上下させて希望の形を選びます。なお間違えても、再度実行するだけですので心配ありません。また作成された設定ファイルは後ほど編集できますので、まずは雛形を作るくらいの気持ちで問題ないかと思われます。

今回、私が設定した内容は以下のようにしてみました。質問? 設定値の順に表示されています

これで完成なのですが、もう少し細かく編集したいと思います。ルールファイルは、上記のとおり現在のルートディレクトリに、.eslintrc.jsというファイル名で記載されています。基本書式は、

となり、この詳細(英語表記)は

<div class="blogcard-snippet external-blogcard-snippet">
  A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code qua...
</div>
  <div class="blogcard-domain external-blogcard-domain">
    eslint.org
  </div>
</div>

もしくは翻訳頂いている方が多数いらっしゃって「eslint 日本語」で検索するといろいろなサイトが表示されます

<div class="blogcard-snippet external-blogcard-snippet">
  主にC#、JavaScriptを使ったプログラミングに関するテクニックやハックに関するブログ。
</div>
  <div class="blogcard-domain external-blogcard-domain">
    garafu.blogspot.com
  </div>
</div>

現在の私の設定(.eslintrc.jsファイル)

© 2008 - 2025 橋本たけしの日々を徒然に

🌱 Powered by Hugo with theme Dream.

about me

皆様はじめまして。
今、プログラミング教育が普通に行われていて、普通にPythonとかAIといった言葉が交わされることは喜ばしいことだなぁと感じています。

プログラミングを実際にすることで、もっとこうしたい!と欲が出てきて、いろいろと考えたり、もっと便利にしたい!と思って、世の中のUI/UX/DXのことを理解できたりします。

深さをとことん追求する中で、幅が出て一人ひとりの味が出てくる。
AIに負けない部分は、実はとっても人間らしさだったりします。
本当に必要なことを考えていけたら良いなぁと思っております。