①-3テキストエディタをダウンロードしよう！~拡張機能編~

この記事ではSublimeText3に拡張機能を追加します！
以下の手順で実際にやっていきましょう！

SublimeText3に拡張機能を追加しよう

拡張機能とは名前の通り機能を拡張することです。
SublimeText3のパッケージをインストールし設定していきましょう！

インストールするパッケージ名

⑴HTML5 ・・・ HTMLタグの入力を補完
⑵TrailingSpaces・・・不要な半角、全角スペースに色を付ける
⑶CSS Snippets ・・・ CSSの入力を補完
⑷Ruby Debugger ・・・Rubyの構文をチェックし、間違った箇所を指摘
これら4つをインストールします！

①SublimeText3のメニューバーより、「View」→ 「Show console」の順に選択肢クリックしてください

クリック後このように表示されればオッケーです

以下のコードをコピーして貼り付けてください

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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://packagecontrol.io/' + 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)


貼り付けたあとは、Enterを必ず押してください!
SublimeText3を一旦終了し、もう一度起動してください。
それでは以下の手順で作業を行ってください！
①「command + shift + p」を押す
②表示された入力バーに、「install package」と入力しエンター

③少し待つとインストールできるパッケージの一覧が表示されます。そこで入力バーにパッケージ名を入力します！HTML5など。

④入力したパッケージ名を選択します。そしたらインストール完了です！

⑤手順①〜④を繰り返し4つのパッケージをインストールします。

もう少しです！頑張りましょう！

⑥SublimeText3のメニューバーより、「Preference」→ 「Package settings」→「Package Control」→「Settings-user」の順に選択

⑦installed_packagesの中に
HTML5・TrailingSpaces・CSS Snippets・Ruby Debugger
が記述されていれば成功です！
※以下の画像と完全に一致でなくても構いません。

TrailingSpacesをカスタマイズしよう

これで最後です！先ほどインストールしたTrailingSpacesは以下のように必要ない半角スペースを知らせてくれるパッケージです！
これを半角だけでなく全角でも光るようにカスタマイズしましょう！
(プログラミングでは全角での記述はもちろん、スペースでもエラーが出てしまいます)

①SublimeText3のメニューバーより、「Sublime Text」→ 「Preferences」→ 「Package Settings」→ 「Trailing Spaces」→ 「Settings-user」を選択してください！

②以下のコードをコピーして貼り付け、⌘Sで保存してください！

{
  "trailing_spaces_regexp": "　|[ \t]+"
}

このようになれば成功です！

以上でSublimeText3のインストール完了です！

長々とお疲れ様でした！！！
次回からは、いよいよRubyについて学んでいきましょう！

続きはこちら
[Macユーザー編]Rubyを実際に書いてみよう！~準備編(1)~