「Sublime Text 3」をインストール

2014年05月27日
follow us in feedly

ノートPCで使用する外付け液晶モニタを購入したので、制作で使用するエディタに「Sublime Text 3」をインストールしました。

「Sublime Text 3」パブリックベータ版ですが、安定しているようなので「Sublime Text 2」から乗り換えです。

インストール後に行った設定をまとめます。

まずはPackage Controlのインストール

「View」→「Show Console」に以下のコードを貼り付けて「Enter」。

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

日本語化

1.「Ctrl+Shift+P」でコマンドパレットを起動。
2.「ins」と入力して「Package Control:Install Package」を選択。
3.「japanize」を入力。「Japanize」クリックしてインストール。

「Japanize」のインストールが完了したら、install.textの適用手順通りに作業。

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

日本語完了です。

便利なプラグインをインストール

  • Emmet
  • BracketHighlighter
  • Goto-CSS-Declaration
  • SublimeLinter
  • TrailingSpaces
  • FullPitchWhiteSpaceHighlight
  • HTML5
  • Tag
  • CSS Snipets
  • jQuery
  • WordPress
  • IMESupport
  • JShint
  • Placeholders
  • AutoFileName
  • Sass
  • SCSS
  • SCSS Snippets
  • SASS Build
  • Compass
  • SublimeOnSaveBuild

※ソースコードの構文チェック機能を追加してくれるSublimeLinterを使用するには、「node.js」のインストール後、コマンドプロンプトに「npm install -g jshint」と打ってEnter。「JSHint」のインストールも必要。

※PlaceholdersはEmmetとスニペットがバッティングするので、メニューバーの「ツール」→「スニペット追加」から以下のようにスニペットを追加。

<snippet>
    <content><![CDATA[<img src="http://dummyimage.com/${1:800}x${2:600}/4d494d/686a82.gif&text=${3:placeholder+image}" alt="$3">$0]]></content>
    <tabTrigger>imgpl</tabTrigger>
    <description>Image - Placeholder</description>
</snippet>

設定を変更

メニューバーの「基本設定」→「基本設定-ユーザ」を以下のように設定。

{
    "color_scheme": "Packages/User/Solarized (Light) (SL).tmTheme",
    "draw_white_space": "all",
    "font_size": 10,
    "highlight_line": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "trim_trailing_white_space_on_save": true,
    "word_wrap": "true"
}

Sublime Text 2と変更になっている点がいくつかありましたが、無事「Sublime Text 3」の制作環境が整いました。

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ