PC・デジモノ・旅行など他にも色々語りたいブログ

Sponsor link

Sublime Text 3 の初期設定 for Mac

      2016/12/04

about-sublime

普段のコーディングはメインでDreamweaverを使っていますが、僕の Macbook Air はメモリが4GBしかないせいでしょうか、どうしてもDreamweaverではモッサリすることが多々あります。

やっぱり使い慣れたDreamweaverの方が断然使良いのですが、こればっかりは仕方がない!というわけで、Macbook Air使用時には軽くてDWに近い使い勝手の「Sublime Text 3」を使うことにしています。

今回は「Sublime Text 3 の初期設定 for Mac」ということで、再インストール時などで Sublime Text 3 の設定にてんやわんやしないように、自分へのメモがてらでブログしておきたいと思います。

Sponsor link
Sponsor link

Sublime Text 3 をインストールする!

以下のリンクから「Sublime Text 3」をインストールする。今回はMacなので「OS X」を選択します。

>Sublime Text 3 – 公式サイトダウンロードページ –

DLしたファイルを展開する

スクリーンショット 2014-11-30 19.36.26

DLしたファイルを展開すると画像のように表示されるので、sublimeアイコンをとなりの「Applications」へ移動します。インストールはこれにて完了。

パッケージコントールを使用できるようにする!

様々なパッケージ(プラグインみたいなもん)の恩恵に預かることが前提のSublime Textなので、まずはそのパッケージをインストールできるようにしなければいけません。(デフォルトではパッケージインストールはできないのです。)

1.View→Show Consoloe

2.画面↓に入力ウィンドウがでてきますので、以下のコードをそのウィンドウにコピペしてReturnキーを押し「package Control」を使用できるようにする。

3.画像右参照で、ちゃんとパッケージコントロールが使用できる状態になっていれば「command+shift+P」で「package Control」が出てきます。

4.パッケージのインストールは項目の「package Control : Install Package」から行い、パッケージのアンインストールは「package Control : Remove Package」から行います。

Sublime Text 3 を日本語化する!

パッケージコントールが利用できるようになったので、兎にも角にもSublime Textを日本語化します。頑張って英語版を利用しても英語ができるようになるわけでもないですし、ここは素直に日本語化します。

1. Japanize をインストール

スクリーンショット 2014-11-30 19.50.39

「command+shift+P」で「package Control」を展開し、「package Control : Install Package」を選択するとパッケージ検索になります。そこに「japanize」と入力すると画像のようにパッケージがでますので、それをクリック。

「japanize」のインストールが終わるとSublime Text内に説明書きが表示されますが、それが非常にわかりにくいので以下で詳しく説明します。

2. Finderのユーザーフォルダを開きます

Finderのユーザーフォルダ(あなたの名前などのフォルダ名)を開くと「ライブラリ」というフォルダがあります。僕はなかったので、まずはそのライブラリの表示から。

Finder内で右クリックメニュー(日本指タップ)すると、

表示オプションを表示→「ライブラリフォルダを表示」にチェックを入れる で、Finderのユーザーフォルダの中身に「ライブラリ」というフォルダが表示されます。

3. Sublime Text 3 のルートフォルダを展開

ライブラリフォルダから・・・
Application Support > Sublime Text 3 > Packages の順番でフォルダを開いていきます。

スクリーンショット 2014-11-30 19.59.08

Packagesフォルダまで開くとおそらく「User」と「Japanize」のふたつフォルダがあると思います。そこへ、「Default」という名前の新しいフォルダを作り、全部でフォルダ3つにします。

4. Japanize フォルダから Default フォルダへ

スクリーンショット 2014-11-30 20.00.20

Japanizeフォルダを開くと拡張子が「.jp」のファイルが6個ほどあると思います。この「.jp」のファイルを全て選択してコピーします。

スクリーンショット 2014-11-30 20.01.22

コピーした6個の「.jp」のファイルを「Default」フォルダにペーストします。間違ってもJapanizeの中の「.jp」ファイルを消さないように。

「Default」フォルダにコピーした「.jp」ファイルのファイル名を「.jp」の部分だけ削除します。6個全部です。(例:Context.sublime-menu.jp → Context.sublime-menu)

5. Japanize フォルダから User フォルダへ

スクリーンショット 2014-11-30 20.02.49

Japanize フォルダの中にある「Main.sublime-menu」をコピーして「User」フォルダに貼り付けます。くれぐれも「.jp」が付いている方をコピペしないようにしてくださいね。

スクリーンショット 2014-11-30 20.03.11

↑こんな感じで貼り付けます。

6.  日本語化されました♪

これで準備がOKです。

スクリーンショット 2014-11-30 20.07.26

Sublime Text 3 を開いてみると・・・ワ~イ!日本語化されてる♪

Ads by - Admax

Emmet をインストールする

コーディングを快適にするには無くてはならないパッケージ「Emmet」をインストールします。Emmetがどのくらい便利なのかは以下のサイトでわかりやすく説明されているのでリンクを貼らせていただきます。

EmmetをSublime Text 3で使ってみよう
– Volare Inc. Tech Blog – より

Emmetのインストール

スクリーンショット 2014-11-30 20.10.40

パッケージコントロールから「emmet」を検索するとでてきますので、クリックしてインストールします。これだけでEmmetが使えるようになります。

Emmetの発動キーを変更する

デフォルトでのEmmet発動キーは「command+E」なのですが、僕の指的にちょっとこれは使いにくかったので「command+M」に変更したいと思います。もしも変えたい方がいらっしゃいましたら参考ください。

スクリーンショット 2014-11-30 20.13.17

  • Package Setting > Emmet > Key Bindings – User を開いて、以下のコードを貼り付けます。

 

貼り付けたら「command+S」で保存します。これで「command+M」でEmmetが発動するようになりました。他のキーに変更したい場合は、5行目の「command+m」を変更すればOKです。

View in Browser をインストールする

これも Sublime Text 3 を最低限快適にするためには必要なパッケージかと思います。

このパッケージはショートカットキーを用いてブラウザプレビューをするためのものです。

スクリーンショット 2014-11-30 20.25.17

インストール方法は他と同じでパッケージコントロールから「View in Browser」と入力するとでてくるので、クリックしてインストールします。

インストール後のプレビューショートカットは・・・

  • デフォルトブラウザプレビュー・・・「control + option + V 」
  • Safari・・・「control + option + S」
  • Firefox・・・「control + option + F」

たったこれだけのことですが、在るのと無いのでは快適さが雲泥の差なのです。

まとめ

最初に記載したとおり、僕はDreamweaverがコーディングツールのメインで、Sublime Textはサブとして利用しています。そういうわけで、もうこの設定さえしておけば万々歳なのです。

Sublime Text 3は他にもコーディングを豊かにしてくれるパッケージや機能が目白押しなので、必要な方は是非検索かけてみてください。また、Sublime Text は無料コーディングツールなのに、Dreamweaver並か使い方によってはそれ以上の性能を発揮するらしいですから、コーディングの練習をこれから始める初心者の方や、Adobeソフトは使っているけどDreamweaverは持っていない方などにはうってつけですよね。