Sublime Textタグのついた記事一覧

OmniMarkupPreviewer is a plugin for both Sublime Text 2 and Sublime Text 3 that preview markups in web browsers.
GitHub – timonwong/OmniMarkupPreviewer

マークダウン記法で書かれたテキストを、ブラウザ上でリアルタイムプレビューできるパッケージ

導入ログ

Package Controllから「OmniMarkupPreviewer」をインストール
cmd + option + O でブラウザプレビュー
- 初回、404状態になってしまった。

- パッケージのユーザ設定を追記して解決
    - Preferences > Package Settings > OmniMarkupPreviewer > Settings - User

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

2020-03-28追記：404再発

久しぶりに使おうとしたところ、同様のエラーが再発。
以下のエントリーを参考にSetting – User の記述を書き換えたところ無事復活した。ありがたい。
- OmniMarkupPreviewer 404 Not Found 解決法 – Qiita

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

参考エントリー

Sublime Text 3 に Sublimerge Pro を導入する

2017-04-06 12:00 2022-08-19 0:09

開発環境

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 に対応

手順

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

使い方

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

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

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

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

参考URL

ファイル比較する方法 ~Sublimerge~

SublimeText に CSScomb を導入する

2017-03-28 12:00 2022-07-09 23:33

開発環境

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.

整列時の設定を変更する

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

Sublime Text 3 に Emmet を導入する

2017-03-23 0:00 2022-08-21 11:31

開発環境

Emmetとは

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

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

手順

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

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

2017-02-10 12:00 2022-07-09 23:33

開発環境

経緯

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

2018-10-24 追記

.YAML-tmLanguageファイルの書き方がガラリとかわっていたので、この記事の内容は使えない。後日再チャレンジする。

2020-07-08 追記

PackageDevの新規ファイル作成・コンバート手順・.YAML-tmLanguageファイルの書き方がちょっとわかったので使えるようになった。

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

2016-12-07 0:03 2022-08-20 16:00

開発環境

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

Package Control
Key Bindings
- for Mac
- for Windows
Settings（現在のエントリー）

Settings とは

Settings – Sublime Text 3 Documentation
https://www.sublimetext.com/docs/3/settings.html

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

設定画面の開き方

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

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

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

2016-12-07 0:01 2022-07-09 23:33

開発環境

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

Package Control
Key Bindings
- for Mac（現在のエントリー）
- for Windows
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」を検索

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

2016-12-07 0:00 2022-07-09 23:33

開発環境

編集

選択

行選択
- 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