0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-07-18

この記事では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)~

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?