● cursor

https://www.cursor.com/

.cursorrules ファイルで AIに前提知識を与えることができます。

.cursorrules

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

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

アクティビティバーを vs code と同じにする

ユーザー設定を開きworkbench.activityBar.orientationの値をverticalに設定します

● haystackeditor

https://haystackeditor.com/

● obsidian

✅ おすすめです
https://obsidian.md/

● MacDown（無料） ( M1 , M2 Mac 未対応 ❌ )

http://macdown.uranusjr.com/

● Haroopad（無料）

http://pad.haroopress.com/ Windows, Mac, Unix版があります。

● boostnote （無料）( M1 , M2 Mac 未対応 ❌ )

http://boostnote.io

● MarkEdit for Markdown

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

● zettlr

https://www.zettlr.com/download/macarm

● MWEB（有料）

http://www.mweb.im

● Marxico（WEBアプリ）

http://marxi.co/ WEBアプリです。ブラウザでアクセスするだけですぐ使えます。

● (GitHub-Flavored) Markdown Editor（WEBアプリ）

http://jbt.github.io/markdown-editor/ こちらもブラウザでアクセスするだけですぐ使えます。

● 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 + [

・戻る

Command + Option + 左
　↓
Option + 左

・次へ

Command + Option + 右
　↓
Option + 右

・コード補完

Control + space
　↓
Command + space

・前のタブを選択

Command + option + ←

・次のタブを選択

Command + option + →

● 設定を同期する

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

メモリ設定する

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

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

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

● 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でファイル名やクラス名を参照箇所とともに一括置換
Alt + 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 ショートカット・設定集╭( ･ㅂ･)و

前に戻る
Option + ←

● vsce コマンドのインストールと公開

npm install -g vsce

● 公開

vsce publish

● アップデート

extension の更新と package.json の バージョンを正しく更新したら

vsce publish

でアップデートできます。

● バージョン番号を自動でアップデート

vsce publish minor

とすると、バージョン「1.2.0」→「1.3.0」として、アップデートします。

major, minor, patch が選択できます。

それぞれバージョン番号の

major.minor.patch

にマッチします。

● VS Code で　自動で対応するタグにマルチカーソルが当たらないようにする

「設定」→「 MirrorCursor で検索」

対応する HTML タグでカーソルのミラーリングを有効または無効にします

のチェックを外します。

● Visual Studio Code で USキーボードを使用する

次のように設定します。

● SublimeTextの設定を Dropbox で共有する

1. Dropbox 上に用意するSublime Textのフォルダ

<ログインユーザー名> のところは適宜読み替えてください

/Users/<ログインユーザー名>/Dropbox/SublimeText/Installed Packages
/Users/<ログインユーザー名>/Dropbox/SublimeText/Packages

2. 既にサブライムテキストを使用中の場合は既存の二つのフォルダをリネームします

（ またはこれらの二つのフォルダをドロップボックスに移動させます）

~/Library/"Application Support"/"Sublime Text 3"/"Installed Packages"
~/Library/"Application Support"/"Sublime Text 3"/Packages

3. 使用するMacからDropboxへシンボリックリンクを貼る

 cd ~/Library/"Application Support"/"Sublime Text 3"
/Users/<ログインユーザー名>/Dropbox/SublimeText/"Installed Packages"  "Installed Packages"
/Users/<ログインユーザー名>/Dropbox/SublimeText/Packages

（フォルダ名にスペースを含む場合はダブルクォーテーションでくくります）

● Visual Studio Code (vscode) で設定をDropBoxを使って共有する

＊ 1. Visual Studio Code (vscode)の 次の二つのフォルダをドロップボックスに移動し、 シンボリックリンクを貼ります

Finderから（移動 → フォルダへ移動）を 選択し次のパスを入力しているします。

~/ライブラリ/Application Support/Code/User
~/.vscode/extensions

＊ 2. 新しいマシンや別のマシンを設定するときは以下のコマンドを実行して、 Dropbox にリンクを貼ります。

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

● SublimeTextで右クリックメニュー（コンテキストメニュー）をカスタマイズする

SublimeTextで右クリックメニューは 自由にカスタマイズすることができますが、 デフォルトの設定値は隠されています。 そこで 隠されている設定ファイルを表示させるパッケージをインストールします

● PackageResourceViewer

https://packagecontrol.io/packages/PackageResourceViewer

こちらを「command + shift + P 」の「Install Package」 からインストールします。

● 右クリックメニューの設定ファイル Context.sublime-menu を表示させる

Package Rexource Viewer: Open Resource
　　↓
Default
　　↓
Context.sublime-menu

デフォルトの右クリックメニューを表示させます。 ここから変更できます。

● Sublime Textで日本語検索を行う

Sublime Textはデフォルトでは日本語検索は行えません。
そこで日本語検索が行えるように設定ファイルを書き換えます。

・1. Sublime Textを起動して「Preferences」→「Key Bindings」を開いて左側のウィンドウをコピーする。

・2. Finder から 「移動」→「フォルダへ移動...」して「~/Library/Application Support/Sublime Text 3/Packages/Default」へ移動する。

・3. ファイル「Default (OSX).sublime-keymap」を作成して、先ほどコピーした設定をペーストする

・4. 次の項目の直下3行をコメントアウトする

Find panel key bindings　の下3行の { "keys": ["enter"],  ......
Replace panel key bindings　の下3行の { "keys": ["enter"],  ......
Incremental find panel key 　の下3行の { "keys": ["enter"],  ......

● SFTPのインストール

[command] + [SHIFT] + [P]  → 「Package Controll : 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」です。これでキーボードで操作できます。

● SFTPインストール完了時のメッセージ

Package Control Messages
========================

SFTP
----

  Thanks for installing Sublime SFTP! Below are some quick notes to get you
  started with the plugin. Please see https://wbond.net/sublime_packages/sftp for
  the full documentation.

  There are two major modes of operation:
  1. Mapping a local folder to a remote folder
  2. Working off of a server

  Mapping a Local Folder to a Remote Folder
  ----

  To map a local folder to a remote folder, right-click on it in the side bar
  and select the SFTP/SFTP > Map to Remote... You will enter your connection
  parameters and a new file will be created named sftp-config.json.

  Once this file has been saved, all files in that folder and all subfolders
  will have various operations available via the side bar context menu, editor
  context menu and command palette.

  Working off of a Server
  ----

  To work off of a server, use the File menu and select SFTP/FTP > Setup Server...
  You will enter your connection parameters and options then save the file with
  the name you want to give the connection.

  Once the server config is saved, you will be automatically connected to the
  server and you can browse and perform actions via the quick panel.

  Unfortunely due to limitations of the Sublime Text API, it is not possible
  to present the remote filesystem in the side bar. There are, however, key
  bindings for connecting to servers to help reduce the amount of time remote
  file operations take.

  Support
  ----

  To learn more about the features and settings, please visit
  https://wbond.net/sublime_packages/sftp.

  If you are having trouble, please visit
  https://wbond.net/sublime_packages/sftp/support. The support page includes
  instructions for capturing a debug log that will be useful if you believe
  you are experiencing a bug.

● colonize （ shift + enter ）で行末に ; を入れる

https://marketplace.visualstudio.com/items?itemName=vmsynkov.colonize

● Jest JavaScript , TypeScript のテスト

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

起動時にテストを自動実行しないようにするには

{
  "jest.autoRun": { "watch": true }
}

● TypeScript Error Translator

TypeScriptエラーを翻訳してくれる
https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator

● Auto Import

TypeScript の import を自動で挿入してくれる
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

● Template String Converter

文字列内に ${hoge} のような変数が表れた際に自動的に `(バッククォート) で文字列を囲うように置換する
https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter

対象ファイルは設定できます

    "template-string-converter.validLanguages": [
        "vue",
        "svelte",
        "typescript",
        "javascript",
        "typescriptreact",
        "javascriptreact"
    ],

● change-case

ケースを変更する
https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

● Search node_modules

node_modules を検索する
https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules

● vscode-input-sequence

連番の数字入力
https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence

● Quokka.js

VSCodeで手軽にJavaScript TypeScript を試す
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

● Git Graph

git の更新やブランチの状態を sourcetree.app のように表示します
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

● Rainbow CSV

CSVをカラムごとに色分けします
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

● CSS Navigation

htmlでクラス名を右クリックして「定義へ移動」や「F12」へ cssや scss の該当クラスへジャンプする。
CSSPeek よりおすすめ。

● HTML CSS Support

HTML を記述している時に CSS のサポートを受けることができます
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

● Auto Close Tag

HTML の閉じタグの入力支援
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

● Code Spell Checker

スペルミスを防ぎます
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

● zenkaku

全角文字を薄いグレーで表示する
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

● indent-rainbow

インデント階層を色分け
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

● Path Autocomplete

フォルダ名やファイル名のオートコンプ（入力補完を行う）
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

● eCSStractor for VSCode

cssにHTMLタグを貼り付けると CSS セレクターを生成する
https://marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port

● Auto Close Tag

</ でタグを閉じる

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

● FileUtils

左のエクスプローラーツリーから複製（Duplicate）が行えるようになります。

● Remote Development

SSH で接続してリモートサーバーをローカルサーバーのように編集する 監視するファイル数の上限を設定する設定方法　

sudo vi /etc/sysctl.conf

fs.inotify.max_user_watches=524288

↑ 524288 は 最大値です。 任意の数値を設定してください。

Remote Development を使用するときに Watcher Excludeでファイルを除外してリモート開発を高速化する

設定の「Watcher Exclude」に以下を追加します。

（上から4つ目まではデフォルトで設定されています一番下の ** を追加します）

**/.git/objects/**
**/.git/subtree-cache/**
**/node_modules/**
**/.hg/store/**
**

この設定を追加するとファイルを更新したときに、gitの更新されたファイル一覧に自動的にどっちが表示されなくなります。 （その代わりに更新ボタンをいちど押せば表示されるようになります）

● CodeMetrics

https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-codemetrics
コードの複雑度（Cyclomatic complexity）などを表示する

● Auto-Align

https://marketplace.visualstudio.com/items?itemName=bladnman.auto-align
自動で揃える文字を判別して揃えてくれます

揃える文字を追加する

    "autoalign.moveableItems": [
        "=>",
        "=",
        ":",
        "+=",
        "-="
    ],

● Log File Highlighter ログファイルを見やすくする

● Regex Previewer 正規表現を確認する

● Favorites お気に入り機能

● file-icons-mac （macライクなアイコン）

● Auto Rename Tag （htmlタグのリネームを便利にする）

● CSS関連

● IntelliSense for CSS class names in HTML

css入力時に ID, CLASS 名を保管する

● Git関連

・Git Lens

誰がいつ編集したかを表示する

・Git History

ログを見やすく表示

vscode-caniuse
gitflow
Git History
Log File Highlighter

● 全角文字を発見する Hightlight

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

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

参考 : https://dev.to/gsdev/10-vscode-extensions-i-can-t-live-without-1i5c

● 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 3/Packages/User/Package Control.sublime-settings

に上書き保存して、Sublime Text を再起動してしばらく待つと自動的にインストールが始まります。

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

Sublime Text

https://www.sublimetext.com

・パッケージコントローラーインストール方法

【command + shift + p】 →【install】→【return】
表示されるウィンドウに検索文字列を入力してパッケージ名を選択

● ・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 の設定

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

{
    "paths": {
        "osx": ["/Users/USER-NAME/.anyenv/envs/ndenv/versions/v9.11.2/bin/"],
    },
    "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のカラーをカスタマイズする

http://tmtheme-editor.herokuapp.com
作成したファイルは拡張子「.tmTheme」をつけて

/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/Colorsublime-Themes/

に移動します。
『Sublime Text』→『Preferences』→『ColorScheme ... 』から選択して適用させます。

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

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

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

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

2. /Users/ユーザ名/Library/Application Support/Sublime Text 3/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の設定

こちらを参考にするといいです。 http://bit.ly/22xr0pC

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

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

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

Sublime Text

https://www.sublimetext.com

Sublime Text でMarkdownを編集する時に便利なパッケージをしょうかいします。

● 1. Sublime Text でマークダウンのリアルタイムプレビューを行う OmniMarkupPreviewer

・ OmniMarkupPreviewer で Error: 404 Not Found が表示される時の対処法

「基本設定」→「Package Settings」→「OmniMarkupPreviewer」→「Settings - User」に以下を保存する。

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

● 2. Sublime Text でマークダウンテーブル編集を楽にする「Table Editor」

MacでPDFを印刷するときにページ番号を追加する

● pdf Paginate

https://itunes.apple.com/jp/app/pdf-paginate/id866628744

（注意）横位置（横長）の pdf 書類だとうまくページ番号が挿入されません。

ATOMでショートカットキーを自分好みにカスタマイズするには

・【ATOM】→【環境設定】→【キーバインド】 から変更したいメニューの左のアイコンをクリックして設定をコピー
・キーマップファイル のリンクを押して keymap.cson を開く
・開いたファイルにペーストして好きなキーに書き換える
・ATOMを再起動

例 ブックマークの切り替え( Command+F2 を Command+b に書き換える) keymap.cson

'atom-text-editor':
  'cmd-b': 'bookmarks:toggle-bookmark'

popclip

https://itunes.apple.com/jp/app/popclip/id445189367?mt=12

エディタ Atom の再インストールを行いたく、まずアンインストールを行う。

アプリケーションフォルダの Atom を削除
rm -rf ~/.atom
rm /usr/local/bin/atom
rm /usr/local/bin/apm
rm ~/Library/Preferences/com.github.atom.plist
rm -rf ~/Library/Application Support/com.github.atom.ShipIt
rm -rf ~/Library/Application Support/Atom

エディタ Brackets のショートカットを変更するには

【デバッグ】>【ユーザーキーマップを開く】

から設定ファイルを開きます。（jsonフォーマット）

設定は以下のようにします。

{
    "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
        "overrides": {
            "Cmd-Up":          "",
            "Cmd-Down":        "",
            "Cmd-T":           "io.emmet.matching_pair",
            "Cmd-Ctrl-Up":     "edit.lineUp",
            "Cmd-Ctrl-Down":   "edit.lineDown",
            "Cmd-R":           "navigate.gotoDefinition",
            "Cmd-P":           "navigate.quickOpen" 
        }
}

Brackets

アドビが開発している次世代のWEB用テキストエディタです。
http://brackets.io

emmetをインストールするとHTML入力作業が早くなります。

●emmet

http://emmet.io

emmetのHTML定義を日本語にする

extensions/user/brackets-emmet/node_modules/emmet/lib/snippets.json
（/Users/ユーザ名/Library/Application Support/Brackets/extensions/user/brackets-emmet/node_modules/emmet/lib/snippets.json）

冒頭の言語設定（ en ）のところを以下のように書き換える。

{
 "variables": {
  "lang": "ja",
  "locale": "ja-JP",
  "charset": "UTF-8",
  "indentation": "\t",
  "newline": "\n"
 },

BracketsのEmmetをカスタマイズしてより使いやすくする | 9ineBB

Brackets おすすめの拡張機能（ Bracketsのメニュー > ファイル > 拡張機能マネージャー から検索してインストールします。）

●Brackets Tools

複数行のリストを <ul><li> リストに変換したり細かい便利なツール集

●Brackets CSS Class Code hint

HTMLのクラスを設定するときに読み込んであるcssのクラス名をリストで出してくれる。

●Brackets CSSfier

cssファイルにあえてHTMLコードをペーストすると、からのCSSを作成する。（ID,クラス名入力を省略できる。）

<div id="#navbar-main"></div>

　↓ このコードをペーストすると

#navbar-main {
}

が自動で作られる。

●Paste and Indent

BracketsはAtomとくらべてコードをペーストした時に崩れが生じます。 これを入れるとペースト時に自動インデントしてくれるようになります。

●CDN Finder

CDN（jQueryなど有名なJavaScriptライブラリをホスティングしているさいと）を検索できます。

●Brackets Css Color Preview

BracketsではCSSのカラー設定表記があるときにオンマウスで色をプレビューできますが、 これは行番号のところに常に色を表示します。

●Overscroll

もうちょっと下までスクロール出来るようになります。

●Brackets Outline List

現在開いているファイルの関数やタグや設定を一覧できます。

●Display Shortcuts

「ヘルプ」>「Show Shortcuts」からショートカット一覧を表示します。

●Brackets File Icons

ファイル一覧のところでアイコンを表示できるようになります。 アイコンは

• Ionicons
• Devicons から選べます。

●HTML Block Selector

MacとWindows 両方でAtomを使用している時など、パッケージをいちいちダウンロードするのが面倒です。 そこでアカウントを作って同期させる（半手動）と便利です。

1. まず apm コマンドをインストールする

Atomを起動してから

【Atom】→【Install Shell Commands】を実行

2. Atom アカウントの作成

https://atom.io/ からアカウントを作成してログインする。（GitHubアカウントがある場合はそのままログインできる。）

3. 現在インストール済みのパッケージ全てにスターを付ける

apm stars --install

これを実行すると、 Token を入力するよう促される。 Token は https://atom.io/account に表示されるのでこのページに移動してコピペ。

4. 新しい環境のAtomにパッケージをインストールする

コマンドラインから

apm stars --install

とすると、スターのついたパッケージがすべて一括インストールされる。

参考 : http://goo.gl/9RlfLT

Atom

プログラミング、WEB制作や文書作成に使いやすいフリーソフトのエディタ　Atom。

● エディタatomのメニューを日本語化する

【Preferences】→【Install】→【japanese_menu】をインストールすると日本語になります

● bracket-matcher

対応する括弧やHTMLタグを光らせたり、ctrl + M で対応する括弧に移動したり、cmd + ctrl + M で対応する括弧内をすべて選択したりできます。

● autocomplete-paths

ローカルのファイル名の入力補完をしてくれます。

● atom-html-preview

HTMLファイルを編集中にライブプレビューします。 ctrl + shift + H で起動します。
https://atom.io/packages/atom-html-preview

● pigments

CSSカラーコードの背景色をその色で表示します。

● autoprefixer

CSSのベンダープレフィックスを自動で追加・削除してくれます。

● EditorConfig

「プロジェクト」「拡張子」ごとにタブ幅や後ろの空白行を制御する .editorconfig に対応できるようになります。

● ighlight-selected

ある単語を選択すると同じ単語をハイライト表示します。

● script

ほとんどのプログラミング言語を即座に実行します。（セーブも必要なし）
画面右下のモードを実行したい言語に設定して cmd + A で実行します。

● show-ideographic-space

全角スペースを表示します。 インストール後にメニューの 　【Atom】→【スタイルシート】から style.less を開いて

atom-text-editor::shadow {
  .highlight.ideographic-space {
    .region:after {
      color: #800000;
      background-color: #CCCCCC;
    }
}

で、好きな色に設定できます。

● Sublime-Style-Column-Selection

• メニューの【Packages】>【Atom Beautify】>【Beautify】

PHPでコード整形をするには php-cs-fixer.phar http://cs.sensiolabs.org が必要です。

● symbols-tree-view

プログラムソース記述時に関数やメソッド、変数の一覧を表示します。

• ctrl + option + o

● minimap

画面右にファイル全体のミニマップを表示する

● minimap-highlight-selected

minimapに「highlight-selected」結果を表示する

● minimap-bookmarks

minimapにブックマークをを表示する

● minimap-find-and-replace

minimapに検索結果を表示する

● minimap-autohide

スクロール時にのみminimapを表示させる

● tag

https://atom.io/packages/tag

HTML入力時に <div> を入力した後 < を入力したタイミングで自動でタグを閉じてくれます。

● emmet

https://atom.io/packages/emmet
HTML入力支援

div>div

と記述して TAB キーを押すと

<div>
  <div></div>
</div>

に展開されます。
http://docs.emmet.io/cheat-sheet/

他にも以下のようなショートカットがあります。

Atom（無料）

https://atom.io

エディタ「Atom」は実はプログラムをさほど書かないライトユーザー向けにもいいのではないかと思うので 簡単な設定方法を書いておきます。 Atomを実行したら最初に次のようにするといいでしょう。

1. 画面テーマを明るい色にする

メニューの【Atom】>【Preferences】>【Themes】から『Atom Light』を選択する

2. メニューを日本語化する

メニューの【Atom】>【Preferences】>【Install】から『Localization』をインストールする。
インストール後に再起動し、メニューの【Package】>【Localization】の『Setting』のところに
Current Languageの項目があるので【Japanese】と入力してAtomを再起動

Markdownのプレビューを表示するには

[command] + [shift] + p を押して preview と入力すると
『Markdown Preview: Toggle』と表示されるのでそれをクリック

参考：http://goo.gl/bai5xR

Dash（無料）

https://kapeli.com/dash マニュアル検索 + 定型文入力支援アプリ

Dashのスニペットの使い方

1. 【システム環境設定】 > 【セキュリティとプライバシー】>【プライバシー】>【アクセシビリティ】で Dash を有効にした後Dashアプリを再起動
2. Dashアプリから【File】>【New Snippet】でスニペット登録ウィンドウを表示してそこへ登録していきます。
3. 登録したショートカットキー（Abbreviation）を入力すると定型文が入力されます。

Alfred

Alfredは無料ですが スニペットを使うには有料のPowerPackを導入する必要があります

TextExpander（シェアウェア）

https://smilesoftware.com/TextExpander/index.html

Mac, Windows, iOS で使用できる定型文入力支援アプリです。

Macでワード（.docx）やエクセル（.xls）ファイルを開くにはこちらのソフトがおすすめです。

● Libre Office

https://ja.libreoffice.org

● Neo Office

http://www.neooffice.org/neojava/en/index.php

● Microsoft Office Online（ブラウザで使える無料のWEBサービス）

https://office.live.com/start/default.aspx
こちらも意外と使い勝手位がいいのでおすすめです。

DiffMerge

http://sourcegear.com/diffmerge/downloads.php
ファイルの比較はもちろんのこと、ディレクトリごとのファイル比較もできます。おすすめ。

DiffFork（$26）

http://www.dotfork.com/difffork/
画面が見やすいのでおすすめです。

TextWrangler（無料）

http://www.barebones.com/products/textwrangler/
メニューから【Search】【Find deferences】を選択すると2つのテキストファイルを選択するメニューが出てきますので 選択するとファイル比較ができます。

JDiff X （書類比較プラグイン for Jedit X）

http://www.artman21.com/jp/jdiff_x/

Jedit X で編集中の２つの書類の差異をわかりやすく対照表示し、編集できるようにする Jedit X Rev.2 用のプラグイン。タイムマシンバックアップとの比較もサポートしています。

SublimeText （$70）

http://www.sublimetext.com
パッケージ「Sublimerge」差分とマージができます
http://www.sublimerge.com

ARAXIS MERGE

http://www.araxis.com/merge/index.ja