おれのかんがえたさいきょうの開発環境

2024-12-03

今年はどうにも書くことが見当たらないので、自分の開発環境を晒します。

みなさんはいくつ知っていますか??

🌱 全般

⚠️ Mac向けになります。Windowsの方はMacに乗り換えてください。Ubuntuは知りません。

Rectangle

ウィンドウを規定の位置・サイズに調整できるようにするツール。これなしでは生きていけない。

https://rectangleapp.com/

Clipy

コピー履歴を遡って参照できるツール。スニペットも登録できる。これなしでは生きていけない。

https://clipy-app.com/

Run Cat

殺伐とした開発画面にネコチャンが現れる神ツール。くるしいときもがんばれる。これなしでは生きていけない。

https://apps.apple.com/jp/app/runcat/id1429033973?mt=12

Raycast

アプリケーションランチャー。ショートカットを設定すれば特定のアプリにコマンド一発で移動できるのでウィンドウ移動が超楽。これなしでは生きていけない。

https://www.raycast.com/

Karabiner

キーバインドを設定できるツール。これなしでは仕事にならない。

https://karabiner-elements.pqrs.org/

操作系

カーソル移動速度調整

カーソル移動速度を早くすると生産性が上がります。Macの設定から変更できます。

https://qiita.com/haraitai00/items/65c3623c0d450c05928b

単語削除

option + deleteで単語単位で削除できます。Mac標準機能。

単語移動

option + <arrow_key>で単語単位で移動できます。Mac標準機能。

矢印キー移動

先述のKarabinerを使ってctrl + ijklを矢印キーに対応させると、テキストエディタ外でも上下左右操作ができるのでとても便利。これなしでは生きていけない。

🌱 Chrome拡張

ネッコサーフィン

殺伐としたブラウザ画面にネコチャンが現れる神拡張。つらいときもがんばれる。これなしでは生きていけない。

https://chromewebstore.google.com/detail/ネッコサーフィン/bbfbeaopdnagijhehlhajpjnfghdhohm?hl=ja

Vimium

ブラウザをVim風に操作できる拡張。スクロールや画面遷移をキーボード操作で行えるのでとても楽。これなしでは生きていけない。

https://chromewebstore.google.com/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb?hl=ja

🌱 VSCode

拡張機能

  • Prettier

フォーマッター。これ入れてないと話にならない。

  • Insert <br> Tag

Shift + Enterで<br>タグを挿入できる拡張。地味に便利。これはなくても生きていける。

  • htmltagwrapi

HTMLの閉じタグを生成してくれる拡張。これがない世界には住みたくない。

  • Auto Rename Tag

タグ名変更の際に、対応するタグの名称も変更してくれる拡張。タグ間の往復がなくなって幸せ。

  • vscode-pets

殺伐としたエディタ画面にネコチャンが現れる神拡張。泣きたいときもがんばれる。これなしでは生きていけない。

便利機能

機能名で紹介。ショートカットを割り当てるかコマンドパレットから呼び出して使用できます。

  • Emmet: タグの削除

対応するタグごと削除できる。無駄な移動がなくなって楽。

  • Emmet: 一致するペアに移動

対応するタグに移動できる。移動が楽ちん。

  • シンボルの名前変更

変数名やタグ名をまとめて変更できる。文字列一致ではなく意味認識をしてくれるので一括変更が楽ちん。

  • 再起的に折りたたむ&すべて展開

大域的にコードを理解したいときに便利。

  • 選択範囲を拡張&選択範囲を縮小

選択範囲の拡張&縮小ができる。ほんまに便利。これなしでは生きていけない。

  • 定義へ移動

変数や関数の定義に移動できる。よく使う。これなしでは生きていけない。

  • n行ずつカーソル移動

カスタムのキーバインド。n行ずつカーソル上下移動ができる。カーソル操作で時間を無駄にしたくない人におすすめ。これなしでは生きていけない。

  {
    "key": "ctrl+cmd+n",
    "command": "cursorMoveDowm",
    "args": {
      "to": "down",
      "by": "line",
      "value": 3
    },
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+cmd+p",
    "command": "cursorMoveUp",
    "args": {
      "to": "up",
      "by": "line",
      "value": 3
    },
    "when": "editorTextFocus"
  },

細かいものを含めると他にも紹介したいものは山ほどありますが、今回はこのくらいにしておきます。

あなたの開発環境に、乾杯。

おすすめ記事