どうも、SeikouUdokuのケイトです。

仕事でコーディングするのに使っているテキストエディタといえば、Sublime Textです。
Sublime Textでは、編集するのに便利な機能や、プラグインを利用することで機能を拡張することができます。Mac、Windowsのどちらでも使えるので便利です。
無料で利用できますが、有料版もあります。

本日は、Sublime Textのインストールから基本的な設定と使い方をご紹介したいと思います。
※ 環境はMacです。

Sublime Text 3のインストール

まず、自分の環境に合わせてSublime Textをダウンロードします。
Download – Sublime Text

基本設定

Sublimeを開いたら、「Sublime Text > Preferences > Settings」を選択してください。

ファイルを開いたら、以下のように記述し保存します。その下には各設定の説明があります。

{
  "font_size": 11,
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true
}

フォントサイズ

"font_size": 11,

フォントサイズを指定することができます。自分の見やすいフォントサイズに指定してください。私は11にしています。

インデントの設定

"tab_size": 2,
"translate_tabs_to_spaces": true,

インデントとは、字下げすることです。

Googleのガイドには、インデントはスペース2つでタブを使わないことが推奨されています。
Google HTML/CSS Style Guide

「tab_size」は、インデントの幅の設定で、
「translate_tabs_to_spaces」は、「true」でタブをスペースに変換、「false」でスペースを利用しないとなります。

■□ インデントの重要性 ■□

プログラミング初心者は読んでください。
初心者にどんなに注意しても無視しがちなインデント。

インデントを無視して書くと、閉じタグがわからなくなったり、コードがガタガタで見栄えがかなり悪くなります。

また、インデントにタブやスペースを混在させるのもNGです。先ほどのインデントの設定はそのためでもあります。

自分だけでなく、仕事で複数人でファイルを管理するとなった時を想像してみてください。

インデントをしっかりと意識し、綺麗なコードを書くことを心がけましょう！

行末の無駄なスペースをなくす

"trim_trailing_white_space_on_save": true

行末にある無駄なスペースをファイル保存時に自動で削除してくれます。

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

Sublime Textではプラグインを入れることで機能を拡張することができます。
プラグインのことをSublime Textではパッケージと言います。
Package Control – the Sublime Text package manager

Sublime Textを開いたら、次のコマンドを入力してPackage Controlを開きます。

Cmd + Shift + P

installと入力と「Install Package Control」とでてくるので選択します。これでインストール完了です。

カラースキームの変更

デフォルトでは、背景とテキストが下図のように設定されていますが、こちらをパッケージのインストールで自分の好みに合わせて変更することができます。

自分のお好みのカラースキームを探してみてください。
color scheme – Labels – Package Control

私は、昔から「Tomorrow-Night」というテーマが好きでずっと使用しています。
デフォルトより彩度が低く目に優しい色なのが良いです。

カラースキームの導入方法ですが、PackageControlを開き「Install Package」を選択し、自分のお好みのカラースキームのタイトルを入力し選択します。私のカラースキームでいうと、「Tomorrow Color Schemes」です。

「Sublime Text > Preferences > Color Scheme」から自分の設定したい色を
選択します。これでカラースキームの変更は完了です。

よく使うショートカットキー

Sublimeでは編集するのに便利な機能が多数あります。よく使う機能のショートカットキーをご紹介します。

行頭に移動

Ctrl + A

行末に移動

Ctrl + E

行削除

Ctrl + Shift + K

行末まで削除

Cmd + K , K

行の選択

Cmd + L

選択されている行を複製

Cmd + Shift + D

現在のカーソル位置から最終行まで選択

Cmd + Shift + ↓

インデントを一つ下げる

Cmd + ]

インデントを一つ上げる

Cmd + [

コメントアウト

Cmd + /

同じ文字列選択

Cmd + D

文字検索

Cmd + F

全ファイルの文字検索

Cmd + Shift + F