LoginSignup
0
5

More than 5 years have passed since last update.

Sublime Text の設定・セットアップ

Last updated at Posted at 2017-03-24

まっさらなMac Bookの設定を続けていきたいと思います。
前回の投稿では主にmac本体の初期設定を行ったので、今回はテキストエディタのダウンロードとエディタの初期設定手順をまとめます。

初めてテキストエディタを触る人も想定し、細かく手順をまとめようと思います。

今回使用するのはSublime Text 3です。

Sublime Text 3 をインストールして開く

  • https://www.sublimetext.com/3 からダウンロード
  • macの場合はOS Xを、その他の場合は対応するものをクリックし、ダウンロードが開始

スクリーンショット 2017-03-25 1.01.17.png

  • Applicationsに移動させて、Applicationフォルダを開く

スクリーンショット 2017-03-25 1.02.14.png
スクリーンショット 2017-03-25 1.01.39.png

  • 「開く」ボタンで開く

スクリーンショット 2017-03-25 1.01.54.png

Packageのインストール準備

  • コンソールを開く(ctrl + shift + @)
    スクリーンショット 2017-03-25 1.13.48.png

  • 以下の呪文を貼り付けてenter

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)

スクリーンショット 2017-03-25 1.17.17.png

  • 実行後はこんな画面になるのでescを押してコンソールを閉じる
  • パッケージコントロールの呼び出し(command(⌘) + shift + p)
    スクリーンショット 2017-03-25 1.18.47.png

  • installと入力して出てくるInstall Package Controlをクリック
    スクリーンショット 2017-03-25 1.20.18.png

※ 今後パッケージをインストールする際は(⌘ + shift + p)でパッケージコントロールを開き、installと入力してInstall Packageを選択してから行う

スクリーンショット 2017-03-25 1.24.57.png

Packageのインストール(初回おすすめ)

上の手順でInstall Packageを選んだ状態でインストールしていく

  • HTML5 … HTMLタグ入力補完
  • Auto Close HTML Tags … HTMLの閉じタグの入力補完
  • CSS Snippets … CSSの入力補完
  • TrailingSpaces … 不要な半角、全角スペースへの色付け

スクリーンショット 2017-03-25 1.30.12.png

※ちなみに、画面上部のメニューから以下を選択すればインストールしたパッケージの一覧を表示可能
Preference > Package Settings > Package Control > Settings - User

スクリーンショット 2017-03-25 1.39.37.png

スクリーンショット 2017-03-25 1.40.47.png

設定の追加

  • 画面上部のメニューから以下を選択し、設定画面を開く。 Preference > Settings

スクリーンショット 2017-03-25 1.52.49.png

スクリーンショット 2017-03-25 1.54.12.png

  • 右側に表示されたファイル内に以下を貼り付ける。(あえて説明を省略するが、いい感じにエディタを使いやすくする設定)
{
  "auto_indent": true,
  "bold_folder_labels": true,
  "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
  "default_encoding": "UTF-8",
  "disable_formatted_linebreak": true,
  "disable_tab_abbreviations": true,
  "draw_white_space": "all",
  "enable_tab_scrolling": false,
  "font_size": 17,
  "highlight_line": true,
  "ignored_packages":
  [
  "Vintage"
  ],
  "match_tags": true,
  "open_files_in_new_window": false,
  "tab_size": 4,
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true,
  "word_wrap": true,
}

スクリーンショット 2017-03-25 2.08.43.png

  • こんな感じに貼り付けて保存(⌘ + s)

※ 今後、どんどん使いやすい設定を組み込みましょう!

Tabキーでの予測変換処理の修正

現段階だと、日本語入力した際に変換候補をたどる時に用いるTabキーを押すとインデントになってしまう状態
これを以下の手順で解消していく

  • Finderを開き、画面上部のメニューの移動内にある「ホーム」をクリック

スクリーンショット 2017-03-25 2.39.14.png

  • 適当な位置で右クリックをして、表示オプションの表示を選択

スクリーンショット 2017-03-25 2.46.54.png

  • 一番下のチェックボックスの「"ライブラリ"フォルダを表示」にチェック

スクリーンショット 2017-03-25 2.45.24.png

  • Sublime Textの画面上部のメニューから以下を選択し、キーバインド設定画面を開く Preference > Settings

スクリーンショット 2017-03-25 2.54.10.png

スクリーンショット 2017-03-25 2.52.08.png

  • 開いた左側のファイル上で(⌘ + shift + s)をして、先程表示させた「ライブラリ」がある「ホーム」ディレクトリ配下の、 [ホームディレクトリの名前]>ライブラリ>Application Support>Sublime Text 3>Package に移動し、Package配下にDefaultという名前のフォルダを作成

スクリーンショット 2017-03-25 3.05.51.png

スクリーンショット 2017-03-25 3.03.41.png

  • 作成したDefault配下に保存。保存後、Sublime Textを閉じる
  • 再度Sublime Textを開き、画面上部のメニューから以下を選択し、キーバインド設定画面を開く
    Preference > Settings

  • 100行目~105行目を選択し(⌘ + /)でコメントアウト
    スクリーンショット 2017-03-25 3.15.14.png

  • 保存(⌘ + s)してキーバインド設定画面を閉じる

  • 予測変換がタブで行えるようになってる

スクリーンショット 2017-03-25 3.17.03.png

Google日本語入力の導入

開発向けの設定をGoogle日本語入力で行いましょう。
詳しくはこちらのページにまとめてあります。

0
5
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
5