（2026年11月更新：Cursor のルールの置き場所が変わったため書き直しました）

Cursor は、VS Code をもとにした AI 搭載のコードエディタです。

https://www.cursor.com/

brew install --cask cursor

● AI にプロジェクトの前提を伝える

以前は .cursorrules というファイルを使っていましたが、今の公式ドキュメントでは次の2つの方法が案内されています。

方法1. AGENTS.md（簡単）

プロジェクトの一番上のフォルダに AGENTS.md を置きます。ふつうの Markdown で書けます。

# 目的
このプロジェクトはチャットアプリケーションを開発しています

# 構成
- バックエンドは Go の echo で作成しています
- DB サーバは MySQL を使用しています
- フロントエンドは Next.js App Router で作成しています
- API コールのフック作成に TanStack Query を使用しています
- フロントエンドの言語は TypeScript です

方法2. .cursor/rules（細かく決める）

.cursor/rules フォルダに、拡張子 .mdc のファイルを置きます。ファイルの先頭で、いつルールを使うかを決められます。

---
description: フロントエンドのルール
globs: frontend/**/*.tsx
alwaysApply: false
---

コンポーネントは関数で書いてください

• alwaysApply: true：すべてのチャットで使う
• globs：一致するファイルを扱うときに使う
• description だけ：AI が必要だと判断したときに使う

拡張子が .md のファイルは、このフォルダに置いても読み込まれません。

● アクティビティバーを VS Code と同じ縦向きにする

ユーザー設定で workbench.activityBar.orientation を vertical にします。

● haystackeditor

https://haystackeditor.com/

コードの関係を画面上に図のように並べて見られるエディタです。今の開発の状況は確認できていません。

（2026年11月更新：配布が終わったアプリを外し、現在使えるアプリに並べ直しました）

● Obsidian（個人利用は無料・おすすめ）

https://obsidian.md/

brew install --cask obsidian

Markdown のメモをリンクでつないで管理できるアプリです。ファイルは Mac の中にふつうの .md として保存されます。

● Typora（有料）

https://typora.io/

brew install --cask typora

書いたそばから見出しや表が整って表示される、シンプルなエディタです。

● MarkEdit（無料）

https://apps.apple.com/app/id1669953820

brew install --cask markedit

Mac 専用の軽いエディタです。TextEdit のような感覚で Markdown を書けます。

● Zettlr（無料）

https://www.zettlr.com/

brew install --cask zettlr

論文や長い文章を書く人に向いたオープンソースのエディタです。

● Visual Studio Code（無料）

Markdown のファイルを開いて shift + command + V を押すとプレビューが開きます。プログラムも書く人は、これで十分です。

● ブラウザで使う

(GitHub-Flavored) Markdown Editor： https://jbt.github.io/markdown-editor/

インストールせずに、ブラウザですぐに使えます。

以前紹介していた MacDown は、Homebrew で Gatekeeper の確認を通らないアプリとして扱われています。Haroopad、Boostnote、MWeb、Marxico も、今はおすすめできないので外しました。

（2026年11月更新：ショートカットの重複を整理しました。ショートカットは「設定」→「キーマップ」で変更できます）

● PhpStorm や WebStorm の キーボードショートカットをMacの一般的なエディタと同じに変更する

・パスのコピー

パスのコピー : Command + Option + C
相対パスをコピー : Command + Option + Shift + C

・マルチカーソル

ショートカットキー(Mac)：（特定文字列を選択してから）Ctrl + G
　↓
Command + D

・キャレットをテキストの先頭に移動

Command + Fn + 上
　↓
Command + 上

・キャレットをテキストの最後に移動

Command + Fn + 下
　↓
Command + 下

・選択状態でキャレットをテキストの先頭に移動

Command + Shift + Fn + 上
　↓
Command + Shift + 上

・選択状態でキャレットをテキストの最後に移動

Command + Shift + Fn + 下
　↓
Command + Shift + 下

・選択範囲のインデント

Command + ]

・選択範囲/行のインデント解除

Command + [

・戻る

Command + Option + 左
　↓
Option + 左

・次へ

Command + Option + 右
　↓
Option + 右

・コード補完

Control + space
　↓
Command + space

・前のタブを選択

Command + option + ←

・次のタブを選択

Command + option + →

● 設定を同期する

メニュー名は IDE のバージョンによって変わります（画像は以前の画面です）。今は「設定」の中の「Backup and Sync」などの項目で同期します。

● メモリ設定 / メモリ表示

メモリ設定する

ヘルプ → メモリ設定を変更

メモリ表示 / ガベージコレクション

右下を右クリックして表示させます ↓

● IntelliJ系のIDEで「import ...」のように省略されないようにする

「エディタ」→「一般」→「コードの折り畳み」→「インポートのチェックを外す」

● PhpStormのよく使うショートカット

検索系

クラス名で検索     Command + O
ファイル名で検索        Command + Shift + O
ファイルの中身で検索      Command + Shift + F
アクション検索     Command + Shift + A

最近のファイル     Command + E
ファイルを任意のツールで開く      Option + F1
どこでも検索      Shiftダブルプレス
コンテキストアクションの表示      Option + Enter
リファクタリング        Command + Option + Shift + T
宣言に移動       Command + B または Command + Click
コード補完と置換        Tab
選択範囲の拡張     Command+  W
実行      Option + Shift + F10
ライブテンプレートの展開        Tab
複数キャレット     Option + Click
スクラッチファイル       Command + Option + Shift + Insert
メソッド一覧      Command + F12
次（前）のブレース   Command + [ または ]
関連するテストユニットへ移動      Shift + Command + T

イチオシのショートカットとしては
Shift + F6でファイル名やクラス名を参照箇所とともに一括置換
Option + F7でそのクラスや関数を利用している箇所を一括で検索
がリファクタリングで非常に便利です。

https://bit.ly/3OfOLBf

JavaScriptのプログラミングはこれだけ効率化できる！ 使用歴5年目のエンジニアが送るWebStormの厳選神業集 - ICS MEDIA

ウェブ制作にはWebStormがお勧め！ 使いこなせば操作が爆速になる機能のまとめ - ICS MEDIA

● top-webstorm-plugins-for-javascript

https://www.tabnine.com/blog/top-webstorm-plugins-for-javascript/

皆に絶対知ってほしい Webstorm ショートカット・設定集╭( ･ㅂ･)و

（2026年11月更新：1つだけだったショートカットを、よく使うものの一覧にしました）

Mac の VS Code の初期設定のショートカットです。

● 「戻る」を option + ← に変える

Sublime Text などと同じように、option + ← で前の場所に戻りたい場合は、ショートカットの一覧で「戻る」（workbench.action.navigateBack）に割り当てます。 ただし、option + ← は初期状態では単語単位でカーソルを移動する操作です。入れ替えると、その操作は使えなくなります。

設定の同期はこちらの記事を見てください。 VS Code の設定を別の Mac と共有する

（2026年11月更新：vsce のパッケージ名が変わり、認証の方法も変わるため書き直しました）

● vsce のインストール

以前の vsce パッケージは @vscode/vsce に変わりました。

npm install -g @vscode/vsce

● パブリッシャーを作る

1. Visual Studio Marketplace のパブリッシャー管理ページに、Microsoft アカウントでサインインします。
2. 「Create publisher」を押します。
3. ID（あとから変更できません）と名前を入れます。

● 公開する前に確認する

次のコマンドで .vsix ファイルを作れます。

vsce package

● 公開する（トークンを使う方法）

Azure DevOps の Personal Access Token（PAT）を作り、スコープを Marketplace の Manage にします。

vsce login パブリッシャーID
vsce publish

注意：公式ドキュメントではこの方法は非推奨で、Azure DevOps の全組織向けの PAT は 2026年12月1日に廃止 されると案内されています。

● 公開する（GitHub Actions を使う方法・推奨）

公式ドキュメントが勧めているのは、GitHub Actions や Azure Pipelines を使う方法です。GitHub Actions の場合は次のようにします。

1. Marketplace のパブリッシャーの管理ページで「Trusted Publishing」を開きます。
2. リポジトリとワークフローのファイルを登録します。
3. ワークフローのジョブに id-token: write の権限を付けます。
4. ワークフローで次を実行します。

npx @vscode/vsce publish --oidc

● バージョン番号を自動で上げる

vsce publish minor

とすると、バージョン「1.2.0」が「1.3.0」になって公開されます。

major、minor、patch を指定でき、それぞれバージョン番号の major.minor.patch に対応します。vsce publish 1.1.0 のように番号を直接指定することもできます。 Git のリポジトリの中で実行すると、バージョンのコミットとタグも作られます。

https://code.visualstudio.com/api/working-with-extensions/publishing-extension

（2026年11月更新：設定の名前が変わったため書き直しました）

HTML の開始タグを編集すると、閉じタグも一緒に変わる動きを止める設定です。

以前の設定 html.mirrorCursorOnMatchingTag は非推奨になり、今は editor.linkedEditing を使います。

● 設定方法

1. command + ,（カンマ） で設定を開きます。
2. 検索欄に linkedEditing と入れます。
3. 「Editor: Linked Editing」のチェックを外します。

settings.json に書く場合は次のようにします。

"editor.linkedEditing": false

逆に、開始タグと閉じタグを一緒に変えたい場合はチェックを入れます。

（2026年11月更新：画像だけだった内容に説明を追加しました）

Karabiner-Elements でキーを入れ替えているときや、US 配列のキーボードを使っているときに、VS Code のショートカットが思ったとおりに動かない場合の設定です。

● 設定方法

1. command + ,（カンマ） で設定を開きます。
2. 検索欄に keyboard.dispatch と入れます。
3. 「Keyboard: Dispatch」を keyCode にします。

settings.json に書く場合は次のようにします。

"keyboard.dispatch": "keyCode"

初期値は code です。元に戻したいときは code にします。

（2026年11月更新：Sublime Text 4 のフォルダの場所に直し、抜けていた ln -s を補いました）

作業の前に Sublime Text を終了してください。

Sublime Text 3 から使い続けている場合は、以下の Sublime Text を Sublime Text 3 に読み替えてください。

● 1. Dropbox にフォルダを移す

1台目の Mac で次を実行します。

mkdir -p ~/Dropbox/SublimeText
cd ~/Library/Application\ Support/Sublime\ Text
mv "Installed Packages" Packages ~/Dropbox/SublimeText/

● 2. シンボリックリンクを作る

すべての Mac で次を実行します。2台目以降は、先に元のフォルダの名前を変えておきます。

cd ~/Library/Application\ Support/Sublime\ Text
ln -s ~/Dropbox/SublimeText/"Installed Packages" "Installed Packages"
ln -s ~/Dropbox/SublimeText/Packages Packages

● ほかの方法

パッケージの一覧だけを別の Mac に移す方法もあります。 Sublime Textでインストール済みのパッケージ一覧を別のマシンに自動インストールする

（2026年11月更新：VS Code 標準の同期機能に書き直しました）

以前は設定フォルダを Dropbox に置いてシンボリックリンクを貼っていましたが、今は VS Code 標準の 設定の同期（Settings Sync）を使うのが簡単です。

● 設定方法

1. VS Code の左下の歯車（またはアカウント）のアイコンを押します。
2. 「設定の同期をオンにする」を選びます。
3. 同期する項目を選びます。
4. GitHub アカウントか Microsoft アカウントでサインインします。

別の Mac でも同じアカウントでサインインすると、設定が同期されます。

● 同期できるもの

• 設定（settings.json）
• キーボードショートカット
• ユーザースニペット
• 拡張機能
• UI の状態

● Dropbox で共有したい場合

アカウントを使いたくない場合は、シンボリックリンクで共有できます。VS Code を終了してから、User フォルダを Dropbox に移して次を実行します。

ln -s ~/Dropbox/VisualStudioCode/User ~/Library/Application\ Support/Code/User

拡張機能のフォルダ ~/.vscode/extensions は Mac の種類によって中身が変わることがあるので、共有しないほうが安全です。

（2026年11月更新：標準のコマンドで元の設定を見られるようになったため書き直しました）

● 元の設定を見る

以前は PackageResourceViewer を入れていましたが、今は標準のコマンドで見られます。

1. shift + command + P でコマンドパレットを開きます。
2. View Package File を選びます。
3. Default/Context.sublime-menu を選びます。

● 自分の設定を追加する

Packages/User/ フォルダに Context.sublime-menu というファイルを作ります。 フォルダは「Preferences」→「Browse Packages...」で開けます。

[
    { "caption": "-" },
    { "command": "reindent", "caption": "インデントを整える" }
]

詳しくは公式ドキュメントを見てください。 https://www.sublimetext.com/docs/menus.html

パッケージの設定を上書きしたいときは、OverrideAudit というパッケージも便利です。 https://packagecontrol.io/packages/OverrideAudit

（2026年11月更新：Sublime Text 4 に合わせて書き直しました）

検索パネルで日本語を入力して、変換を確定する return キーを押すと、検索が実行されて入力が消えることがあります。 以前の Sublime Text で起きていた問題で、Sublime Text 4 で起きるかどうかは確認できていません。まず最新版で試してください。

● 起きる場合の対処

検索パネルの return キーの割り当てを無効にします。

1. shift + command + P でコマンドパレットを開き、View Package File を選びます。
2. Default/Default (OSX).sublime-keymap を開いて、内容をコピーします。
3. 「Preferences」→「Browse Packages...」を開き、Default フォルダを作ります。
4. その中に Default (OSX).sublime-keymap を作って、コピーした内容を貼り付けます。
5. 次の項目のすぐ下の3行（{ "keys": ["enter"], ...）をコメントアウトします。

Find panel key bindings
Replace panel key bindings
Incremental find panel

この設定をすると、検索パネルでは return で検索できなくなります。検索パネルのボタンで検索してください。

（2026年11月更新：インストール時の英語のメッセージを省き、配布元の案内を追加しました）

SFTP は Sublime Text 用の有料パッケージです（試用できます）。詳しい説明は公式サイトにあります。 https://codexns.io/products/sftp_for_sublime

● SFTPのインストール

[command] + [SHIFT] + [P]  → 「Package Control: Install Package」から SFTPを検索してインストール

● SFTPの使い方

1.プロジェクトにフォルダを追加する

1.　Project → Add Folder to Project からフォルダを追加する
2.　追加したフォルダを右クリック「SFTP/FTP」→「Map to remote」
3.　sftp-config.json ファイルが開くので、そこに SFTPサーバ情報を記述する（必須の設定項目は ↓ こちら）

sftp-config.json で設定する項目

    "host": "SFTPサーバ名",
    "user": "SFTPユーザー名",
    "port": "SFTPポート番号",
    "remote_path": "リモートサーバのパス",
    "ssh_key_file": "~/.ssh/SSH秘密鍵",

4.　 ファイルを編集して保存すると自動的にアップロードが開始されます（ 画面下にアップロードの進捗が表示されます。success と一瞬表示されるのでそれを確認してください。failedの場合はエラーが出ています。）
5.　 プロジェクトファイルをローカルの好きな場所に保存しておきます。
6.　 サイドバーへの移動は「Ctrl」+「0」です。これでキーボードで操作できます。

（2026年11月更新：2026年11月に Marketplace で更新日を確認し、標準機能でできるようになったものを整理しました）

● Git

• GitLens：誰がいつ編集したかを表示します。 https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
• Git Graph：ブランチの状態を Sourcetree のように表示します。 https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
• Git History：ログを見やすく表示します。 https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

● JavaScript・TypeScript

• ESLint： https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Prettier： https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Jest：テストを実行します。 https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
• Quokka.js：エディタの中で JavaScript・TypeScript を手軽に試せます。 https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
• TypeScript Error Translator：TypeScript のエラーをわかりやすくします。 https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator
• Template String Converter：文字列に ${hoge} を書くと、自動でバッククォートに変えます。 https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter

Jest を自動で実行しないようにするには、次のように設定します。

"jest.runMode": "on-demand"

TypeScript の import の自動挿入は、VS Code の標準機能でできます。

● HTML・CSS

• HTML CSS Support：HTML で CSS のクラス名を補完します。 https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
• CSS Navigation：HTML のクラス名から CSS・SCSS の定義に移動します。 https://marketplace.visualstudio.com/items?itemName=pucelle.vscode-css-navigation

閉じタグの自動入力は標準の機能です。開始タグと閉じタグを一緒に変える設定はこちらの記事を見てください。 VS Code でHTMLの対応するタグにマルチカーソルが当たらないようにする

● 編集に便利なもの

• change-case：キャメルケースなどを変換します。 https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case
• Rainbow CSV：CSV を列ごとに色分けします。 https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv
• Code Spell Checker：スペルミスを見つけます。 https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
• Path Autocomplete：ファイル名を補完します。 https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete
• Log File Highlighter：ログファイルを色分けします。 https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter
• Regex Previewer：正規表現の結果を確認します。 https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
• Favorites：よく使うファイルを登録します。 https://marketplace.visualstudio.com/items?itemName=howardzuo.vscode-favorites

● 更新が止まっているが今も入れられるもの

次の拡張機能は長く更新されていません。動かない場合は外してください。

• colonize：shift + enter で行末に ; を入れます（最終更新 2017年）。
• vscode-input-sequence：連番を入力します（2016年）。
• zenkaku：全角スペースを見えるようにします（2016年）。
• Auto-Align：文字の位置を揃えます（2018年）。
• indent-rainbow：インデントを色分けします（2022年）。
• CodeMetrics：コードの複雑度を表示します（2022年）。

● 全角文字を見つける（Highlight）

Highlight 拡張機能（ https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-highlight ）で、全角のスペースや数字に色を付けられます。

"highlight.regexes": {
  "(　)": [
    {
      "backgroundColor": "#d9ad00"
    }
  ],
  "([１２３４５６７８９０])": [
    {
      "backgroundColor": "#d90000",
      "color": "#1f1f1f"
    }
  ]
}

引用： https://qiita.com/yukishiba/items/ab1d3535f2490cb99d38

● Remote Development（SSH でサーバーを編集する）

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

リモートのサーバーを、手元のファイルのように編集できます。

サーバーの監視ファイル数の上限を増やす

Linux のサーバーで次の設定をします。

sudo vi /etc/sysctl.conf

fs.inotify.max_user_watches=524288

監視するファイルを減らして速くする

設定の「Files: Watcher Exclude」に ** を追加すると、ファイルの監視を止めて速くできます。 そのかわり、更新したファイルが Git の一覧に自動で出なくなります。更新ボタンを押すと表示されます。

（2026年11月更新：Sublime Text 4 のフォルダの場所に直しました）

● Sublime Textでインストール済みのパッケージ一覧を表示

Preference > Package Settings > Package Control > Settings - User

このようなファイルになります

{
    "bootstrapped": true,
    "in_process_packages":
    [
    ],
    "installed_packages":
    [
        "Alignment",
        "All Autocomplete",
        "ApacheConf",
        "AutoFileName",
        "Autoprefixer",
        "BetterFindBuffer",
        "Blade Snippets",
        "BracketHighlighter",
        "Case Conversion",
        "Colorsublime",
        "Compare Side-By-Side",
        "CSS3",
        "CSSFontFamily",
        "DotENV",
        "EditorConfig",
        "Emmet",
        "Emmet Css Snippets",
        "ExpandRegion",
        "FileDiffs",
        "FindKeyConflicts",
        "Function Name Display",
        "Git",
        "GitGutter",
        "Goto-CSS-Declaration",
        "Hjson",
        "HTML-CSS-JS Prettify",
        "InputSequence",
        "Package Control",
        "Pretty JSON",
        "Sass",
        "SerializedDataConverter",
        "ShellCommand",
        "SideBarEnhancements",
        "Smart Delete",
        "SqlBeautifier",
        "SublimeCodeIntel",
        "SublimeLinter",
        "SublimeLinter-annotations",
        "SublimeLinter-contrib-sass-lint",
        "SublimeLinter-contrib-sublime-syntax",
        "SublimeLinter-csslint",
        "SublimeLinter-html-tidy",
        "SublimeLinter-phpmd",
        "SublimeNFDToNFCPaste",
        "SublimeOnSaveBuild",
        "W3CValidators"
    ],
    "repositories":
    [
        "https://github.com/kazu1107/InputSequence.git"
    ]
}

● 一覧を元にパッケージを一気に自動インストール

・まず パッケージコントロール をインストールします。

次に
↑　の内容を

/Users/ユーザー名/Library/Application Support/Sublime Text/Packages/User/Package Control.sublime-settings

に上書き保存して（Sublime Text 3 から使い続けている場合、フォルダ名は Sublime Text 3 のままのことがあります）、Sublime Text を再起動してしばらく待つと自動的にインストールが始まります。

インストールにはそこそこ時間がかかるので気長に待ちましょう。

（2026年11月更新：Sublime Text 4 のフォルダの場所に合わせ、配布が終わったパッケージとリンク切れを外しました）

パッケージの一覧は長年使ってきたものです。中には更新が止まっているものもあるので、動かないものは外してください。PHP や TypeScript の補完には、今は LSP と LSP-intelephense などを使う方法もあります。

Sublime Text 3 から使い続けている場合、設定のフォルダは ~/Library/Application Support/Sublime Text 3 のままのことがあります。

Sublime Text

https://www.sublimetext.com

・Package Control のインストール方法

【command + shift + p】→「Install Package Control」を選択

インストール後は、【command + shift + p】→「Package Control: Install Package」でパッケージを検索して入れます。

● ・Sublime Textおすすめパッケージ

・HTML, css3, プログラムコードコード( SCSS, SASS )編集に便利なSublimeTextパッケージ

（インストール方法: Command + Shift + P を押して「Package Control : Install Packages」を選択し、パッケージ名を入力してインストール。）

    { "keys": ["alt+super+d"], "command": "goto_documentation" } ,

brew install tidy-html5

● SublimeLinter-csslint の設定

例えば下記のように設定してエラー出力をゆるくします

{
    "linters": {
        "csslint" : {
            "ignore" : ["order-alphabetical", "important", "empty-rules", "universal-selector","font-sizes", "box-model", "zero-units", "shorthand","fallback-colors","adjoining-classes", "box-sizing"]
        }
    }
}

・PHPやRubyなどプログラミング言語編集に便利なパッケージ

・その他便利なパッケージ

(※1) Alignment を cssプロパティ（ : ）でも揃えられるようにする

【Preferences】→【Package Settings】→【Alignment】→【Settings - User】 に以下を記述して保存。

{"alignment_chars": ["=",":"] }

Goto-CSS-Declarationのショートカットを [ctrl] + ←・→ に設定する

    {
      "keys": ["ctrl+right"], "command": "goto_css_declaration",
      "args": {"goto": "next"}
    },
    {
      "keys": ["ctrl+left"],  "command": "goto_css_declaration",
      "args": {"goto": "prev"}
    }

● option 左 , option 右 で移動する

    // jump back
    { "keys": ["alt+left"], "command": "jump_back" },
    { "keys": ["alt+right"], "command": "jump_forward" },

● 前回開いたファイルを自動で次回起動時に開くのをやめる

Preference > Setting に以下を追加します

{
    "hot_exit": false,
    "remember_open_files": false,
}

● ダブルクリックでハイフンで繋いだ単語も選択できるようにする

ハイフンで繋いだ単語（ my-class ）をダブルクリック選択できるようにするには
【基本設定】→【基本設定 - ユーザ】で開くファイル に以下を追加

"word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",

● 文字コードと改行コードを表示する

【基本設定】→【基本設定 - ユーザ】で開くファイル に以下を追加

"show_encoding": true,
"show_line_endings": true,

● Sublime Textで shift + return で ＜br＞ タグを挿入する

【基本設定】→【キーバインド - ユーザ】で開くファイルに

{ "keys": ["shift+enter"], "command": "insert", "args": {"characters": "<br>" } }

を追加します。

● Sublime Textで ブックマークを（設定/解除）する

    { "keys": ["super+b"], "command": "toggle_bookmark" , "args": {} },

● Sublime Textで command + J で選択中のhtmlタグを1行にまとめる（ 要 emmet ）

【基本設定】→【キーバインド - ユーザ】で開くファイルに

    { "keys": ["super+j"], "command": "run_emmet_action" , "args": {"action": "merge_lines"} } ,

を追加します。

● Sublime Textで control + option + B で表示中のソースを自動整形（インデント）出来るようにする

【基本設定】→【キーバインド - ユーザ】で開くファイルに

{ "keys": ["control+option+b"], "command": "reindent" , "args": { "single_line": false } },

を追加します。

● Sublime Textで [command]+space で選択範囲を細かく拡張する、 [command] + [shift] + space で選択範囲を大きく拡張する

【基本設定】→【キーバインド - ユーザ】で開くファイルに

  { "keys": ["super+shift+space"], "command": "expand_selection", "args": {"to": "scope"} } ,
  { "keys": ["super+space"], "command": "expand_region" } ,

を追加します。

● Sublime Textで PHPの構文チェックを出来るようにする

1. SublimeLinter-phplint をインストールする。

2. 次の node.js パッケージをインストールする

   sudo npm install -g phplint

● ShellCommandで 任意のシェルコマンドをショートカットで実行出来るようにする

例 : 「ctrl」+「3」でPHPのバージョンを表示します

  {
    "keys": ["ctrl+3"],
    "command": "shell_command",
    "args": {
      "command": "echo $PATH" ,
      "target": "point"
    }
  } ,

● Sublime Textのおすすめショートカットキー

（基本的なショートカットは除きます。 command + ↓ とか。）

● Sublime Textのカラーテーマ

こちらのサイトから選ぶといいでしょう
https://colorsublime.github.io/
( Colorsublime というパッケージのインストールが必要です。 )

合わせて、「Preference」→「Settings」に

    "highlight_line": true,

を追加しましょう。 現在行がハイライトされて編集しやすくなります。

● sublime Textでインデントの罫線を見やすくする

1. 『基本設定』→『基本設定 - ユーザ』に以下の行を追加します。

現在アクティブなインデントのカラーが強調されて見やすくなります。

    "draw_indent_guides": true,
    "indent_guide_options": ["draw_normal", "draw_active"],

2. /Users/ユーザ名/Library/Application Support/Sublime Text/Packages/Colorsublime-Themes/カラーセッティング名.tmThemeに以下の行を追加します。

<key>guide</key>
<string>#cccccc</string>
<key>activeGuide</key>
<string>#E91E63</string>
<key>stackGuide</key>
<string>#cccccc</string>

挿入位置は background が記述してある並びでokです。

● sublime Textおすすめのフォント

Menlo
Ricty Diminished
Souce code pro

あたりがおすすめです

● sublime Textでファイルタイプ（拡張子）ごとにタブの設定を変更する

『基本設定』→ 『基本設定 - 拡張』→ 『シンタックス指定 - ユーザ』を開いて以下のように記述して保存

{
    "tab_size": 4, // タブサイズ
    "translate_tabs_to_spaces": true, // タブの代わりにスペースでインデントする
    "auto_indent": true, // 自動インデント
    "smart_indent": true, // 自動インデントを少し賢く
    "trim_automatic_white_space": true // 空行の無駄な自動インデントを削除
}

（2026年11月更新：更新が止まった OmniMarkupPreviewer の代わりを紹介します）

インストールは shift + command + P →「Package Control: Install Package」から行います。

● MarkdownEditing

https://packagecontrol.io/packages/MarkdownEditing

Markdown の色分けや、リストの続きの自動入力などを追加します。

● MarkdownPreview

https://packagecontrol.io/packages/MarkdownPreview

Markdown をブラウザでプレビューします。 コマンドパレットで Markdown Preview: Preview in Browser を選びます。

● Table Editor

https://packagecontrol.io/packages/Table%20Editor

Markdown の表の編集を楽にします。

● OmniMarkupPreviewer について

以前紹介していた OmniMarkupPreviewer は更新が止まっています。使い続ける場合に「Error: 404 Not Found」が出るときは、「Settings - User」に次を保存します。

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    }
}

（2026年11月更新：紹介していた PDF Paginate が App Store で見つからなくなったため書き直しました）

macOS のプレビューには、PDF にページ番号を入れる機能がありません。次の方法を使います。

● iLovePDF（オンラインのサービス）

https://www.ilovepdf.com/ja/add_pdf_page_number

ブラウザで PDF をアップロードして、番号の位置を選びます。ファイルをサーバーにアップロードするので、大事な書類には使わないでください。

● cpdf（コマンド）

https://community.coherentpdf.com/

brew install cpdf
cpdf -add-text "%Page" -bottom 20 input.pdf -o output.pdf

商用で使う場合はライセンスを確認してください。

● PDF 編集アプリ

Adobe Acrobat などの有料のアプリでも追加できます。

（2026年11月更新：PopClip の説明と使い方を追加しました）

PopClip は、どのアプリでもテキストを選択した瞬間に、すぐ上に小さなメニューを表示するアプリです。 メニューから、コピー・ペースト・検索・辞書・翻訳などをワンクリックで実行できます。

https://www.popclip.app/

● 入手方法

• Mac App Store
• 公式サイトから直接（無料で試せる期間があります）
• Homebrew：brew install --cask popclip

有料のアプリです。

初回起動時に「アクセシビリティ」の許可を求められるので、「システム設定」→「プライバシーとセキュリティ」→「アクセシビリティ」で PopClip をオンにします。

● 主な機能

• コピー・カット・ペースト
• 選んだ文字で Web 検索、辞書を引く
• URL を選ぶと、そのままブラウザで開く
• 文字数を数える、大文字・小文字の変換

● 拡張機能（Extensions）で機能を増やす

https://www.popclip.app/extensions/

公式サイトの拡張機能の一覧から、翻訳（DeepL・Google 翻訳）、ChatGPT などの AI への送信、メモアプリへの送信、文字の置き換えなどを追加できます。 拡張機能のページで、追加したいものの説明にある部分を選択すると、PopClip のメニューに「インストール」が出て追加できます。

● 特定のアプリで出ないようにする

パスワード管理アプリやゲームなど、メニューが出ると困るアプリは、PopClip の設定でそのアプリを除外できます。

（2026年11月更新：Atom の開発終了に合わせて書き直し、Atom 関連の記事をこの記事にまとめました）

GitHub が開発していたエディタ Atom は、2022年12月15日に開発とサポートを終了しました。 現在はダウンロードもできず、パッケージの検索・インストール（atom.io）も使えません。セキュリティの更新も無いため、今使っている場合は別のエディタへの移行をおすすめします。

● 移行先のエディタ

・Visual Studio Code（無料・いちばんおすすめ）

https://code.visualstudio.com/

Atom と同じく Electron で作られていて、使い勝手が近いエディタです。Atom でよく使われていたパッケージの多くは、VS Code では標準機能か拡張機能で置き換えられます。

bracket-matcher（対応する括弧）  → 標準機能
minimap（ミニマップ）            → 標準機能
autocomplete-paths              → 標準機能（パスの入力補完）
linter / linter-〇〇             → ESLint などの拡張機能
atom-beautify（整形）            → Prettier 拡張機能
pigments（色の表示）             → 標準機能（CSS の色の表示）
Markdown Preview                → 標準機能（command + shift + V）

• Visual Studio Code (vscode) オススメの 拡張

・Zed（無料）

https://zed.dev/

Atom を作ったメンバーが新しく開発しているエディタです。動作がとても速く、共同編集や AI 機能も組み込まれています。

・Pulsar（無料）

https://pulsar-edit.dev/

Atom をコミュニティが引き継いで開発しているエディタです。見た目や操作が Atom とほぼ同じで、Atom 用のパッケージの多くがそのまま使えます。Atom の操作に慣れていて、そのまま使い続けたい人に向いています。

● Atom をアンインストールする

アプリケーションフォルダの Atom をゴミ箱に入れたあと、ターミナルで設定ファイルなどを削除します。

rm -rf ~/.atom
rm -f /usr/local/bin/atom /usr/local/bin/apm
rm -f ~/Library/Preferences/com.github.atom.plist
rm -rf ~/Library/Application\ Support/com.github.atom.ShipIt
rm -rf ~/Library/Application\ Support/Atom

設定（~/.atom の中の config.cson や keymap.cson）を Pulsar に引き継ぎたい場合は、削除する前にコピーしておきます。

● 関連記事

• Macのおすすめテキストエディタ

（2026年11月更新：macOS の標準機能と、現在よく使われているアプリを追加しました）

メールアドレスや住所、決まったあいさつ文などを、短い文字を入れるだけで入力する方法です。

● macOS 標準の「テキストの置き換え」（無料）

1. 「システム設定」→「キーボード」→「テキスト入力」の「テキストの置き換え…」を開きます。
2. 「+」を押して、「入力」に短い文字（例：@@）、「変換」に入れたい文章（例：メールアドレス）を登録します。
3. 文章を書いているときに @@ と入力してスペースなどを押すと、登録した文章に置き換わります。

iCloud で同期されるので、iPhone や iPad でも同じ置き換えが使えます。 日本語入力中は置き換えが効かないアプリもあります。その場合は、日本語入力の「ユーザ辞書」に登録すると、変換候補に出せます。

● Raycast（無料）

https://www.raycast.com/

brew install --cask raycast

ランチャーアプリ Raycast には、無料で使える Snippets（スニペット） の機能があります。 「Create Snippet」で登録し、キーワード（例：;mail）を入力すると定型文に置き換わります。{date}（今日の日付）や {clipboard}（クリップボードの内容）などを埋め込むこともできます。

● Espanso（無料・オープンソース）

https://espanso.org/

brew install --cask espanso

設定ファイル（YAML）に定型文を書いて使うアプリです。Mac・Windows・Linux で同じ設定を使えます。

● TextExpander（有料・サブスクリプション）

https://textexpander.com/

Mac・Windows・iOS で使える、定型文入力の定番アプリです。チームで定型文を共有する機能もあります。

● そのほか

• Alfred：有料の Powerpack に Snippets の機能があります。
• Dash：API ドキュメントを検索するアプリですが、スニペットの機能もあります。「システム設定」→「プライバシーとセキュリティ」→「アクセシビリティ」で Dash を許可してから使います。 https://kapeli.com/dash

（2026年11月更新：NeoOffice のプロジェクトが終了したため書き直しました）

Mac で Word（.docx）や Excel（.xlsx）のファイルを無料で開く方法です。

● Pages・Numbers・Keynote（Apple・無料）

Mac App Store から無料で入手できます。Word・Excel・PowerPoint のファイルを開いて、同じ形式で書き出せます。

● LibreOffice（無料）

https://ja.libreoffice.org/

brew install --cask libreoffice

Word・Excel・PowerPoint に近いアプリがそろった、オープンソースのオフィスソフトです。

● Web 版の Microsoft 365（無料）

https://www.office.com/

Microsoft アカウントで、ブラウザから Word・Excel・PowerPoint を使えます。一部の機能は使えません。

● Google ドキュメント・スプレッドシート（無料）

https://docs.google.com/

Google アカウントで使えます。Word・Excel のファイルを開いて編集できます。

● ONLYOFFICE（無料）

https://www.onlyoffice.com/ja/

brew install --cask onlyoffice

Microsoft Office に近い画面のオフィスソフトです。

以前紹介していた NeoOffice はプロジェクトが終了し、公式サイトでも LibreOffice が案内されています。

（2026年11月更新：TextWrangler などの終了に合わせて書き直しました）

2つのファイルやフォルダの違いを確かめる方法です。

● Visual Studio Code（無料）

ターミナルから比較できます。

code --diff a.txt b.txt

エクスプローラーでファイルを右クリックして「比較対象の選択」を選び、もう1つのファイルで「選択項目と比較」を選ぶ方法もあります。

● BBEdit（無料でも使える）

https://www.barebones.com/products/bbedit/

brew install --cask bbedit

開発が終わった TextWrangler の後継です。一部の機能は無料のまま使えます。「Search」メニューの比較の機能で、ファイルやフォルダを比べられます。

● Kaleidoscope（有料）

https://kaleidoscope.app/

brew install --cask kaleidoscope

画面が見やすい比較アプリです。テキスト・フォルダ・画像を比べられます。

● Beyond Compare（有料）

https://www.scootersoftware.com/

brew install --cask beyond-compare

ファイルとフォルダの比較や同期ができます。Mac と Windows で使えます。

● Araxis Merge（有料）

https://www.araxis.com/merge/

● Sublime Merge（有料・無料で試せる）

Git の差分を見るなら、こちらも便利です。 https://www.sublimemerge.com/

● ターミナルで比較する

diff -u a.txt b.txt
diff -r フォルダA フォルダB
git diff --no-index a.txt b.txt

Xcode を入れている場合は、opendiff a.txt b.txt で FileMerge を開けます。

以前紹介していた DiffMerge は、Homebrew で Gatekeeper の確認を通らないアプリとして扱われています。

（2026年11月更新：開発が終わったエディタを外して現在のおすすめに入れ替え、「MaOSXのテキストエディタ」の内容をこの記事にまとめました）

Mac で使えるテキストエディタを、用途ごとに紹介します。以前紹介していた Aptana Studio、espresso、TextWrangler、Atom は開発が終わっているか、別の製品にまとめられています。

● プログラミング・Web制作向け

・Visual Studio Code（無料）

https://code.visualstudio.com/

いま最も使われているエディタです。拡張機能が豊富で、ほとんどの言語に対応しています。

• Visual Studio Code (vscode) オススメの 拡張

・Zed（無料）

https://zed.dev/

Atom を作ったメンバーが開発している、動作がとても速いエディタです。AI 機能も組み込まれています。

・Cursor（無料・有料プランあり）

https://cursor.com/

VS Code をもとにした、AI でコードを書けるエディタです。

• AI搭載コードエディタ cursor

・Sublime Text（無料で試用可・シェアウェア）

https://www.sublimetext.com/

軽くて起動が速いエディタです。複数選択・同時編集が得意です。

• Sublime Text とおすすめパッケージ

・PhpStorm / WebStorm（有料・非商用なら WebStorm は無料）

https://www.jetbrains.com/

PHP や JavaScript の開発に向いた統合開発環境です。

• PhpStormやWebStorm導入直後に行った方が良い設定

● 軽いメモ書き・テキスト編集向け

・CotEditor（無料）

https://coteditor.com/

日本で開発されている、シンプルで日本語に強いエディタです。文字コードや改行コードの変換も簡単です。

brew install --cask coteditor

・BBEdit（無料で使える・有料機能あり）

https://www.barebones.com/products/bbedit/

TextWrangler の後継です。購入しなくても、TextWrangler とほぼ同じ機能を無料で使い続けられます。

・mi（無料）

https://www.mimikaki.net/

昔からある日本製の定番エディタです。キーボードマクロ（キー操作の記録・再生）が使えます。

・Jedit Ω（シェアウェア）

https://www.artman21.com/jp/jedit_x/

日本語の文章を書くのに向いたエディタです。

● 関連記事

• Mac OS のMarkdown（マークダウン）エディタ
• エディタ Atom の開発終了と移行先