sublime text インストールから設定まで

投稿日 11月 12, 2024
著者 noce
カテゴリー note

インストール

１.Subline Text 公式ページからダウンロードする

ダウンロードページ： Sublime Text

「DOWNLOAD FOR MAC」または「DOWNLOAD FOR WINDOWS」をクリックするとダウンロードできます

２.ダウンロードした「Sublime Text Build 3211 x64 Setup.exe」をダブルクリックで開く

３.「はい」「Next」で進む

頻繫に使用する方は、タスクバーにピン止めしておくと便利です。

プラグインの利用準備

プラグインを使用するためにPackage Controlをインストールする

メニューの「Tool」-「Install Package Control…」をクリックする

Package Control をインストールすると、「Tool」-「Command Palette」からパッケージをインストールすることができるようになる

プラグインの使用方法

「ツール」-「コマンドパレット」で表示される入力フィールドに「install package」と入力すると、表示される候補から「Package Control: Install Package」をクリックする

表示されたフィールドにインストールしたいプラグインのパッケージ名を入力し選択するとインストールできる

日本語化

メニューバーの日本語化

プラグインを使って、日本語が使えるように設定します。

日本語化プラグイン「japanize」をインストールする

「Tool」-「Command Palette」で表示される入力フィールドに「install package」と入力すると、表示される候補から「Package Control: Install Package」をクリックする
表示された入力フィールドに「japanize」と入力する
「Japanize」が表示されるので、クリックする

他の日本語化

「基本設定」-「Browse Packages」をクリック

表示されたフォルダー｢Packages｣の中に､フォルダー「Default」を追加する

「Japanize」の中の拡張子が「.jp」のファイルを全てコピーし「Default」フォルダーに貼り付ける

（参考） windowsで拡張子を表示する方法 – NOCE NOTE (noce-w.com)

「Default」フォルダーに貼り付けた全てのファイルの「.jp」を消す

＜Windows版＞

＜Mac版＞

「Japanize」フォルダー内の「Main.sublime-menu」をコピーし、「User」フォルダーに貼り付ける

日本語化できました！

基本設定

「Settings」（「基本設定」-「基本設定」）

フォントサイズなどの設定をします

右側に設定内容を以下のように記述する
（参考）https://tech-camp.in/note/technology/13394/

{  
   // タブやスペースなどの不可視文字を見えるようにする
   "draw_white_space": "all",

  // フォントサイズを12pxにする
   "font_size": 12.0,

 // 現在の行をハイライトする
   "highlight_line": true,

 // 使用しないパッケージを設定する
   "ignored_packages":
   [
     "Vintage"
   ],

 // タブのサイズをスペース2つ分にする
   "tab_size": 2,

 // タブが入力された時に、スペースに置き換える
   "translate_tabs_to_spaces": true,

 // Enterキーが入力された時に、空行に挿入されている無駄なインデントを取り除く
   "trim_trailing_white_space_on_save": false,

 // テキストの折り返しを有効にする
   "word_wrap": true
 }

記述後、保存すると反映されます

デザインの変更

Theme（テーマ）の変更

色の変更

おすすめプラグイン

プラグインの使用方法はこちら

「ツール」-「コマンドパレット」に「install package」と入力-「Package Control: Install Package」をクリックし、表示される入力欄にプラグイン名を入力し表示されたプラグイン名を選択クリックする

All Autocomplete

All Autocomplete：コード補完を補強する。自分で定義した定数や関数も自動的に補完してくれる。

「ツール」-「コマンドパレット」に「install package」と入力-「Package Control: Install Package」をクリックし、表示される入力欄に「All Autocomplete」と入力し、「All Autocomplete」を選択クリックする

Emmet

表示される入力欄に「Emmet」と入力する

HTMLで「!」+「Tabキー」でHTMLの雛形が表示されます

BracketHighlighter

表示される入力欄に「BracketHighlighter」と入力する

BracketHighlighter：対応するタグを強調して、どのタグが対応しているか分かる

ColorHighlighter

表示される入力欄に「ColorHighlighter」と入力する

CSSの色指定の部分をクリックするとその色を視覚的に表示する

Color Helper

Color Picker

SublimeLinter

文法をチェックして知らせてくれる

SublimeCodeInte

定義元にジャンプできるようになる
クラスやメソッドの定義が別のファイルにされている時に、具体的な記述内容を確認したい時に便利です。ジャンプしたい定義元を右クリックして、「Goto Definition」を選択します。

View In Browser

「control」+「alt」+「v」と入力すればブラウザが起動して編集中のファイルをレンダリングしてくれる。ユーザー用の設定ファイルの「”browser”: “chrome”」部分のブラウザ名を変更すれば任意のブラウザを起動させるのができる。

デフォルトでの各ブラウザごとのショートカットキー

ctrl+alt+v/ctrl+alt+f	Firefox
ctrl+alt+c	Chrome
ctrl+alt+i	IE
ctrl+alt+s	safari

プラグイン

インストール済みプラグインの確認方法

基本設定 – Package Settings – Package Control – Settings
で確認

インストール済みプラグインの削除方法

「ツール」 – 「コマンドパレット」をクリックし、表示される以下の画面に「remove」と入力し、「Romove Pacage」を選択し、表示されるプラグインの中で、削除したいものを選択する。

ショートカットキー
Windows: [ Ctrl ] ＋ [ Shift ] ＋ [ P ]
Mac: [ Command ] ＋ [ Shift ] ＋ [ P ]

必ず覚えておくべきショートカットキー

ショートカットキー	説明
command + shift + P	コマンドパレットを展開
command + O	ファイルやフォルダを開く
command + S	ファイルを上書き保存
command + W	タブを閉じる
command + P	プロジェクト内からファイルを検索
command + F	ファイル内から一致する文字を検索
command + ,	設定ファイルを開く
command + /	コメントアウト

覚えておくと便利なショートカットキー

ショートカットキー	説明
command + shift + F	プロジェクト内から一致する文字を検索
control + G	指定行へ移動
command + L	行を選択
command + shift + D	行のコピー
control + shift + K	行の削除
command + option + 2	エディタを2列に分割
command + optio + 5	エディタを4画面グリッドに分割