Sublime Text 3 のパッケージインストール:Mac

公開日: : 最終更新日:2014/09/16 その他

Package Control のインストール

Sublime Text 3 はパッケージをインストールすることで様々な便利機能を実装できます。
パッケージをインストールするために必要な Package Control をインストールします。

https://sublime.wbond.net/installation

上記サイトからSublime Text 3 用のインストールコードをコピー。

sublime_code

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)

メニューバー[View]→[Show Console]でコンソールを表示します。

画面下部に表示されたコンソールに先程コピーしたコードをペーストしEnterを押します。

画面下部左側に表示される[ =   ]の動きが止まったら(少し時間掛かります)Sublime Text 3 を再起動。
※Sublime Text 3 を再起動は Sublime Text 3 を終了させてから、もう一度起動しなおす

パッケージのインストール

CmdShiftPでコマンドパレット画面を表示します。
入力欄に「package」と打って「Package Control: Install Package」が表示されていれば Package Control のインストール完了。
Escでコマンドパレット画面非表示

パッケージコントロール

パッケージのインストール

CmdShiftPでコマンドパレット画面を表示します。
入力欄に「package」と打って表示される「Package Control: Install Package」を選択します。
Escでコマンドパレット画面非表示

パッケージコントロール

パッケージ検索画面が表示されるのでインストールしたいパッケージ名を入力します。

今回はUTF-8以外の文字コード(Shift-JIS等)を扱えるようにする「ConvertToUTF8」をインストールしてみます。
入力欄に「Convert」と打つと表示される「ConvertToUTF8」を選択してEnterを押します。
Escでパッケージ検索画面非表示

パッケージインストール

メッセージが表示されればパッケージのインストール完了です。

パッケージインストール完了

おすすめのパッケージ

TrailingSpaces

全角スペースをハイライトする

メニューバー「Sublime Text」→「Preferances」→「Package Settings」→「Trailing Spaces」→「Settings – User」を選択します。

TrailingSpaces設定

全角スペースをコメント色で表示する設定をJSON形式で記述します。
記述した後、保存してSublime Test 3 を再起動します。

設定の記述

{
  //全角スペースの正規表現
  "trailing_spaces_regexp": " |[ t]+", 
  //コメント色で表示
  "trailing_spaces_highlight_color" : "comment", 
}

ConvertToUTF8

Shift-JISを使用できるようにする

BracketHighlighter

ブラケットの開始と終了をハイライトする

ブラケットハイライター

SublimeCodeIntel

コード入力補完機能(Ctrlspace)の強化

入力補完機能強化

AutoFileName

コード入力補完に対象ファイル名を取得して表示する

ファイル名取得

Emmet

HTMLやCSSの記述を簡単にする「Zen-Codingプラグイン」の次期バージョン

SideBarEnhancements

サイドバーを右クリックした時に表示される機能を増やす

パッケージのアンインストール

CmdShiftpでコマンドパレット画面を表示します。
入力欄に「rem」と打って「Package Control: Remove Package」を選択します。
Escでコマンドパレット画面非表示

パッケージアンインストール

インストールされているパッケージが表示されるので、削除したいパッケージを選択します。
Escでパッケージ選択画面非表示

アンインストール選択

Windows版の関連リンク

  1. Sublime Text 3 のインストール:Windows
  2. Sublime Text 3 の初期設定:Windows
  3. Sublime Text 3 のパッケージインストール:Windows

Mac版の関連リンク

  1. Sublime Text 3 のインストール:Mac
  2. Sublime Text 3 の初期設定:Mac
  3. Sublime Text 3 のパッケージインストール:Mac

その他関連リンク

関連記事

icon_dreamweaver

Dreamweaverの基礎を学ぶ

新しいソフトを学ぶ時って本を買ってみたり、入門者向け解説サイトを巡ってみたりするけれど、最近は動画で学ぶのが一番効率よい気がしています。AdobeTVに基礎学習コンテンツが公開されているのでその紹介。...

記事を読む

icon_sublime_mac2

Sublime Text 3 の初期設定:Mac

初期設定 メニューバーから「Sublime Text」→「Preferences」→「Settings-User」を選択します。 設定はJSON形式(JavaScript Object Not...

記事を読む

icon_pgkaisetsu

プログラミング言語のわかりやすい解説

プログラミング言語についてわかりやすく解説しているサイトがあったのでメモ。 プログラミング言語人気TOP10の簡易解説 プログラミング言語人気TOP10の簡易解説の簡易解説 さらに詳しく...

記事を読む

icon_adobe

Adobe製品の基礎を学ぶ

よく使うソフトだけ別記事でまとめたけれど、その他のAdobe製品のチュートリアルや学習動画が充実しているのでURLをメモ。時間のある時に見てみよう。 AdobeTV ...

記事を読む

icon_photoshop

Photoshopの基礎を学ぶ

普段あまりグラフィックソフトを使わないので知識がPhotoshop6.0で止まっていた・・・。今のPhotoshopってすごい!そして楽しそう!!あぁ僕にデザインセンスがあれば。 Learn Pho...

記事を読む

icon_sublime1

Sublime Text 3 の便利ショートカットキー

ファイルの操作 ファイル名を検索して開く Windows:Ctrl+P Mac:Cmd+P 表示された入力欄にファイル名の一部を入力すると検索結果が表示されるので選択して開きます。 使...

記事を読む

icon_viewportresizer

iPad? iPhone? いろんな画面サイズで表示確認

すごく簡単に画面サイズ変更して確認できるサービス。デバイスごとの表示確認に使えそう。 このサイトで試してみると・・・。「↔ Resizer」 Viewport resizer ...

記事を読む

icon_htmlspecialchars

HTMLで意味のある記号をエスケープする

HTMLで意味のある記号をエスケープして表示。 ...

記事を読む

icon_indesign

InDesignの基礎を学ぶ

テキスト作りでInDesignを使うことに...。使い方わからねぇ。となった時。基礎学習に使用した本家Adobeサイト。 やっぱり動画ベースで学習するのがわかりやすい。 Learn InDesign...

記事を読む

icon_sublime_win1

Sublime Text 3 のインストール:Windows

Sublime Text は Windows でも Mac でも使える高機能テキストエディタです。有料(70ドル)ですが評価版の利用ということで期間・機能無制限で利用できます。評価版の場合、たまにライ...

記事を読む

wp
WordPressフロントページ設定とテンプレート

固定ページに最新投稿一覧を表示させた時の使用テンプレートが何なのか調べる機会があったので保存。 管理画面「設定」→「表示設定」の「フロントページの表示」 「最新の投稿」選択時 フロントページ...

js
GoogleMap左上の白い枠を消す

左上の白い枠を消してほしいという要望が多いので。よく使うマップコードをスクラップ。 <!doctype html> <html> <head>...

wp
WordPressでよく使う関数

string get_site_url( ] ] ) 管理者ページの「設定」-「一般」の「WordPressのアドレス(URL)」 現在のブログのサイトURL取得 [php]<?php ...

wp
WordPressにFacebookのいいねボタン

WordPressにFacebookのいいねボタンを表示する。 コピペで対応したい時用 <body>の直後に記述するコード <div id="fb-root&qu...

js
スムーススクロールを作る – 応用

指定位置にするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点「y座標」の値 画面に必要なパーツは? 高さのあるコン...

→もっと見る

    • icon_sublime1
      41,290 views

      ファイルの操作 ファイル名を検索して開く Windows:Ctrl+P Mac:Cmd+P 表示された入力欄にファイル名の一部を入力すると検索結果が表示されるので選択して開きます。 使用言語の指定 Windows:Ctrl+Shift+P Mac:Cmd+Shift+P 表示された入力欄に使用する言語名の一部を入力すると検索結果に「Set Syntax」が表示されるので選択しま...

    • 曜日番号
      18,059 views

      現在の曜日番号を表示 [php]<?php //現在の曜日番号(日:0 月:1 火:2 水:3 木:4 金:5 土:6)を取得 $weekno = date('w'); //現在の曜日番号出力 echo $weekno; ?>[/php] 現在の曜日を表示 [php]<?php //日本語の曜日配列 $weekjp = array( '日', //0 ...

    • wp
      8,632 views

      WordPressの固定ページに投稿ページの最新記事を表示する。 [php]<?php //最新5件を表示 $paged = get_query_var('paged'); //現在のページ番号 $num = 5; //表示件数 query_posts('posts_per_page='.$num.'&paged='.$paged); if ( have_posts() ) :...

    • groupby
      6,374 views

      まずここをチェック!を先に 「フィールド名=NULL」はダメ 「フィールド名 IS NULL」を使う やりたいこと 会員を全員の名前を表示したい 最新の予約日付を表示したい 使用するテーブル 会員テーブル [ps]mysql> SELECT * FROM member; +----+--------+ | id | name | +----+----...

    • icon_kaiten
      5,798 views

      jQueryのanimateメソッドを使って要素を回転させてみるプログラム。 サンプルデータ [js] $('#box1').animate( {'z-index': 1},//z-indexを0から1に変更する { duration: 1000, //アニメーションの時間 //ステップ中の処理 //引数num:処理途中の変化している値 step: f...

PAGE TOP ↑
←幅を狭くする