nobu blog

プログラミングやゲーム、ゲーム音楽コンサート周りの話をつらつらと。

*



Visual Studio 2017でJavascirptのコード解析ツールESLintを使う。(VisualLinterプラグイン)

   

背景

現在、勉強を兼ねてNode.jsを使ってAWS Lambdaの開発を個人的にやっています。
普段は基本的にC#を使っているため、記述に慣れていない&動かしてみないとエラーがわかならいJavascirptはどうも苦手意識が強いです。
かといってTypescript入れるのちょっとめんどくさいと思ってしまったり。
そこでJavascirptだとESLintといったコードチェックツールがあるのですが、Visual Studio向けにVisualLinterといったプラグインがあるためこちらを利用してみたいと思います。
なお、ESLint自体は解析ツールという事で様々な解析ルールが公開されています。

スポンサーリンク

インストール方法

前提として、Windows10,Visual Studio 2017(Community)がインストールされた環境になります。

1.VisualLinterのインストール
VisualLinterをMarketPlaceからDLしてインストールします。(Link)


2.Visual Studio起動とパッケージインストール

Visual Studioを立ち上げてNode.jsプロジェクトを立ち上げます。

npmで早速ESLintの解析ルールをインストールしてみます。今回は一番メジャー?だと思われる。standardといったパッケージをインストールしてみます。

ソリューションエクスプローラからnpmを選択して右クリック⇒新しいnpmパッケージをインストールする を選択します。

検索バーからstandardを検索してインストールします。

なお、ESLint自体はnpmで予めグローバルかローカルでインストールされている必要があるようですが、
今回インストールするstandardをインストールしたらESLintも依存しているのかローカルインストールされていたのでそのままそれを使います。
(ツールのオプションからESLintのパスが指定可能なので、そこで設定が変えられます。)

3.設定ファイル作成
インストールが終わったら、ESLint用の設定ファイルを作成します。
新規ファイルの作成でプロジェクトのルートに.eslintrcといったファイルを作成します。
先ほどパッケージインストールしたstandardパッケージを使用するために、下記のような指定を行います。

ESLint自体には他にも色々設定があるようですが、今回は以上で設定は終了します。

4.起動
設定が終わると、下記のようなコード上及びエラーウインドウでコードの指摘を行ってくれます。

これでJavascriptでもある程度のミスはチェック可能+よろしくないコードが指摘されてわかりやすくていいですね。
ルール自体は他にも色々あり、どれが自分に合うのか試してみるのがいいかもしれませんね。(参考)
このstandardといったルールだと、コード末尾のセミコロンの指摘もされるので、
個人的には合わなそうなので他のものにしてみようかなと思います。

 - Javascript, Visual Studio