開発環境カテゴリーの記事一覧

Sublime Text 3 に Sublimerge Pro を導入する

Sublimerge とは

Sublimerge
https://www.sublimerge.com/

  • Sublime Text でファイルの差分比較ができるプラグイン。
  • 以下2つのバージョンが存在する。
    • Sublimerge 3
      • まだBeta版しかない。2018年10月を最後に動きなし。
      • Sublime Text 3 のみ対応
    • Sublimerge 2 (Sublimerge Pro)
      • 安定版がリリースされている
      • Sublime Text 2 と 3 に対応

2023-09-23 追記

新しいPCを買ったのでセットアップしよーと思ったら、www.sublimerge.com 自体がなくなり、提供終了しておりました。悲しい。

手順

  1. Package Controlで「Sublimerge Pro」を検索してインストール
  2. 購入済みのライセンスを有効化する
    • ツールバー > Preferences > Package Settings > Sublimerge > Enter License を選択
    • 画面下部に表示されたテキストボックスにライセンスキーを入力して Enter

使い方

開いているファイル同士を比較する場合

  1. Ctrl + Shift + D で Sublimerge を実行
  2. 「Compare to View…」を選択
  3. 表示された候補から比較するファイルを選択
    • 表示されない場合は、異なる Syntax が設定されている可能性あり
    • Command Palette(Ctrl + Shift + P)の Set Syntax: 名前 で設定を変更してからリトライする
  4. 比較結果が表示される

クリップボードのテキストと比較する場合

  1. Sublime Text 上に比較したいテキストを開く
    • ファイルとして保存されていなくてもOK
  2. Ctrl + Shift + D で Sublimerge を実行
  3. 「Compare to Clipboard」を選択
  4. 比較結果が表示される
    • シンタックスハイライトは開いているファイルの Syntax 設定に応じて自動適用

参考URL

SublimeText に CSScomb を導入する

CSScombとは

CSScomb is a coding style formatter for CSS.
You can easily write your own configuration to make your stylesheets beautiful and consistent.
GitHub – csscomb/sublime-csscomb: Sublime plugin for CSScomb—CSS coding style formatter

スタイルシートを指定した設定で一括整形できるパッケージ

事前準備

  • 動かすにはnode.jsが必要になるので、ダウンロードしてインストールする。
  • インストール完了時に以下の案内がでた。

This package has installed:

  • Node.js v8.12.0 to /usr/local/bin/node
  • npm v6.4.1 to /usr/local/bin/npm
    Make sure that /usr/local/bin is in your $PATH.

整列時の設定を変更する

  1. Preferences > Package Settings > CSScomb > Settings – Default を開き、中身をコピー
  2. Preferences > Package Settings > CSScomb > Settings – User を開き、ペーストした内容を書き換えて保存

Sublime Text 3 に Emmet を導入する

Emmetとは

Emmet — the essential toolkit for web-developers
https://emmet.io/

  • HTMLとCSSの記述を効率化するテキストエディタ用のプラグイン
  • 2017年から利用しているが、いつだか仕様が変わり独自スニペットの登録などができなくなった(不便)
  • 現在はHTMLを展開する用途でのみ使っている

手順

  1. Package Controllから「Emmet」をインストール
  2. Ctrl + E で展開できるように Key Binding を設定
  3. 展開時にコメントが挿入されるように Emmet のSetting – User を設定

Read More

Sublime Text 3 に PackageDev を使用してオリジナルのシンタックスハイライト設定を作る試み

経緯

はてな記法を使ってテキストエディタで文章を書くことが多いので、はてな記法用のシンタックスハイライトを作りたい。

  • 2018-10-24 追記
    • .YAML-tmLanguageファイルの書き方がガラリとかわっていたので、この記事の内容は使えない。後日再チャレンジする。
  • 2020-07-08 追記
    • PackageDevの新規ファイル作成・コンバート手順・.YAML-tmLanguageファイルの書き方がちょっとわかったので使えるようになった。

Read More

Sublime Text 4 の設定(3/3) – Settings

Sublime Text 3 の設定エントリー一覧

  1. Package Control
  2. Key Bindings
  3. Settings(現在のエントリー)

Settings とは

Settings
https://www.sublimetext.com/docs/settings.html

  • フォントサイズ、折返し、文字コードなど画面上の表示や挙動の設定
  • Key Bindings 同様、JSON形式のファイルで管理されており、自分の好きなように設定を上書きすることができる

設定画面の開き方

以下いずれかの操作で開ける。

  • ツールバー>Sublime Text>Preferences>Settings
  • Package Control>「Prefereces: Setting」を検索
  • ショートカットキー:cmd + , ※Macのみ

Read More

Sublime Text 3 の設定(2/3) – Key Bindings [for Mac]

Sublime Text 3 の設定エントリー一覧

  1. Package Control
  2. Key Bindings
  3. Settings

Key Bindings とは

Key Bindings – Sublime Text 3 Documentation
https://www.sublimetext.com/docs/3/key_bindings.html

  • ショートカットキーの割当設定
  • JSON形式のファイルで管理されており、自分の好きなように設定を上書きすることができる
  • 初期状態ではデフォルトのファイルは編集できないが、後述の事前準備手順を行うことで編集可能になる
    • コメントアウトして設定自体を無効化したいときに利用する
  • 設定ファイル上の「super」は「cmd」に該当

設定画面の開き方

  • ツールバー>Sublime Text>Preferences>Key Bindings
  • Package Control>「Prefereces: Key Bindings」を検索

Read More

Sublime Text 3 の設定(1/3) – Package Control

Sublime Text 3 の設定エントリー一覧

  1. Package Control(現在のエントリー)
  2. Key Bindings
  3. Settings

Package Control とは

Package Control – the Sublime Text package manager
https://packagecontrol.io/

Sublime Text で利用できる拡張機能(パッケージ)を管理するツール

インストール方法

  1. Command Paletteを開く
    • ツールバー>Tools>Command Palette
    • またはショートカットキー
      • Mac:Cmd + Shift + P
      • Windows:Ctrl + Shift + P
  2. Install Package Contolを入力して実行

Read More

Sublime Text 3 のショートカットキー

編集

選択

  • 行選択
    • cmd+L
      • 続けて L 入力→次の行を連続選択
  • 矩形選択
    • cotrol+shift+↑↓
  • タグの中身を選択(tag-contents)
    • cmd+shift+A

移動・複製・削除

  • 行の入れ替え
    • cmd+control+↑↓
  • 行の複製
    • cmd+shift+D
  • 行の削除
    • control+shift+K
  • カーソル位置~行頭まで一括削除
    • cmd+delete
  • カーソル位置~行末まで一括削除
    • cmd+fn+delete
      • macOS のショートカットキー ctrl+K と同じ挙動

インデント

  • インデントを反映して貼付
    • cmd+shift+V
  • インデントを自動整形(Reindent)
    • cmd+shift+R ※任意で設定

カーソル操作

  • 最上部/最下部へ移動
    • cmd+↑↓
  • 単語ごとに移動
    • option+←→
  • 選択範囲の末尾にカーソルをフォーカス
    • cmd+shift+L

検索

  • 現在の選択範囲に一致するものを検索→選択
    • cmd+D
      • 続けて D 入力→連続選択
      • 続けて K 入力→選択せず次に進む

文字操作

  • 選択した文字列を p タグで囲む
    • control+shift+W
  • 数値を1単位で上下する
    • ctrl+↑↓
  • 数値を0.1単位で上下する
    • option+↑↓
  • 数値を10単位で上下する
    • cmd+option+↑↓
  • アルファベットの大文字/小文字を切り替える
    • a → A (Uppercase)
      • cmd+K → U (Kのあとに連続して U を入力)
    • A → a (Lowercase)
      • cmd+K → L (Kのあとに連続して L を入力)

画面操作

  • Package Control
    • cmd+shift+P
  • Settings
    • cmd+,

導入済みパッケージ操作

  • CSScombを実行する
    • ctrl+shift+C
  • Emmetで展開する
    • ctrl+E