Sublime Text 3をDreamweaver並みに使いやすくする方法

デザイナーbizです。

「テキストエディタは何を使っているんですか?」「おすすめはありますか?」とエディタ話で盛り上がる時期かと思います。

私の場合はDreamweaverや秀丸を使ってコーディングをしていましたが、Sublime Text 3 を使ってみてとても使い心地が良かったので、その導入方法を紹介していこうと思います。

ここでの説明は、Win + Sublime Text 3 環境をベースに説明していきます。

目次

Sublime Textのダウンロード

Sublime Textは言ってしまえば、コーディングに特化したテキストエディタです。
Mac・Windows・Linuxに対応しています。

公式サイトからSublime Text3をダウンロード
http://www.sublimetext.com/3

Sublime Textのダウンロード

この中から、自分の使っているOSをクリックしてダウンロードします。

Dreamweaver並みに使える設定にする方法

機能追加をするにはまずPackageControllをインストール

PackageControllとは、Sublime Textに機能を追加できるプラグインです。
これを入れると、HTMLのコードをハイライトしてくれるパッケージや入力補助をしてくれるパッケージなどを簡単にSublime Textに機能を追加することが出来ます。

(1)PackageControllのサイトからインポートスクリプトをコピーします。

Sublime Text 3 PackageControll
https://sublime.wbond.net/installation

「SUBLIME TEXT 3」のタブの内容をコピーしてください。

import urllib.request,os; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), ‘wb’).write(urllib.request.urlopen( ‘http://sublime.wbond.net/’ + pf.replace(‘ ‘,’%20′)).read())
subtxt1

(2)Sublime Textを開いて、「ctrl+`」または、 「View > Show Console」 でコンソールを表示します。

できたら下の入力枠に先ほどコピーした内容をペーストして「Enter」を押してください。

これでPackage Controlが使用できるようになりました。

日本人なら初めに知りたい日本語化

Package Controlから、日本語化するためのパッケージをインストールする手順を紹介していきます。

まず、「Ctrl + Shift + p」でPackage Controlを起動します。

「Package Control:Install Package」を選択して

「japanize」入力してパッケージをインストールします。

しかし日本語化はパッケージインストールしただけでは終わらないので、適応手順に沿って日本語化を行います。
インストール後に表示される適応手順に沿って行けばメニューが日本語化されます。

適用手順

  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にコピーします。すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。

日本人なら一度は悩まされる文字コード問題

Sublime Textを使っていると必ず文字コードの問題に悩まされます。
Sublime TextはUTF-8が文字コードなので、Shift-jisのファイルを開くとばっちり文字化けしてしまいます。

そこで、文字化けに対応するパッケージをインストールする手順を紹介していきます。

「Package Control:Install Package」を選択して

convert2

「ConvertToUTF8」入力してパッケージをインストールします。

converttoutf8

↓Shift-jisのファイルを開いた時の表示

moji1

↓プラグインを入れた後のShift-jisのファイルを開いた時の表示

moji2

Dreamweaver並みに使えるパッケージ一覧

HTML入力補助系




















































パッケージ名内容HTML5HTML5の自動補完 HTML5 のスニペット集と自動補完とハイライト。CSS SnippetsCSSの自動補完jQueryjQueryの自動補完EmmetHTML,CSSの記述を高速化する「Zen-Codingプラグイン」の次期バージョンBracket Highlighterタグの開始タグと閉じタグをハイライト表示タグとかブラケットの開始と終了を強調して表示する。AutoFileNameimgタグのパスを入力する際、ファイル名を補完sublimelint構文エラーを検出して表示する。SublimeCodeIntel通常は Ctrl + Space で補完を表示するものを自動で表示する。Tag閉じタグ </ を打つと補完してくれる。ColorPickerカラーピッカーを表示Emmet LiveStyleDeveloper Toolsから直接CSSが編集出来る。(Google ChromeまたはSafariの連動が別途必要)
FTP系











パッケージ名内容SFTPSublime Text上からFTPでアップロード
その他











パッケージ名内容IMESupport全角日本語入力に対応させる

まとめ

このように、「Package Control:Install Package」→好きなパッケージを入れるという手順を覚えてしまえば、どんどんDreamweaver並みにカスタマイズ出来てしまいます。

正直今回の記事でデフォルトの便利な機能が紹介出来なかったので機会があれば紹介します。

--

--

--

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nyle

Nyle

More from Medium

Automatic RMD

An image of someone interacting with the Auto RMD tool on a computer

Swiggy food order & delivery app — a heuristic evaluation case study

Tubi or not Tubi? A Task Flow and Design Pattern Question

Cosapa- Revamp healthcare

Cosapa Thumbnail img