株式会社プロネット

 

WEBシステム開発、ITコンサルティング、自社サービス、教育事業 - これからのビジネスへのIT活用ソリューションをご提案致します。

windowsにSublime3をインストールしてWeb開発

2016.4.18(Mon) 20:24 | HTML | yamamoto

今回はSublimeText3をインストールしWeb開発を行うための設定の手順をまとめてました。

SublimeText3は、プラグインをインストールすることで、
HTMLの補完やシンタックスハイライトするようにできます。
また、キーバインドも独自に設定できるので、今はHTMLなどを書くときはこれを使用しています。

ダウンロードとインストール

Sublime Text 3からダウンロードします。

PackageControlの導入

PackageControlはプラグインを入れるために必要です。

1. view -> Show Consoleをクリックもしくは(Ctl+`)でコンソールを開く
2. PackageControlで、SublimeText3 のタブに表示されるスクリプトをコピーする
3. SublimeText のコンソールに貼り付けて実行する
4. SublimeText を再起動する

日本語対応のプラグイン

「japanize」「IMEsupport」をインストールします。
japanize はメニューを日本語化します。一部分しか日本語かされませんでした。
IMEsupport はIMEの候補をカーソル位置に出現されるようになります。

1. (Ctl + Shif + P)でCommand Paletteを開き「install」と入力する
2. 「Package Control: Install Package」を選択しEnterキーを押す
3. 「japanize」と入力し、Enterキーを押す
4. 同じように 「IMEsupport」 もインストールします。

web系のプラグイン

「html5」「cssSnippets」「Jquery」をインストールします。

  • html5: HTMLの補完
  • cssSnippets: cssの補完
  • Jquery: jqueryの補完

日本語対応プラグインと同様にインストールします。

markdownのプラグイン

「OmniMarkupPreviewer」を入れています。
このプラグインは[Ctrl + Alt + O] でブラウザにプレビューされます。
また、ファイルを更新したらブラウザが更新されるようになっています。
他にも、HTMLを出力できる機能もあります。

ショートカットの変更

Ctrl + F,B,P,N でカーソル移動できるように変更します。

Preferences > Key Bindings- User と開いて以下記述します。

[
{ "keys": ["ctrl+f"], "command": "move", "args": {"by": "characters", "forward": true } },
{ "keys": ["ctrl+b"], "command": "move", "args": {"by": "characters", "forward": false } },
{ "keys": ["ctrl+p"], "command": "move", "args": {"by": "lines", "forward": false } },
{ "keys": ["ctrl+n"], "command": "move", "args": {"by": "lines", "forward": true } },
// 上記の設定で上書きされたコマンドを、Ctrl+Shift で復活させる
{ "keys": ["ctrl+shift+f"], "command": "show_panel", "args": {"panel": "find", "reverse": false} },
{ "keys": ["ctrl+shift+n"], "command": "new_file" },
]

デフォルトの設定は Preferences > Key Bindings- Defult に記述されています。

以下を参考にしました。

* http://matome.naver.jp/odai/2137785598009652401?

* http://qiita.com/fujimohige/items/feb915c55a034029e513

* http://webmem.hatenablog.com/entry/sublime-text-markdown