Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

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

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

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

スクリーンショット 2017-07-18 16.53.34.png

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

スクリーンショット 2017-07-18 16.55.13.png

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

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)

image.png

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

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

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

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

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

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

スクリーンショット 2017-07-18 17.28.41.png

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

スクリーンショット 2017-07-18 17.30.08.png

TrailingSpacesをカスタマイズしよう

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

スクリーンショット 2017-07-18 17.35.50.png

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

スクリーンショット 2017-07-18 17.38.53.png

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

trailing_spaces.sublime-settings
{
  "trailing_spaces_regexp": " |[ \t]+"
}

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

スクリーンショット 2017-07-18 17.40.10.png

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした