VSCodeでECMAScriptバージョンに準拠するかチェックする(だけの)マクロ

この記事は公開から3年以上経過しています。

VSCodeでJavaScript開発を行う際、気軽に指定したECMAScriptバージョンかどうかチェックするVSCode Macros拡張のマクロをacornパーサーを使って作成してみたので紹介します。

あくまでマクロのサンプルですのでリアルタイムでチェックしたい、本気でチェックしたい場合は、ESLint拡張などを導入することをオススメします。

本記事のマクロを利用する場合、システムに予めnode.jsを導入(インストール)しておく必要があります。

npmライブラリのインストール

以下の手順で、マクロから利用するnpmライブラリを導入しておきます。

マクロディレクトリにpackage.jsonが存在しない場合は、カレントをマクロディレクトリに移動して以下のコマンドでVSCodeMacrosで利用するプライベートnpmライブラリ用のpackage.jsonを生成します(npmライブラリをグローバルインストールする場合は不要)。
```
echo '{"private":true}' >> package.json
```
※Windowsのコマンドプロンプト(cmd.exe)の場合はシングルクォート'は不要。
以下のコマンドでacornをインストールします。
```
npm i acorn
```

マクロのサンプルソースコード

const vscode = require('vscode');
const acorn = require('acorn');

/**
 * マクロコンフィギュレーション
 */
module.exports.macroCommands = {
    ESバージョンチェック: {
        no: 1,
        func: CheckES,
    },
};

/**
 * JavaScriptがECMascriptの特定バージョンかチェック
 */
function CheckES() {
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
        vscode.window.showWarningMessage('Editor not found.');
        return;
    }
    const document = editor.document;
    if (!document) {
        vscode.window.showWarningMessage('Document not found.');
        return;
    }
    if (document.languageId !== 'javascript') {
        vscode.window.showWarningMessage(`This document type '${document.languageId}' is not supported.`);
        return;
    }
    // 出力ウィンドウの生成
    if (global.ahse5Yah === undefined) {
        // nodeのグローバル変数にOutputChannelを設定
        // ※ahse5Yahはグローバル変数名の衝突を避けるためのランダム文字列
        global.ahse5Yah = {
            output: vscode.window.createOutputChannel('Check ES')
        };
        global.ahse5Yah.output.show(true);
    }
    const outputWindow = global.ahse5Yah.output;

    outputWindow.clear();

    const jsText = document.getText();

    try {
        // 入力JavaScriptをES5としてパース
        // ecmaVersion = 3, 5, 6 (or 2015), 7 (2016), 8 (2017), 9 (2018), 10 (2019), 11 (2020), or 12 (2021, partial support), or "latest"
        // https://www.npmjs.com/package/acorn
        acorn.parse(jsText, {
            ecmaVersion: 5,
            sourceType: 'script',
        });
    } catch (e) {
        outputWindow.appendLine(`${e.message}\n${document.fileName}(${e.loc.line},${e.loc.column})`);
    }

    outputWindow.appendLine('Completed.');
}

GitHub Gist

使い方

通常の関数とES6以降で利用可能なアロー関数だけ記載したテストソースコードに対して、このマクロを実行した結果は以下のとおりです。

テストコード(test.js)

// 通常の関数
function normalFunc()
{
}

// アロー関数(ES6〜)
var lambdaFunc = () =>
{
}

ES5 を指定してマクロを実行した結果

ES6 を指定してマクロを実行した結果

ES6はエラーなし、ES5では7行目のアロー演算子部分でESバージョンの不一致で発生した構文エラー内容とエラー発生箇所をアウトプットウィンドウに表示しています。

ちなみに、acornのパースオプションでJavaScriptテキストではなくチェックしたいファイルパスを渡すようにカスタマイズすれば、ワークスペース内の全ファイルをチェックするなども可能です。

参考ウェブサイトなど

npm
acorn

以上です。