Visual Studio CodeでMacにフロントエンド開発環境をつくる
最近Hugo+Netlifyに沼っています(楽しい！！)
この場合htmlファイルを多少修正するのみでサイトを作成できます。
よって、学生時代から慣れているemacsでOKでした。
ただ、CSSのクラスやhtmlの文法などは補完してもらえないので
なかなかの不便を感じつつあり...。
そこで、Twitterなどから評判を聞いた、
Visual Studio Code(VSCode)を導入してみました！
フロントエンド開発環境として、以下を期待しつつ情報収集。
・HTML/CSS/JavaScriptの記述を補助してくれる
・ローカル・本番環境でデバッグできる
…ピッタリなQiita記事を発見。
qiita.com
この記事に沿って環境をつくることで、一通りの操作も学習できました。
ありがたい限り。
必要だったこと
Node.jsダウンロード
main.jsを記述してデバッグしようとしたら、以下のエラーが出ました。
To use ESLint please install eslint by running npm install eslint in the workspace folder workspace_2 or globally using 'npm install -g eslint'. You need to reopen the workspace after installing eslint.
ESLintを使うには、'npm'が必要ですよ、と。
ググると、npmを入れるには、まずNode.jsを入れろ、と。
公式よりNode.jsをダウンロードで解決しました。
デフォルトのブラウザをGoogle Chromeに設定
変更しないとOpen With Live ServerでSafariなど別のブラウザが起動して
その後のDebugger for Chrome機能がうまく使えないため、注意。
使ってみた感想
特に、htmlひな形入力がワンアクションで完了する点に感動しました...！
さらに、タグの頭文字入れるだけで予測変換みたいに候補が出てくる出てくる。
拡張機能のおかげでCSS側もそんな感じ。
ソースコードがとっても書きやすくなりました。。
そして、デバッグ側についても。
エクスプローラーのindex.html 右クリック→Open With Live Serverからローカルでブラウズ。
Cmd+option+I よりGoogle Chromeのデベロッパツールで表示。
さらに、JavaScriptの挙動をブレークポイントを置いて確認可能。
ブラウズのためのアクションも減った上に、ブレークポイントを置けるようになりました。
上記の2点、これから本格的にソースコードを書くつもりの人間にとってかなり効いてくれるサポートだと感じました。
