Sublime Text 3 の導入

情報が出てきてからも2を使い続けていたけれど、ようやくSublime Text 3を導入したのでそのまとめ。

Sublime Text 3 のダウンロード

公式サイトよりダウンロードする。

機能追加のための Package Control をインストール

「Manual」項目を参考に設定。

manual

ざっくりと、

  1. プラグインのファイルをダウンロード
  2. 指定ディレクトリに放り込む
  3. Sublime Text 3を再起動させる

といった流れで無事に動作することを確認。

日本語化する

環境がMacの場合は「⌘ + Shift + P」で Package Control を起動、Package Control:Install Package を選択し「japanize」と入力して該当のパッケージをインストールする。

適用手順
1. C:Usersユーザー名AppDataRoamingSublime Text 3PackagesJapanizeにインストールされている*.jpファイルを、C:Usersユーザー名AppDataRoamingSublime Text 3PackagesDefault にコピーします。
※Defaultフォルダがない場合は作成してください。

2. コピーしたファイルをオリジナルのファイル(.jpが付かないファイル)と置き換えます。(念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。)

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

Mac環境では、フォルダの場所は「/Users/ユーザ名/Library/Application Support/Sublime Text 3」にあった。

参考:
MacにSublime Text 3をインストールし日本語化する方法まとめ

文字コード問題の解消

Sublime Text では文字コードがデフォルトでUTF-8となっているので、Shift-jisファイルを開いても文字化けしないようにする。

ConvertToUTF8 のインストール

文字化け対策に「ConvertToUTF8」というプラグインを追加する。
再度「⌘ + Shift + P」から Control:Install Package を選択、「ConvertToUTF8」を検索しインストールする。

※「ins」あたりまで打ち込めば Install Package が選択される。

※「ins」あたりまで打ち込めば Install Package が選択される。

conver 画像

確認用に適当に作成したShift-jisファイルを開いたところ、下記のエラーが別タブで表示された。

Oops! The file /Users/user名/Desktop/index2.html is detected as SHIFT_JIS which is not supported by your Sublime Text.

Please check whether it is in the list of Python's Standard Encodings (http://docs.python.org/library/codecs.html#standard-encodings) or not.

If yes, please install Codecs33 (https://github.com/seanliang/Codecs33/tree/osx) and restart Sublime Text to make ConvertToUTF8 work properly. If it is still not working, please kindly send the following

どうやらMacOS版とLinux版に限り、Sublime Text 3ではConvertToUTF8プラグインが正しく動作しないらしい。

なので別途 Codecs33 というプラグインをインストールする必要がある。

codes33 画像

参考:
Mac OS版のSublime Text 3でConvertToUTF8プラグインが動作しないのを解決する方法 » INSPIRE TECH

動作確認

ConvertToUTF8 のみ入れた状態だと次のように文字化けした状態となり、別タブで前述のエラーが表示される。

shift-jis 文字化け

次に、Codecs33 を PackageControl からインストールし、再起動すると正常に表示された。

shift-jis 正常表示

使えるプラグインを参考にさせてもらう

まるまる参考、それから必要そうなものを追加させてもらう。

コーディング、マークアップ補助

・HTML5
・Bracket Highlighter
・CSS Snippets
・Goto-CSS-Declaration
・CSScomb
・jQuery
・Emmet
・AutoFileName
・sublimelint
・SublimeCodeIntel
・ColorPicker
・LiveStyle(ついでchromeにも関連プラグインをインストール)

LiveStyleことEmmet LiveStyleは、Chromeブラウザと合わせていろいろ捗りそうなので、別サイトの参考記事などから使い方を学んでいきたい。

参考:
Sublime Text2 と Emmet LiveStyleをかけあわせて、爆速でCSS開発☆! | 株式会社LIG

FTP系

・SFTP

全角日本語入力対応プラグイン

・IMESupport
日本語入力の際、変換候補の位置を適切な場所へ補正してくれるもの。
ただ、プラグインを検索しても見当たらなかったことや、実際に日本語を変換してみても位置がズレることもなかったので、修正されたのかな、とインストールはしないでおいた(ズレる際はエディタ左下に変換候補が表示されるらしい)。


参考

フロントデベロッパーが幸せになれる”恋に落ちるエディタSublimeText3”導入のススメ #HTML #CSS|CodeIQ MAGAZINE
Sublime Text 3をDreamweaver並みに使いやすくする方法 – Catcher in the tech

ちなみに、Sublime Text 2 導入時に参考にさせていただいた記事は以下。
Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog

インストールしたプラグインの使い方については、おいおい調べていこうと思う。

 1007 Views