Zenn
🐇

NodeCGでスポーツコーダ#2:環境構築(VSCodeの設定)

2024/11/25に公開
VS Code
NodeCG
tech

概要

NodeCGを使ってスポーツコーダが作れるか検証していきます。
今回はVSCodeの設定を行います

VSCodeとは

VSCodeは初心者からプロまで使える万能なコード編集アプリです。
開発にはマストアプリですので、まだの人は開発前にインストールしましょう

VSCodeの主な特徴

多言語対応：HTML、JavaScript、CSSなど、さまざまな言語に対応
便利な機能：コード補完、デバッグ、Git連携などを標準装備
拡張性：豊富な拡張機能で、自分好みにカスタマイズ可能

VSCodeインストール方法

VSCodeのWebサイトからダウンロードしてインストールします

拡張機能(日本語化)

インストール直後のVSCodeは英語表示なので、これを日本語に変更します。

  1. VSCodeを起動する
  2. メニューバーの[View]->[Extensions]の順に押下する
  3. 検索欄(Search Extensions in Marketplace)に"Japanise"と入力する
  4. Japanese Language Pack for Visual Studio Codeの右下のinstallボタンを押下する
  5. VSCodeを再起動して、日本語表示になっているか確認する

ターミナルの使い方

VSCodeのターミナル画面は大変便利な機能なので使い方を覚えましょう。毎回コマンドラインから実行していたサーバの起動や停止、npmパッケージのインストールなどがVSCodeのターミナル画面から実行できます

  1. メニューバーの[表示]->[ターミナル]の順に押下する(表示はON/OFFになります)

プロジェクト(フォルダ)の開き方

NodeCGはインストールしたフォルダを基準(ルート)に多くのフォルダとファイルがありファイル管理が重要になります。基準(ルート)を頂点に下位のフォルダをVSCodeで表示することで、ファイル構成が見やすくなるとともに、基準(ルート)フォルダより上の階層へ間違えて移動するといったリスクを回避します

  1. ターミナルで基準(ルート)となるフォルダに移動する
     > cd [基準となるフォルダへのパス]
# フォルダをターミナルにドラッグするとフルパスが入力されます
  2. 基準(ルート)フォルダを頂点とするVSCodeを開く
    > cd code.
    新規VSCodeが起動して基準(ルート)フォルダが頂点にいることを確認する

留意点と感想

  • Tabの移動数や折り返し文字数の位置などのコード整形の設定は、VSCodeの設定を使わずにPrettierというnpmパッケージを使います(#3で執筆予定)。これはVSCode以外のエディタを使っても同じようにコード整形ができるようにするためです。

Discussion