サイト制作に関するメモ書き

HOME > その他 > 「恋に落ちるエディタ」Sublime Textを使ってみる

「恋に落ちるエディタ」Sublime Textを使ってみる

普段の仕事ではサクラエディタを愛用しているのですが、職場で使っている人も多いので、今回はSublime Text2の設定とPackageのインストールを試してみたいと思います。

「サクラエディタ」って名前も気に入ってるけど、「恋に落ちるエディタ」というキャッチコピーもちょっと好き。

ダウンロード

公式サイトからダウンロードします。
現在はSublime Text2とβ版のSublime Text3がありますが、今回はSublime Text2をダウンロード。

use-the-sublimetext01

ダウンロードしたファイルを実行してインストールします。
インストール後、Sublime Text2を起動したらこんな感じ。

use-the-sublimetext02
 

初期設定

Preference > Settings – User を開きます。

use-the-sublimetext03

JSON形式で各項目の設定を変更できるので、変更したい場合はここで変更できます。
変更できる項目を知りたい場合は、Preference > Settings – Default を開くと
項目とデフォルトの値を確認できます。

use-the-sublimetext04

今後使ってみて適宜変えていくとは思いますが、現在は以下のように設定しています。

{
	"default_encoding": "UTF-8",
	"draw_white_space": "all",
	"fallback_encoding": "UTF-8",
	"file_history_retention": 30,
	"font_face": "Consolas",
	"font_size": 10,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"line_padding_top": 5,
	"scroll_past_end": true,
	"show_encoding": true,
	"tab_size": 4,
	"word_wrap": true
}

 

テーマの変更

Preference > Color Scheme からSublime Textの配色を変更できます。
今回は「Sunburst」というのを選択しました。

use-the-sublimetext05
 

Package Controlのインストール

Packageをインストールしていく前に、Package Controlをインストールしておきます。
こちらのサイトを開き、Sublime Text2か3選択、下に出てくるコードコピーします。

use-the-sublimetext06

View > Show Console でコンソールを開きます。

use-the-sublimetext07

下部の入力エリアに先ほどコピーしたコードを貼り付け、エンターを押します。

use-the-sublimetext08

インストールが完了したらSublime Textを再起動します。
 

Packageのインストール

Package Controlのインストールが完了したら、使いたいPackageをインストールしていきます。
Ctrl + Shift + p で Command Paletteを開きます。

use-the-sublimetext09

入力エリアに「install」 と入力すると候補が下に表示されるので、
「Package Control:Install Package」を選択。

use-the-sublimetext10

インストール可能なPackageが表示されるので、インストールしたいPackage名を再度入力して検索。
見つかったら選択してエンターを押すと、インストールが開始されます。

use-the-sublimetext11
 

今回インストールしたPackage

今回は色々なサイトを見て、以下のPackageのインストールしてみました。

  • IMESupport
    →日本語のインライン入力。
  • ConvertToUTF8
    →文字コードをUTF-8に変換して表示。保存時に元の文字コードで保存。
  • Emmet
    →Emmetが使えるようになる。
  • Hayaku
    →CSSの入力補助完。
  • AutoFileName
    →画像ファイルなどの入力補完。画像サイズも追加される。
  • BracketHighlighter
    →タグや括弧のペアを強調。
  • jQuery
    →jQueryの自動補完。
  • jQuery Snippets pack
    →jQueryのスニペット。
  • HTML5
    →HTML5の自動補完とスニペット。
  • CSS Snippets
    →CSSのスニペット。
  • CSSFormat
    →CSSを綺麗に並べ替え。
  • WordPress
    →Wordpressのコード補完。
  • Inc-Dec-Value
    →数値などを↑↓キーで変更。
  • SublimeLinter
    →HTML/CSS/JSをリアルタイムで構文チェック。
  • Local History
    →ファイルの履歴管理。
  • All Autocomplete
    →コード保管。
  • Goto-CSS-Declaration
    →HTML編集中に、CSSの該当箇所へカーソルを移動。
  • CloseCommentTag
    →閉じタグコメントの挿入。
  • SublimeCodeIntel
    →関数・変数の場所へ移動。
  • DocBlockr
    →関数のコメントを自動生成。
  • Clipboard History
    →Sublime Text内でコピペしたテキストを繰り返し利用。
  • Abacus
    →イコールやコロンを綺麗に揃える。

 

まだ使えてないPackageや機能も多数ありますが、試しに使ってみて色々と便利そうなので、
今後はメインで使えるように移行していけたらと思っています。

【参考サイト】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP