hi3103の備忘録

概要

EditorConfig
https://editorconfig.org/

• EditorConfig とは、複数人で開発をするときにコーディングのスタイルを統一するためのファイル形式&プラグインのこと
• 使用するに当たっては、ネイティブでサポートされているものと、プラグインの導入が必要なものがエディタや IDE によって異なる
• Sublime Text はプラグイン＝パッケージのインストールが必要

導入するもの

sindresorhus/editorconfig-sublime: Sublime Text plugin for EditorConfig – Helps developers maintain consistent coding styles between different editors
https://github.com/sindresorhus/editorconfig-sublime

手順

1. Package Controlで「EditorConfig」を検索してインストール
2. テスト用ファイルを用意して動作チェックする

Read More

概要

• Git を扱うようになってから、CUI での操作が増えた
• open . で Finder が開くように、コマンド入力で指定したファイルを Sublime Text で開くといった動作をしたくなった
• できそうなので設定をしてみる

公式リファレンス

Command Line Interface
To use subl, the Sublime Text bin folder needs to be added to the path. For a typical installation of Sublime Text, this will be located at /Applications/Sublime Text.app/Contents/SharedSupport/bin.

パスを通してあげれば subl というコマンドが使えるようになるらしい。

Read More

概要

• 愛用していた Sublimerge Pro が死んでしまい、新PCにセットアップできなかった
• sublimerge.​com ドメイン自体がもう別の誰かに取られてるみたい
• 代替ツールを探したがうまいことみつからない
• とりあえず繋ぎとして、旧PCに残っているファイルからプラグインを復旧する

やったこと

旧PCから必要なファイルを取得

• 以下のディレクトリを開く
  • C:\Users\ユーザー名\AppData\Roaming\Sublime Text\
• 以下のファイルを保存する
  • Installed Packages
    • Sublimerge Pro.sublime-package
  • Packages
    • Sublimerge Pro（フォルダまるごと）
  • User
    • Sublimerge.sublime-license
    • Sublimerge.sublime-settings

新PCにインストール

1. Package Contol の設定ファイルを編集

   • 保存場所
     • C:\Users\ユーザー名\AppData\Roaming\Sublime Text\Packages\User
   • ファイル名
     • Package Control.sublime-settings

   • やること

     • installed_packages の配列内に Sublimerge Pro を追加する

       {
           "bootstrapped": true,
           "in_process_packages":
           [
           ],
           "installed_packages":
           [
               "ApacheConf",
               "ayu",
               "Compare Side-By-Side",
               "DiffTabs",
               "Emmet",
               "HTML-CSS-JS Prettify",
               "IMESupport",
               "Sublimerge Pro",
               "Package Control",
               "PowerShell",
               "Syntax Highlighting for Sass",
           ],
       }

2. 旧PCから保存したファイルを、同じ場所に複製

3. Sublime Text を起動

   • すでに開いている場合は、一度閉じてから開き直す（再起動）

動作チェック

• 適当なファイルを2つ表示
• Ctrl + Alt + D で Sublimerge が動作するか確認

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

1. Package Control
2. Key Bindings
   • for Mac
   • for Windows（現在のエントリー）
3. Settings

前置き

• 職場はMac、自宅はWindowsを使っているため、どちらも同じ感覚で操作できるようにすることを目的としている
• 人によってはデフォルトで十分な（わざわざ変更する必要がない）設定項目もある
• キーボードはMac・WindowsともにUS配列を利用
• PowerToys の「Keyboard Manager」を使って Alt と Ctrl を入れ替えてる

設定画面の開き方

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

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

Read More

SublimeLinterとは

SublimeLinter
http://www.sublimelinter.com/

SublimeText上でコードの構文チェックをリアルタイムで行えるプラグイン

手順

1. 「SublimeLinter」本体をインストール
2. 言語ごとに必要なプラグインを別途インストール

Read More

OmniMarkupPreviewerとは

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"
        ]
    }
}

参考エントリー

• OmniMarkupPreviewerでブラウザプレビューすると404エラーになる | INCOMPLETE++
• Sublime TextのリアルタイムMarkdownプレビューが便利 – YoheiM .NET

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

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

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 を開き、ペーストした内容を書き換えて保存

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

経緯

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

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

Read More