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

Sublime Text に EditerConfig を導入する

概要

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

Terminal から Sublime Text を起動できるようにする

概要

  • 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

Sulibmerge Pro を静的ファイルから復旧する

概要

  • 愛用していた 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 が動作するか確認

Windows 11 に gcloud CLI を導入する

概要

  • Google Cloud Platform のお勉強をしはじめた。
  • Chrome 上で Cloud Shell を使ってもいいのだが、手元で叩けたほうが便利かもと思ったので gcloud CLI を Windows 11 に導入してみる。

参照したリファレンス

Read More

Windows 10 に WSL2 を導入する

やること

  • Windows 10 に「Windows Subsystem for Linux 2 (WSL 2)」を導入する
    • WSL2 上で利用する Linux のディストーションは Ubuntu (=デフォルトのまま)とする
  • 実用上必要な以下のセットアップをあわせて行う
    1. WSL2/Ubuntu 上で日本語を扱えるようにする
    2. WSL2/Ubuntu に Homebrew をインストールする

所要時間

30~40分

参考リファレンス

Windows Subsystem for Linux (WSL) を Windows 10 にインストールする | Microsoft Docs

Read More

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

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

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

前置き

  • 長年Macユーザーだった自分が、Windowsでも近い感覚で操作できるようにすることを目的にしています
  • 人によってはデフォルトで十分な(わざわざ変更する必要がない)設定項目もあります
  • Windows ではUS配列キーを利用しています
  • Mac 版の設定エントリーは以下

設定画面の開き方

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

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

Read More

Sublime Text 3 に OmniMarkupPreviewer を導入する

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再発

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

参考エントリー

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