Macで開発するための私のツール 👩‍💻 👨‍💻

Sommaire

皆さん、こんにちは！ 👋

最近、Mac 上の開発環境を再インストールする必要がありました。日常的に使っているユーティリティやソフトウェアの大掃除も兼ねて、普段使っているツールを厳選しました。生産性を高めるために役立っているツールのリストを共有します！

手順

まず Brew をインストールし、その後新しいターミナル（iterm2）を設定します。次に Visual Studio Code の便利な拡張機能をいくつかインストールします。

Brew

Brew は mac 向けのパッケージマネージャーです。コマンドラインのプログラムや GUI アプリケーションをインストールできます。ここでは日常的に使っているユーティリティやソフトの短い一覧を紹介します。

brew install \
  nvm # node version manager
  nmap # network utils
  curl # make resquests via terminal
  jsonpp # json pretty print
  imagemagick # image utils
  catimg # cat image in terminal
  dive # inspect docker images
  git # Source Control Manager

brew cask install
  cakebrew # homebrew GUI
  google-chrome	# web browser
  visual-studio-code # IDE
  imageoptim # optimize pictures utils
  mtmr # touchbar utils
  postman # request API utils
  graphiql # same as postman, but specific for graphql
  docker # Docker desktop
  iterm2 # Alternative terminal
  psequel	# Postgres GUI interface

Iterm2 の設定

Oh My Zsh は zsh の設定を簡単に管理できるオープンソースのフレームワークです。テーマやプラグインをインストールできます...

インストール

Iterm2 を開き、Oh My Zsh をインストールします。

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

次に "Powerline Fonts" フォントのインストールをおすすめします（ここ）。

その後、iTerm2 の環境設定でテーマを変更する必要があります（メニュー "session"）。'Powerline Fonts' のフォントを使用するテーマを選んでください。

Visual Studio Code の設定

拡張機能のインストール

ここではいくつかの種類の拡張機能を紹介します：

言語サポートとスニペット（ jsx、toml、js、react、rails ）
テーマと見た目の改善（ material theme、bracket pair colorizer、LogFileHighlighter、rainbow-csv、... ）
生産性向上（ json-pretty-printer、vscode-eslint、guides、vscode-wakatime、... ）
Git ユーティリティ（ gitlens、git-graph ）
機能追加（ gc-excelviewer、vscode-docker、vsliveshare、... ）

ファイル: vs_code_extensions_list.txt

blanu.vscode-styled-jsx
bungcip.better-toml
CoenraadS.bracket-pair-colorizer
DavidAnson.vscode-markdownlint
dbaeumer.vscode-eslint
eamodio.gitlens
emilast.LogFileHighlighter
Equinusocio.vsc-community-material-theme
Equinusocio.vsc-material-theme
equinusocio.vsc-material-theme-icons
euskadi31.json-pretty-printer
esbenp.prettier-vscode
formulahendry.auto-rename-tag
GrapeCity.gc-excelviewer
HookyQR.beautify
Hridoy.rails-snippets
karigari.chat
kisstkondoros.vscode-gutter-preview
mechatroner.rainbow-csv
mhutchie.git-graph
mikestead.dotenv
ms-azuretools.vscode-docker
MS-CEINTL.vscode-language-pack-fr
ms-vsliveshare.vsliveshare
ms-vsliveshare.vsliveshare-audio
ms-vsliveshare.vsliveshare-pack
slevesque.vscode-zipexplorer
spywhere.guides
TabNine.tabnine-vscode
WakaTime.vscode-wakatime
wix.vscode-import-cost
xabikos.JavaScriptSnippets
xabikos.ReactSnippets

まず、vscode を起動し、vscode を PATH にインストールします（手順はこちら）。

次に、拡張機能の一覧を含む vs_code_extensions_list.txt ファイルを作成します。その後、以下のコマンドを実行すると、このファイルにリストされた拡張機能がインストールされます。

cat vs_code_extensions_list.txt | xargs -n 1 code --install-extension

Visual Studio Code の設定

以下は私の settings.json ファイルの抜粋です。IDE と拡張機能の設定に使用できます。

{
  "window.zoomLevel": 1,
  "breadcrumbs.enabled": true,
  "workbench.colorTheme": "Dracula",
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.wordWrapColumn": 100,
  "editor.minimap.enabled": false,
  "editor.smoothScrolling": false,
  "editor.minimap.showSlider": "mouseover",
  "editor.minimap.maxColumn": 120,
  "editor.cursorStyle": "block",
  "editor.cursorBlinking": "phase",
  "editor.insertSpaces": true,
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.shell.osx": "zsh",
  "files.associations": {
    "*.inky": "slim",
    "*.js": "javascriptreact"
  }
}

以上です！ 👏

リソースと便利なリンク

読み込み中...

Sommaire

手順

Brew

Iterm2 の設定

インストール

Visual Studio Code の設定

拡張機能のインストール

Visual Studio Code の設定

リソースと便利なリンク

コメント