【Ubuntu】多機能！見た目もいい！「Sublime Text 3」をインストール
こんにちわ！
パンジェンシーです。
私のWebアプリ開発環境は、
の２点のみです。
だから、テキストエディタにはこだわりたいと常日頃思っています。
１年前くらいまでは、"notepad++"を使っていました。
しかし、最近色々な記事を見ていると、どうも"Sublime Text 3"というエディタがかっこ良くて、機能も良さそうだということがわかりました。
早速、"Sublime Text 3"をUbuntuの環境にインストールしてみました。
※本記事を作成するにあたり、色々なページを参考にさせていただきました。深く感謝致します。
環境
- Ubuntu 14.04 LTS 64bit版
手順
- Sublime Text 3のインストール
- Package Controlのインストール
- 各種パッケージのインストール
- その他の設定
Sublime Text 3のインストール
下記ページからパッケージをダウンロード
Sublime Text - Download
debファイルを実行すると、Ubuntuソフトウェアセンターが開いてインストールできます。
Package Controlのインストール
Sublime Text 3はカスタマイズすることでかなり便利に使えます。
それを可能にするため、まずPackage Controlをインストールします。
①下記ページからスクリプトをコピーしてきます
各種パッケージのインストール
次に各種パッケージをインストールしていきます。
①「Ctrl+Shift+p」を押すと、Package Controlが開きますので、installと入力
②「Install Package」が候補に出てくるので、選択してEnter
③インストールしたいパッケージ名を入力してEnter
これでインストールできます。
私がインストールしたものは以下です。
| パッケージ名 | 詳細 |
|---|---|
| Codecs33 | ConvertToUTF8のために必要らしい。LinuxとMacのみ必要 |
| 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のインストールが必要です。
②Package ControlからSublimeMozcInputをインストールします
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"フォントのインストール方法は別途書きたいと思います。
