フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

SublimeText

SublimeText3導入の手引き[インストールからプラグイン設定まで]

2016年02月16日

Pocket

SubLimeText3導入

もはや定番のエディタSubLimeText3の導入からweb作成が快適になるプラグイン導入・設定まで、備忘録ついでにメモしてみます。

SubLimeText3はデフォルトではシンプルなテキストエディタですが、プラグインの導入と設定で予測変換や入力補助、ワンボタンのブラウザプレビューまでできるDreamweaverと遜色のない環境を実現でき、しかも軽快なweb作成環境を実現できますので、まだという方は是非実践してみてください!

インストールからプラグイン導入準備

1.SubLimeText3のインストール

Sublime Text 3よりダウンロードしてexeファイルからインストール。

2.プラグインインストールの準備(package control)

1.package controlを開いて「SUBLIME TEXT 3」タブ内の文字列をコピーしておく。

package control

2.SubLimeText3を立ち上げて[ctrl]+[`](@のキー)を押すと下部にコンソールが表示されるので、先にコピーした文字列をペーストしてエンターキーを押す。

package control

3.プラグインのインストール手順

1.[ctrl]+[shift]+[p]を押すとPackage Controlが開くので「install」と入力する。

2.「Package Control: Install Package」が最上位に選択されるのでそのままエンターキー。

3.導入したいプラグイン名を入力してエンターキーを押せばプラグインがインストールされます。

package control

プラグインの設定

ここからプラグインを導入していきます。
Japanize以外は「3.プラグインのインストール手順」の通り、コンソールからプラグイン名を入力してエンターキーを押せばインストールは完了します。

Japanize[windows環境]

メニューを日本語化するプラグインです。
ただインストールしただけだと機能しないので、インストール後に下記の通りファイルを移動して完了です。

適用手順
1.C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanizeにインストールされている*.jpファイルを、
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default
にコピーします。※Defaultフォルダがない場合は作成してください。
2.コピーしたファイルをオリジナルのファイル(.jpが付かないファイル)と置き換えます。(念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。)

3.C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu(.jpが付かない方)を、
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\User
   にコピーします。すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。

以上です。

プラグイン説明文より抜粋

ConvertToUTF8

文字コードがshift-JISだと文字化けが起きてしまうのを防ぐプラグインです。

IMESupport

日本語入力時に別窓入力画面が出てしまうのを、入力位置に表示してくれるプラグインです。
但し以前少し書きましたが、4Kディスプレイなどで文字のスケーリングを変更している場合、少しズレて表示されてしまう仕様のようです。

[4Kディスプレイのメリットとデメリット]PC用4Kモニター購入前に気を付けるべき4つのポイント。6ヵ月使用レビュー
[4Kディスプレイのメリットとデメリット]PC用4Kモニター購入前に気を付けるべき4つのポイント。6ヵ月使用レビュー

一昨年の年末あたりから普及価格帯の4Kモニターが各社から販売されるようになって気になっていました。 MacではRetinaがディスプレイがラ...

web作成に便利なプラグイン

ド定番のものばかりですけど、私がインストールしているプラグインを挙げておきます。

HTML5 html5の予測変換
CSS snippets cssの予測変換
jQuery jqueryの予測変換
Tag 閉じタグを
Emmet ショートハンドのコードを書いて[E]+[enter]でclassや閉じタグまで一発で書けちゃう!もう手放せないプラグイン
ショートハンドのチートシートはこちら
Auto File Name img src=""やlink href=""などリンクタグ入力時にディレクトリを参照して入力補完してくれる
BracketHighlighter タグの始点と終点の行数にアイコンを付けて教えてくれる
SFTP FTP機能を追加。sublimetext上で編集・保存したものをすぐ反映してくれる
SideBarEnhancements サイドバーのコンテキストメニューを使いやすくする
Theme – Flatland sublimetextの画面をフラットなデザインにするテーマ

改行タグやブラウザプレビューなど、便利なショートカット設定

DreamWeaverでお馴染みのショートカットの設定方法は下記にまとめてありますのでご参照ください。

SublimeText3でDreamWeaverみたいなショートカットを使いたい!<br>タグを挿入とF12のブラウザプレビューをする方法
SublimeText3でDreamWeaverみたいなショートカットを使いたい!<br>タグを挿入とF12のブラウザプレビューをする方法

DreamWeaverに慣れているとつい指が伸びてしまうショートカットをSublimetext3で実現するTIPS...

おまけ

sublimetext3のプラグインは下記のディレクトリに格納されているので、インストールしたプラグインを確認したりバックアップを取るのに覚えておくと便利です。

C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Installed Packages
このカテゴリで良く読まれている記事
関連記事

COMMENT