◆ベビームーワァをクリックするとジャンプするよ!

【Ubuntu】多機能!見た目もいい!「Sublime Text 3」をインストール

こんにちわ!
パンジェンシーです。


私のWebアプリ開発環境は、

の2点のみです。

だから、テキストエディタにはこだわりたいと常日頃思っています。

1年前くらいまでは、"notepad++"を使っていました。


しかし、最近色々な記事を見ていると、どうも"Sublime Text 3"というエディタがかっこ良くて、機能も良さそうだということがわかりました。

早速、"Sublime Text 3"をUbuntuの環境にインストールしてみました。


※本記事を作成するにあたり、色々なページを参考にさせていただきました。深く感謝致します。

環境

手順

  • Sublime Text 3のインストール
  • Package Controlのインストール
  • 各種パッケージのインストール
  • その他の設定

Sublime Text 3のインストール

下記ページからパッケージをダウンロード
Sublime Text - Download
debファイルを実行すると、Ubuntuソフトウェアセンターが開いてインストールできます。

Package Controlのインストール

Sublime Text 3はカスタマイズすることでかなり便利に使えます。

それを可能にするため、まずPackage Controlをインストールします。

①下記ページからスクリプトをコピーしてきます

Installation - Package Control

スクリプトを実行します

Sublime Text 3を開き、「Ctrl + `」か、[view]-[show console]を選びます。
コンソールにコピーしたスクリプトを貼り付け、Enterを押します。

各種パッケージのインストール

次に各種パッケージをインストールしていきます。

①「Ctrl+Shift+p」を押すと、Package Controlが開きますので、installと入力
②「Install Package」が候補に出てくるので、選択してEnter
③インストールしたいパッケージ名を入力してEnter

これでインストールできます。

私がインストールしたものは以下です。

パッケージ名 詳細
Codecs33 ConvertToUTF8のために必要らしい。LinuxMacのみ必要
ConvertToUTF8 Shift_JISを文字化けしないようにする
HTML-CSS-JS Prettify コードを綺麗に整えてくれる。実行は「Ctrl + Shift + h」。別途、Node.jsのインストールが必要。
Japanize メニューを日本語化する。Package Controlでインストール後、適用手順が表示されるので、そのとおりに作業をする必要あり
More Layouts 画面分割のレイアウトが増える
SideBarEnhancements サイドバーの右クリックメニューで表示される項目が増える
Smart Delete 行末でdeleteした時に次の行のインデントも一緒に消してくれる
SublimeLinter コードの構文エラーをチェックしてくれる。別途、言語毎にプラグインをインストールする必要あり
SublimeLinter-jshint SublimeLinterのjavascriptプラグイン詳細は下記
SublimeMozcInput Ubuntu環境でSublime Text 3を日本語入力に対応させる。詳細は下記(Windowsの場合は代わりにIMESupportを入れればOKみたい)
Theme-Afterglow 見た目のテーマ。パッケージをインストール後、[Preferences]-[基本設定-ユーザ]に追記する必要があります。詳細はhttps://github.com/YabataDesign/afterglow-theme参照
TrailingSpaces スペースをハイライトして教えてくれる。詳細は下記

SublimeLinter-jshint

これを使うには別途、Node.jsをインストールして、jshintモジュールをグローバルインストールしておく必要があります。

①Node.jsをインストールします

これについては別途書きます。

②jshintモジュールをインストールします
$ npm install -g jshint
③Package ControlからSublimeLinter-jshintをインストールします

これで、Javascriptのコーディング中に、構文チェックをしてくれるようになります。

SublimeMozcInput

これを使うには別途、ibus-mozc,emacs-mozcのインストールが必要です。

ibus-mozc,emacs-mozcをインストールします
$ sudo apt-get install ibus-mozc emacs-mozc
②Package ControlからSublimeMozcInputをインストールします
キーバインドを追加します

デフォルトでは、「Ctrl+\」で、入力方法の変更ができるようになっていますが、使いづらいので、「Ctrl+Space」を追加します。

[Preferences]-[キーバインド-ユーザ]を開き、以下を追加します。

{ "keys": ["ctrl+space"], "command": "toggle_mozc" }

TrailingSpaces

これをインストールすると、半角スペースをハイライトしてくれますが、全角スペースはしてくれません。

なので、[Preferences]-[Package Settings]-[Trailing Speces]-[Settings-User]を開き、以下のようにします。

{
	"trailing_spaces_regexp": " |[ \t]+"
}

これで、全角スペースもハイライトしてくれます。

その他の設定

パッケージの導入の他に、便利な設定があるので導入しておきます。

[Preference]-[基本設定-ユーザ]に設定を書き込みます。

最終的に、私の設定はこんな感じになりました。

{
	"theme": "Afterglow.sublime-theme",
	"color_scheme": "Packages/Theme - Afterglow/Afterglow.tmTheme",
	"font_face": "Ricty",
	"font_size": 13,
	"highlight_line": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"show_encoding": true,
	"tabs_small": true,
	"trim_trailing_white_space_on_save": true
}


"trim_trailing_white_space_on_save"は、ファイル保存時に、無駄なスペースを自動で削除してくれる便利な機能なのでぜひ入れておきましょう。

"Ricty"フォントのインストール方法は別途書きたいと思います。

まとめ

Sublime Text 3は見た目もかっこいいし、機能も優秀です。

ぜひ使って見てください。