社内用 Visual Studio Code 設定方法

# 日本語化

Visual Studio Codeが日本語になっていない場合、下記を行います。

Visual Studio Codeを起動し、表示メニューからコマンドパレットを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/ca6a6a1e-b7e1-3d30-6b9b-b181173ddb91.png)

表示されたコマンドパレットで `display` と入力し、「表示言語を構成する」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/31c0b149-9c8f-d4a9-143c-2926ead974f6.png)

「日本語」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/6e9fa5ce-bde0-9006-6a59-a6c26a8dfe8e.png)

# 拡張機能のインストール

画面左の拡張機能をクリックし、拡張機能を表示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/cf068135-dc46-c245-2525-46b918c419d0.png)

`rvest.vs-code-prettier-eslint`で検索すると`Prettier ESLint`が表示されるので、インストールボタンを押し、インストールします。

![2023-03-24 12.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/758d832b-4cad-2543-c1b3-80f27a5ee483.png)

インストールが完了したら続けて下記をインストールします。

- esbenp.prettier-vscode
- streetsidesoftware.code-spell-checker
- mhutchie.git-graph

# Githubのアカウントの作成とアクセス許可の設定

Githubのアカウントがなければ、事前にGithubのアカウントを作成し、Githubの管理者にリポジトリへのアクセス許可を設定してもらいます。

まず、[Github](https://github.com/)を開き、右上の「Sign up」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/d5c603ab-04d3-82fb-b5db-06c6ddf75f87.png)

登録ではメールアドレスを入力し、パスワードとユーザー名を新しく入力して、登録を完了させます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/15f45806-a284-49cb-4d63-953910c5733b.png)

アカウントができたら、登録に使用したメールアドレスを管理者へ伝えリポジトリへのアクセスを許可してもらいます。

許可されるとinvitationのメールが下記のような形式で届きます。
「join@adviser-navi」をクリックして、組織に加わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/5419fe25-83a2-c85e-591a-bfc45556882a.png)

# Githubとの連携

表示メニューからコマンドパレットを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/ca6a6a1e-b7e1-3d30-6b9b-b181173ddb91.png)

表示されたコマンドパレットで `git` と入力し、「git: クローン」を選択します。

![2023-03-24 12.15.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/304e210f-dcf3-7eac-0f88-85e5da3a2c71.png)

続けて、「GitHubから複製」を選択します。

![2023-03-24 12.15.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/00655d15-97ef-cf68-30fe-371b55b4ff4e.png)

確認画面が表示されるので「許可」を選択します。

![2023-03-24 12.16.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/75a01050-2014-4b83-2f70-6247729e033b.png)

Githubにログインするか、アカウントがなければ下にある「New to GitHub? Create an account. 」をクリックしてアカウントを作成します。

![2023-03-24 12.17.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/f3b2bc1d-4fc9-6c15-ec5b-059a334724dd.png)

アカウントへのログインが完了し、アクセス許可をすると、Visual Studio Codeに戻る画面が表示されるので、「許可」を選択します。

![2023-03-24 12.18.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/11902d31-8c99-d276-5524-3e3979c85973.png)

# Githubからソースコードの取得

表示メニューからコマンドパレットを選択し `git`と入力し、「git: クローン」を選択します。

![2023-03-24 12.15.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/304e210f-dcf3-7eac-0f88-85e5da3a2c71.png)

続けて、「GitHubから複製」を選択します。

![2023-03-24 12.15.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/00655d15-97ef-cf68-30fe-371b55b4ff4e.png)

取得するリポジトリ名を選択します。

![2023-03-24 12.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/b10a84fb-eace-3932-e1bd-4b509aeb0b0a.png)

複製先のフォルダを選択します。書類の下に「repos」というフォルダを作成し、「リポジトリの宛先として選択」をクリックします。

![2023-03-24 12.22.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/64050e99-84fc-dea8-0e1b-5d0acf38f475.png)

確認画面が表示されるので、「開く」を選択します。

![2023-03-24 12.22.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/1a284c66-c1ba-a590-3408-77a0e8373e74.png)

「このフォルダー内のファイルの作成者を信頼しますか?」の表示で、「親フォルダー'repos'内のすべてのファイルの作成者を信頼します」にチェックをつけ、「はい、作成者を信頼します」をクリックします。
(reposフォルダ内には社内以外のリポジトリを入れないようにしてください)

![2023-03-24 12.23.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/c79581bd-c2d5-0263-fe79-2111296b1fe6.png)

リポジトリの複製が完了すると、下記のようにソースコードが表示されるので、変更を行います。

![2023-03-24 12.27.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/1fa1ffd6-4ae0-2d8a-6302-af9cf0e482a5.png)

＃＃ Gitユーザー設定方法

Gitに変更内容を登録するときにユーザー名とパスワードが必要となる。

まず、Visual Studio Code を開き、「ターミナル」メニューの「新しいターミナル」を開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2849422/21196f0a-5111-297f-5a8e-e5d02f1c5283.png)

画面下にターミナルが開くので下記コマンドを入力し、名前とユーザー名を設定する。
("Xxxx Yyyyyy"は自分のローマ字フルネーム、"xxxxxx@adviser-navi.co.jp"　には自分のメールアドレスを入力する。)

```bash
git config --global user.name "Xxxx Yyyyyy"
git config --global user.email "xxxxxx@adviser-navi.co.jp"
```

[社内向けフロントエンド開発法方法](https://qiita.com/yamashita_ad/items/d6ce3166e022042b8841)に続く。