JavaScriptで空白行なのにUncaught SyntaxError: Unexpected tokenに悩まされた

「空白行 Uncaught SyntaxError: Unexpected token」で検索してもヒットしなくて困ったので備忘録

結論を言えばゼロ幅スペースってやつが悪さしていた

1. 事象
2. 解決までの経緯
3. ゼロ幅スペースとは
4. VSCodeがえらい
5. 振り返り

事象

​console.log(1); //1行目
​
console.log(2); //3行目
VM1353:2 Uncaught SyntaxError: Invalid or unexpected token //2行目でエラー

1. 書いたjsコードが一切動作した形跡がない
2. コンソールを見るとUncaught SyntaxErrorが出ている
3. 該当行に飛ぶと空白行(その前後も空白行)

という感じだった
↑の1-3行目をブラウザのコンソールに貼りつけて実行すると同じ結果になるはず

解決までの経緯

1. 全角スペースでも混じったのかと思いEclipse(諸事情でJavaのIDE使用)を確認したが見つからず
2. 無意味なインデントが悪いのかと思い、インデントに色付けする拡張のあるVSCodeで開く
3. 空白行周辺のハイライト部分でカーソルをキーで動かしていたところ、カーソルがとまる部分があった
4. マウスオーバーしてみると、「文字U+200bは非表示です」との文言が出る
   
5. 調べてゼロ幅スペースというものであることが分かり、削除して解決

ゼロ幅スペースとは

区切りを示すための幅の無い空白文字
なのでドラッグで選択しても見つけられなかった

たぶん今回の原因はteams

ちなみに全角スペースはjsのソースに混じっていても問題ない空白文字の一種とのこと
(ゼロ幅スペースは空白文字ではない)

VSCodeがえらい

今回拡張機能目当てでVSCodeで開いたことが解決に寄与したが、
標準機能「Unicodeの多義性文字の強調表示」が仕事してくれていたらしい

振り返り

解決までに上記以外に色々遠回りしたが、エラーメッセージをもっと真摯に受け止めていれば、変な記号が混入していると決め打ちできたので反省
普段のエラーと違いその行に至るまでのjsコードも一切動いていないのもヒントだった

まとめ：VSCode使おう