【超初心者向け】プログラミングの勉強をはじめる際のフォルダ周りとVSCodeのおすすめ設定 for Mac 

# はじめに
プログラミングをはじめたばかりの人を対象に、やっておくと便利な設定を紹介する記事です

# 概要
[1. VSCodeのダウンロード](#1-VSCodeのダウンロード)
[2. VSCodeで入れておいた方がいい拡張機能](#2-VSCodeで入れておいた方がいい拡張機能)
[3. プログラミングを勉強する用のフォルダを作る](#3-プログラミングを勉強する用のフォルダを作る)
[4. Finderの設定を変更しよう](#4-Finderの設定を変更しよう)
[5. コマンドラインでの移動が苦手な人エイリアスを設定しよう](#5-コマンドラインでの移動が苦手な人エイリアスを設定しよう)
[6. VSCodeのワークスペースを保存する](#6-VSCodeのワークスペースを保存する)
[7. その他入れておいたらTSKRアプリなど](#7-その他入れておいたらTSKRアプリなど)

# 1-VSCodeのダウンロード
プログラミングを書くエディターはVSCodeがおすすめです
[VSCodeダウンロードページ](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

詳細な使い方は[この記事](https://zenn.dev/protoout/articles/19-vscode-handson)など参考にしてみてください

# 2-VSCodeで入れておいた方がいい拡張機能
うっかり入れてしまった全角スペースをみつけやすくする
=> [EvilInspector](https://marketplace.visualstudio.com/items?itemName=saikou9901.evilinspector)

英語が苦手な人
=> [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)

閉じカッコを忘れがちなうっかりさん
=> [VS Codeでブラケットペアの範囲を可視化する](https://zenn.dev/ayatokura/articles/vscode-article-4)

以上、最低限これだけはやっておいたほうが良いと思う拡張機能(設定)でした

# 3-プログラミングを勉強する用のフォルダを作る
どこでもよいので「プログラムを勉強する用のフォルダ」を準備しましょう

:::note warn
フォルダには日本語を使わず、半角英数字のみで設定するようにしましょう。
のちのち苦労しなくて済みます。
:::

# 4-Finderの設定を変更しよう
プログラミングで環境周りの設定を行う際に、「隠しファイル」と呼ばれる「.（ドット）」からはじまるファイルを編集することがよくありますが、Finderの初期設定では非表示になっています。
ショートカットキーで簡単に切り替えられるのでやっておきましょう
```
Finderを開いて、command + shift + .（コマンド + シフト ＋ ピリオド）
```

プログラミングをやるときにファイルのパス（URLみたいなもの）が必要になることがよくあります。
```
Finderを開いて、option (または alt) ⌥ + command + P（オプション(またはアルト) + コマンド ＋ P）
```
するとFinderの以下の部分にパスが表示されるようになります
![スクリーンショット 2022-03-25 2.34.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/b9346e08-0fc7-ab8d-e4c2-d6187d38eec0.png)
右クリックでパスをコピーすることも簡単にできます
![スクリーンショット 2022-03-25 2.34.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/a579eb64-213b-a1ce-6b36-a0d1b13a541e.png)


# 5-コマンドラインでの移動が苦手な人エイリアスを設定しよう
プログラミングをやる際に、ターミナルと呼ばれる画面から操作する必要があります
VSCodeだと以下の部分です
![スクリーンショット 2022-03-25 2.09.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/00211853-3ea3-ac56-31d8-02f375400b4c.png)

なれないうちはターミナルで現在のディレクトリを移動するということが難しいと思います（cdというコマンドを利用します）
そこで、[3. プログラミングを勉強する用のフォルダを作る](#3-プログラミングを勉強する用のフォルダを作る)で作ったフォルダに一発で移動できるようにおまじないを設定します

Finderを開き、隠しファイルを見えるようにしておいて]　、「HOME の .zrsh」というファイルを開きます
![スクリーンショット 2022-03-25 2.21.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/195b3328-eebe-6a99-0e1a-5de568a75484.png)

このファイルを編集すると自分用にカスタマイズされたコマンドを作ることができます
```
alias 自作コマンド='やりたいこと'
```
:::note alert
既存のコマンドを上書きするのは絶対に避けた方がよいです
aliasを設定する前にターミナルで作りたいコマンドが利用されていない(command not foundになる)ことを確認してください
![スクリーンショット 2022-03-25 2.42.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/f85eb220-fa18-d527-476e-d87680c61d12.png)
:::

[プログラミングの勉強用に作成したフォルダのパスをコピーして](#4-Finderの設定を変更しよう)、「移動したいフォルダのパス」と置き換えて保存してください（.zshrc にすでに何か記述がある場合は消さないでください）
```
alias cdhome='cd 移動したいフォルダのパス'
```

![スクリーンショット 2022-03-25 2.52.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/8bd87315-7932-a015-24c9-46418fa71bdd.png)

ターミナルから設定ファイルの再読み込みを行います
```
source ~/.zshrc
```

さきほど追加したcdhomeというコマンドが有効になり、どこにいても一発でプログラミング学習用のフォルダが開けます
(pwdは現在のフォルダ階層を表示するコマンドです)
![スクリーンショット 2022-03-25 2.50.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/6759e4b1-5fe3-292d-0e39-276f86e5c747.png)


# 6-VSCodeのワークスペースを保存する
VSCodeでプログラミング学習用のフォルダを開いて、「ファイル > Save Workspace As ...」を選択し、現在のフォルダをすぐVSCodeで開けるショートカットを作っておきましょう
![スクリーンショット 2022-03-25 2.55.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/ce4ee1e5-1fef-0b48-704f-ccf90075e7db.png)

# 7-その他入れておいたらTSKRアプリなど
TSKR=「たすかる」

## コピーアンドペースト支援
[Clipy](https://clipy-app.com/)
プログラミングをする際に、コピーアンドペーストはよくすることになると思いますが、30件まで履歴が取れてものすごく効率があがります
使い方などは[こちら](https://qiita.com/iwaseasahi/items/023964b426305375489e)を参考にしてみてください

# おわり 
以上、思いつく限りですが、プログラミング初心者の方でMacの扱いに慣れていない人が最初にやっておいた方が良さそうな設定でした。