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

Sublime Text 3 の設定(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 に SublimeLinter を導入してHTML5・CSS・JavaScriptのリアルタイム構文チェックをする

SublimeLinterとは

SublimeLinter

http://www.sublimelinter.com/

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

手順

  1. 「SublimeLinter」本体をインストール
  2. 言語ごとに必要なプラグインを別途インストール
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"
		]
	}
}

参考エントリー

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の記述を効率化するテキストエディタ用のプラグイン

手順

  1. Package Controllから「Emmet」をインストール
  2. SublimeText自体のSetting – Userにほかの動作との衝突を回避する設定を記述
  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 3 の設定(3/3) – Settings

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

  1. Package Control
  2. Key Bindings
  3. 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のみ
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
    • またはショートカットキー:Cmd+Shift+P
  2. Install Package Contolを入力して実行(Return)
Read More