これまで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ファイル)