個人的PCまわりセットアップまとめ

## これは何

備忘録も兼ねて、PCのセットアップで自分のやることをまとめてみました。
随時更新していく予定です。

## VS Code

### VS Codeの環境設定

`setting.json`に下記を追加します。
内容はコメントで書いているので、詳細は省きます。

```json:setting.json
{
    "editor.fontSize": 12, // フォントサイズを変更
    "editor.guides.bracketPairs": true, // 対応している括弧にガイドを表示する
    "editor.minimap.renderCharacters": false, // ミニマップに実際の文字を表示しない
    "editor.renderControlCharacters": true, // 制御文字を表示する
    "editor.renderLineHighlight": "all", // 現在の選択行をハイライトする
    "editor.renderWhitespace": "boundary", // 半角スペースを・で表示する
    "editor.tabSize": 2, //1つのタブのスペース数
    "editor.unicodeHighlight.includeComments": true,
    "editor.wordWrap": "on", //行を折り返す
    "files.insertFinalNewline": true, // ファイルの末尾に改行を入れる
    "javascript.updateImportsOnFileMove.enabled": "always", //ファイルパスのインポートを自動更新する
    "terminal.integrated.tabs.location": "left",
    "todohighlight.isEnable": true // ターミナルのタブを左にする
    "cSpell.userWords": [ //辞書にテキストを追加する
        "Qiita",
        "Qiitan",
    ],
}
```

### zsh

#### ブランチ名の表示・コマンドの補完をする

##### Oh My Zshをインストールする

以下リンクを参考にインストールしてください

https://ohmyz.sh/#install

##### `zsh-autosuggestions`をインストールする

プラグインのディレクトリに移動

```
cd ~/.oh-my-zsh/custom/plugins
```

リポジトリをClone

```
git clone https://github.com/zsh-users/zsh-autosuggestions.git
```

##### 設定を`.zshrc`に記載

```zsh:.zshrc
# oh-my-zsh https://github.com/ohmyzsh/ohmyzsh/wiki

export ZSH="$HOME/.oh-my-zsh" # Path to your Oh My Zsh installation.
ZSH_THEME="avit" # テーマ https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
CASE_SENSITIVE="true" # 大文字と小文字を区別する補完

source $ZSH/oh-my-zsh.sh

plugins=(
  git
  history-substring-search
  zsh-autosuggestions
)
```

`source ~/.zshrc`で設定を読み込みます

### aliasを設定する

`~/.zshrc`に`alias [入力するコマンド]=‘[元のコマンド]’`の形式でaliasを追加します。


```zsh:.zshrc
# alias
alias doc='docker-compose'
```

### git aliasを設定する

`~/.gitconfig`に`[入力するコマンド]=[元のコマンド]`の形式でgit aliasを追加します。

```config:.gitconfig
[alias]
	st = status -sb 
	co = checkout
	br = branch
	bd = branch -D
	ft = fetch
	loga = log --graph --oneline
	push-f = push --force-with-lease
	sq = rebase -i --autosquash
```

### 拡張機能



#### 全般

- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
    - コード内のスペルをチェックしてくれます
- [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
    - 末尾にスペースが入ってしまった時に、ハイライトしてくれます
- [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
    - `TODO:`と`FIXME:`をハイライトしてくれます
- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
    - フォルダ・ファイルのアイコンをいい感じにしてくれます
- [Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)
    - ファイル内、異なるファイル間、クリップボードとのdiffが表示できます
- [change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)
    - ケースを変換したい単語を選択し、コマンドパレットで変換したいケースを選択すると、ケースを変換してくれます
    - `lowerCamelCase`, `UpperCamelCase`, `snake_case`, `kebab-case`
- [相対パスのコピー](https://marketplace.visualstudio.com/items?itemName=alexdima.copy-relative-path)
    - 今いるファイルから、選択したファイルへの相対パスをコピーしてくれます
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
    - インデントに色をつけて強調してくれます
- [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
    - メニューを日本語にしてくれます

#### Git

- [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
    - リビジョンと比較したり、コードの作成者を表示したり、現在の行の最後の作成者と日付を表示したり、変更した範囲をハイライトしたりできます
    - 他にもいろいろできるみたいですが、正直使いこなせてません

#### Markdown

- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
    - Markdownを書くのに必要な機能が全部入ってます
- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
    - Markdownの記法が間違っている時に教えてくれます
- [Markdown Table](https://marketplace.visualstudio.com/items?itemName=TakumiI.markdowntable)
    - Markdownでテーブルを書くのを便利にしてくれます


#### HTML

- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
    - その名の通り、ペアになっているタグの片方を変更した際に、自動でペアのタグをリネームしてくれます

#### CSSinJS

- [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)
    - styled-componentsのシンタックスハイライトをしてくれます

#### SCSS

- [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)
    - SCSSの補完や定義の表示をしてくれます

## Chrome

### アクセシビリティタブを有効にする

以下の記事の手順でChromeの検証モードでアクセシビリティツリーを有効化します。

https://qiita.com/kabechiyo13/items/ee206b5bf16e44aa3b56#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%83%84%E3%83%AA%E3%83%BC%E3%81%AE%E8%A1%A8%E7%A4%BA%E6%96%B9%E6%B3%95chrome

## Mac

### キーボードでリピート入力が速くできるようにする

システム環境設定でキーボードの項目を開き、「キーのリピート」と「リピート入力認識までの時間」を最も速いものにします。

![キーボードの項目の、キーボードタブの中に「キーのリピート」と「リピート入力認識までの時間」を変更できる項目があります。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/0026def6-4df9-ed84-ea87-4e98d13d8f48.png)

### トラックパッドの移動が速くできるようにする

システム環境設定でトラックパッドの項目を開き、「軌跡の速さ」を最速にします
![「ポイントとクリック」タブの中に軌跡の速さを変更できる項目があります。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/bc392f84-cb66-5853-8631-c389fd5ba8f7.png)

### トラックパッドを押し込まなくてもクリックができるようにする

システム環境設定でトラックパッドの項目を開き、「タップでクリック」の項目にチェックを入れます
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/1db396eb-850d-7829-6fa5-8f3980fbdbc9.png)


### トラックパッドを押し込まなくてもドラッグができるようにする

システム環境設定でトラックパッドの項目を開き、「トラックパッドオプション」を選択し、「ドラッグを有効にする」にチェックを入れてすぐ後のセレクトボックスで「3本指でドラッグ」を選択します

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/2f76d0e4-44ac-ba75-0213-270ebec6edaa.png)

### スクリーンショットの保存先を変更する

画面収録時のメニューバーからオプションを開き、保存先で「ダウンロード」を選択します（任意の別のフォルダでもOK）
スクショでデスクトップがごちゃごちゃしなくなります

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/73a8fb1d-c83f-0e5c-0ea5-eac39f497c60.png)

### メニューバーからアクセシビリティのメニューにアクセスできるようにする

システム環境設定でアクセシビリティの項目を開き、「メニューバーにアクセシビリテlの状況を表示」にチェックを入れます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/2412819c-82f3-e512-7e44-033cf27fb132.png)

## Figma

適宜使うプラグインは使うタイミングで起動できるので、高頻度で使うものだけ一旦追加します。

- [Unsplash](https://www.figma.com/community/plugin/738454987945972471/Unsplash)
    - Unsplashの画像を挿入できます
- [realistic-dummy-text-ja](https://www.figma.com/community/plugin/946692694904143875/realistic-dummy-text-ja)
    - 日本語のダミーテキストを挿入できます
- [Similayer](https://www.figma.com/community/plugin/735733267883397781/Similayer)
    - レイヤー名やサイズなどのプロパティが同じ要素を一括選択できます
- [Material Symbols](https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols)
    - Material Symbolsを呼び出せます
- [Stark](https://www.figma.com/community/plugin/732603254453395948)
    - 選択した要素の色のコントラスト比をチェックできます

その他よく使うプラグインはこちらの記事にまとめています↓

https://qiita.com/kabechiyo13/items/259dd4844c4eac9f1a4f#stark