javascriptからVisual Studio Codeのスニペットへ変換

javascriptからVisual Studio Codeのスニペットへ変換:

VSCodeのスニペットを書くのが大変なので、変換してくれるツールが無いか調べたところ、見つけられなかったので、適当に自動変換してくれるものを作りました。

適当なので動作は保証できません。バグがあったら勝手に直してください。ブラウザのコンソールでの実行を想定しています。

{ 
    document.body.innerHTML =  
        'TabSize: <input type="text" id="tabSize" value="4"></input><br>' + 
        'In:<textarea id="jsToSnippetIn" style="height: 300px; width: 100%;"></textarea>' + 
        'Out:<textarea id="jsToSnippetOut" style="height: 300px; width: 100%;"></textarea>'; 
    const onChange = () => { 
        const tabSize = document.querySelector('#tabSize').value; 
        if (Number.isNaN(+tabSize)) { 
            return; 
        } 
        document.querySelector('#jsToSnippetOut').value =  
            '\n' + 
            document.querySelector('#jsToSnippetIn').value 
                .split('\n').map((row) => { 
                    row = row.replace(/\\/g, '\\\\\\\\'); 
                    row = row.replace(/"/g, '\\"'); 
                    row = row.replace(/^\t*/g, (matched) => '\\t'.repeat(matched.length)); 
                    row = row.replace(new RegExp(`^(${' '.repeat(+tabSize)})*`, 'g'), (matched) =>  
                        '\\t'.repeat(matched.length / tabSize)); 
                    return '\t\t\t"' + row + '",'; 
                }) 
                .join('\n') + 
            '\n'; 
    }; 
    document.querySelector('#jsToSnippetIn').addEventListener('change', onChange); 
    document.querySelector('#jsToSnippetIn').addEventListener('keydown', onChange); 
    document.querySelector('#jsToSnippetIn').addEventListener('keyup', onChange); 
} 

こんな感じで変換できます。

スニペットの形で欲しい人はこちらをどうぞ。

"from Javascript to Snippet": { 
        "prefix": "jssni", 
        "body": [ 
            "{", 
            "\tdocument.body.innerHTML = ", 
            "\t\t'TabSize: <input type=\"text\" id=\"tabSize\" value=\"4\"></input><br>' +", 
            "\t\t'In:<textarea id=\"jsToSnippetIn\" style=\"height: 300px; width: 100%;\"></textarea>' +", 
            "\t\t'Out:<textarea id=\"jsToSnippetOut\" style=\"height: 300px; width: 100%;\"></textarea>';", 
            "\tconst onChange = () => {", 
            "\t\tconst tabSize = document.querySelector('#tabSize').value;", 
            "\t\tif (Number.isNaN(+tabSize)) {", 
            "\t\t\treturn;", 
            "\t\t}", 
            "\t\tdocument.querySelector('#jsToSnippetOut').value = ", 
            "\t\t\t'\\\\n' +", 
            "\t\t\tdocument.querySelector('#jsToSnippetIn').value", 
            "\t\t\t\t.split('\\\\n').map((row) => {", 
            "\t\t\t\t\trow = row.replace(/\\\\\\\\/g, '\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');", 
            "\t\t\t\t\trow = row.replace(/\"/g, '\\\\\\\\\"');", 
            "\t\t\t\t\trow = row.replace(/^\\\\t*/g, (matched) => '\\\\\\\\t'.repeat(matched.length));", 
            "\t\t\t\t\trow = row.replace(new RegExp(`^(${' '.repeat(+tabSize)})*`, 'g'), (matched) => ", 
            "\t\t\t\t\t\t'\\\\\\\\t'.repeat(matched.length / tabSize));", 
            "\t\t\t\t\treturn '\\\\t\\\\t\\\\t\"' + row + '\",';", 
            "\t\t\t\t})", 
            "\t\t\t\t.join('\\\\n') +", 
            "\t\t\t'\\\\n';", 
            "\t};", 
            "\tdocument.querySelector('#jsToSnippetIn').addEventListener('change', onChange);", 
            "\tdocument.querySelector('#jsToSnippetIn').addEventListener('keydown', onChange);", 
            "\tdocument.querySelector('#jsToSnippetIn').addEventListener('keyup', onChange);", 
            "}", 
        ], 
        "description": "from Javascript to Snippet", 
    },