01. まず初めに - plasma-fusion-youth-forum/pfyss GitHub Wiki

ここでは、web開発やGit初心者のために必要な準備について説明します。

目次

• GitHubアカウントを作成する
• 開発チームに入る
• Gitをインストールする
• Visual Studio Codeについて
  • インストールすべき拡張機能

GitHubアカウントを作成する

GitHubアカウントを持っていない人はまず、アカウントを作成しよう. https://github.com

開発チームに入る

pfyssリポジトリは公開リポジトリなので誰でもダウンロードして編集可能ですが、開発チームに入った方が何かと便利なので、開発担当になった人はまず、前任者や管理者からフォーラムweb開発チームに招待してもらいましょう。

Gitをインストールする

Gitはバージョン管理ツールで、複数人での開発を行う際に必要なツールです (GitHubとは別物です)。 開発を行う人はGitを自分の開発環境にインストールしましょう。インストールはこちらから行えます。

Gitの基本的な概念やコマンド(commit, branch, pushなど)の使い方についてはこちらのwebページで学習できます: https://learngitbranching.js.org/?locale=ja

Visual Studio Codeについて

コードや文章を編集する際のソフトウェア(エディター)として、Visual Studio Code (VS Code)が現在(2023年)の主流です。 特にエディターにこだわりがなければこれをインストールしましょう。インストールはこちらから行えます: https://code.visualstudio.com

インストールすべき拡張機能

vscodeは様々な拡張機能(Extensions)によってコード開発を支援してくれます。ここでは本開発におけるお勧め拡張機能を列挙します.

Git関連

名前	説明
Git Graph	Gitのbranchをグラフで可視化したり、簡単なコマンド(リセットなど)をGUIで実行できる 📈
Gitmoji	コミットにどんな内容か表す絵文字を付けれるようになる 🔧

Web関連

名前	説明
Prettier	web開発に関係するコードのフォーマット機能 🎨
HTML CSS Support	CSSスタイルに関する補完機能など 🎨
ESLint	JavaScriptのコードに対するリンター(コードの問題点を指摘してくれるツール) 🚨
Hugo Language and Syntax Support	Hugoのテンプレートファイルのシンタックスハイライト機能 📄

その他

名前	説明
vscode-icon	ファイルなどのアイコンの見栄えが変わる 💄