eureka

[WIP]M1 Mac でのセットアップ

0

念願のiMacを購入したのでM1 Macの設定や、環境構築などを自分のために残しておきます。

事情があり、途中ですが一旦公開します!

iMacのシステム設定

キーボード入力

Dockの位置

メニューバー表示

アプリインストール

  • Google Chrome
  • FireFox
  • Visual Studio Code
  • Slack
  • Skype
  • Zoom
  • Figma
  • DeepL
  • Gyazo
  • SourceTree
  • FinderPath
  • Spectacle
  • Clipy
  • Xcode

システムインストール

  • Homebrew
  • anyenv
  • nodenv
  • yarn
  • git

Homebrew

まずはこれを入れないと始まらない、おなじみのパッケージマネージャーHomebrewから始まります。

M1 Macでのインストールならびに設定は下記の記事を参考にしています。
macOSのzshではこれだけはやっておこう

インストール

まずはインストールしましょう。
※シェルがzshの場合でもコマンドは同じようです。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

途中でパスワードを聞かれるので入力してインストール完了を待ちます。

パスを通す

M1 Macの場合はHomebrewのインストール先が/opt/homebrew/binになるため、パスを通す必要があるようです。
実際にターミナルでもインストール完了時に指示されていました。

Warning: /opt/homebrew/bin is not in your PATH.
  Instructions on how to configure your shell for Homebrew
  can be found in the 'Next steps' section below.
==> Installation successful!

参考記事を見ながら、下記のように設定しました。

$ vim ~/.zshrc

.zshrcを新しく作成したら、下記のように入力します。

typeset -U path PATH
path=(
  /opt/homebrew/bin(N-/)
  /opt/homebrew/sbin(N-/)
  /usr/bin
  /usr/sbin
  /bin
  /sbin
  /usr/local/bin(N-/)
  /usr/local/sbin(N-/)
  /Library/Apple/usr/bin
)

設定を保存してvimを抜けたら設定を有効にします。

$ source ~/.zshrc

これでbrewが使えるようになりました。

$ brew -v
Homebrew 3.3.2
Homebrew/homebrew-core (git revision 0f98b5f871a; last commit 2021-11-05)

anyenv

続いてanyenvをHomebrew経由でインストールします。

インストール

$ brew install anyenv
$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc
$ exec $SHELL -l
ANYENV_DEFINITION_ROOT(/Users/miyukishoji/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init

初期化処理

初期化処理をします。

$ anyenv install --init
Manifest directory doesn't exist: /Users/miyukishoji/.config/anyenv/anyenv-install
Do you want to checkout https://github.com/anyenv/anyenv-install.git? [y/N]: y
Cloning https://github.com/anyenv/anyenv-install.git master to /Users/miyukishoji/.config/anyenv/anyenv-install...
Cloning into '/Users/miyukishoji/.config/anyenv/anyenv-install'...
remote: Enumerating objects: 62, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 62 (delta 1), reused 1 (delta 0), pack-reused 57
Receiving objects: 100% (62/62), 10.52 KiB | 3.51 MiB/s, done.
Resolving deltas: 100% (8/8), done.

Completed!

アップデートプラグインのインストール

$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
Cloning into '/Users/miyukishoji/.anyenv/plugins/anyenv-update'...
remote: Enumerating objects: 87, done.
remote: Total 87 (delta 0), reused 0 (delta 0), pack-reused 87
Receiving objects: 100% (87/87), 13.33 KiB | 1.90 MiB/s, done.
Resolving deltas: 100% (33/33), done.

nodenv

anyenvがインストールできたのでnodenvを入れます。
インストールできる*env一覧を表示してみます。

$ anyenv install -l
  Renv
  crenv
  denv
  erlenv
  exenv
  goenv
  hsenv
  jenv
  jlenv
  luaenv
  nodenv
  phpenv
  plenv
  pyenv
  rbenv
  sbtenv
  scalaenv
  swiftenv
  tfenv

nodenvありますね!ウンウン
インストールします。

$ anyenv install nodenv
.
.
.
Install nodenv succeeded!
Please reload your profile (exec $SHELL -l) or open a new session.

パスを通してバージョンが表示できればOK

$ exec $SHELL -l
$ nodenv -v
nodenv 1.4.0+3.631d0b6

node.jsのインストール

ついでにnode.jsもインストールしておきます。
12系と14系と16系の最新が入っていればいいかな。

$ nodenv install -l
// インストール可能なnodeのバージョンを表示
$ nodenv install 12.22.7
$ nodenv install 14.18.1
$ nodenv install 16.13.0
$ nodenv rehash

デフォルトは14系にしておきます。

$ nodenv global 14.18.1
$ node -v

yarn

$ brew install yarn
$ which yarn
/opt/homebrew/bin/yarn
$ yarn -v
1.22.17

git

インストール

$ git --version
git version 2.30.1 (Apple Git-130)
$ brew install git
$ echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.zshenv
$ source ~/.zshenv
$ git --version
git version 2.33.1

ssh接続設定

githubからsshで接続できるように設定します。
まずは秘密鍵と公開鍵を作成します。

$ ssh-keygen -t rsa -b 4096 -C "arrown" -f  ~/.ssh/id_rsa
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
our identification has been saved in /Users/shomiyu/.ssh/id_rsa.
Your public key has been saved in /Users/shomiyu/.ssh/id_rsa.pub.

.sshディレクトリのパーミッションを700にして自分のみアクセスできるように。

$ cd ~
$ chmod 700 ~/.ssh

次にGithubに公開鍵を登録します。
先にクリップボードに公開鍵をコピーしておきます。

$ pbcopy < ~/.ssh/id_rsa.pub

Githubにアクセスして下記のように進み、New SSH keyで作成します。
Settings > SSH and GPG keys

わかりやすい名前をつけて(いつもデバイス名をつけています)、先ほどコピーした公開鍵を登録します。

これでsshでGithubからcloneなどができるようになります。

フォント

ターミナルやVScodeで表示するフォントに源ノ角ゴシック Codeを使用しているので、こちらをダウンロードします。

源ノ角ゴシック Code(Source Han Code JP)

※MacOS Big Sur 以降はバージョン2.012Rでないと、文字が黒くなるバグがでるみたいなので注意です。

OTF形式のフォントから Medium / Medium Italic / Bold / Bold Italic をダウンロードします。

VScodeでの設定は下記です。

{
  "editor.fontFamily": "SourceHanCodeJP-Medium"
}

VScode

拡張機能

設定

{
  "editor.wordWrap": "on",
  "editor.renderWhitespace": "all",
  "editor.suggestSelection": "first",
  "editor.minimap.enabled": false,
  "editor.fontSize": 16,
  "editor.fontFamily": "'SourceHanCodeJP-Medium', 'Source Han Code JP',  Consolas, 'Courier New', monospace",
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.renderLineHighlight": "all",
  "editor.renderControlCharacters": true,
  "editor.cursorBlinking": "smooth",
  "editor.smoothScrolling": true,
  "editor.minimap.showSlider": "always",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "files.autoSave": "onWindowChange",
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "window.openFoldersInNewWindow": "on",
  "window.title": "${activeEditorMedium}${separator}${rootName}",
  "window.zoomLevel": 1,
  "extensions.autoUpdate": true,
  "breadcrumbs.enabled": true,
  "html.suggest.html5": false,
  "html.autoClosingTags": false,
  "html.format.extraLiners": "",
  "html.format.maxPreserveNewLines": 2,
  "html.format.wrapLineLength": 0,
  "html.format.unformatted": null,
  "html.format.enable": false,
  "html.format.endWithNewline": true,
  "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p",
  "html-css-class-completion.enableEmmetSupport": true,
  "css.validate": false,
  "php.validate.executablePath": "/usr/bin/php",
  "git.ignoreMissingGitWarning": true,
  "emmet.triggerExpansionOnTab": true,
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.variables": {
    "lang": "ja"
  },
  "emmet.includeLanguages": {
    "vue": "html",
    "vue-html": "html"
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.CustomBrowser": "chrome",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorTheme": "Golden Dracula",
  "workbench.editor.labelFormat": "short",
  "workbench.editor.tabSizing": "shrink",
  "json.format.enable": false,
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "typescript.updateImportsOnFileMove.enabled": "always"
}

Google Chrome 拡張機能

  • Awesome Screenshot
  • ColorZilla
  • JSON Formatter
  • React Developer Tools
  • Vue.js devtools
  • Window Sizer

ターミナル

参考

0