tags

[4]
[1]
[1]

WEB制作に欠かせないテキストエディタ Sublime Text とおすすめパッケージ

Sublime Text

https://www.sublimetext.com

・パッケージコントローラーインストール方法

【command + shift + p】 →【install】→【return】
表示されるウィンドウに検索文字列を入力してパッケージ名を選択

● ・Sublime Textおすすめパッケージ

・HTMLやcss編集 WEB制作に便利なパッケージ

パッケージ名 説明 キーバインド
Emmet HTML入力を支援する
Emmet LiveStyle CSS編集を即座にブラウザに反映
HTML-CSS-JS Prettify ( command + shift + H でhtmlソースコードを整形。余分な行末スペースを削除 )
Hayaku css入力をショートカットできる。「fl」→「 command + E 」→「float: left;」となる
CSSFontFamily cssの font-family: 入力中に先頭文字を打つとフォント名を保管する
Goto-CSS-Declaration HTMLファイルから該当cssクラスへジャンプする
AutoFileName ファイル挿入ヘルパー。また width image も自動でセットする
CSS Format cssをminify(圧縮)したり整形したりする

・PHPやRubyなどプログラミング言語編集に便利なパッケージ

パッケージ名 説明 キーバインド
phpfmt PHPソースコードを自動で整形する command+shift+pから phpfmt : format now を選択
Case Conversion キャメルケース、スネークケースを相互変換する control+option+cを2回連打
Serialized​Data​Converter ( plist , bplist , json , yaml )を相互変換する
Random Everything ランダムなidやメールアドレスや国名などを生成する
ConvertToUTF
+
Codecs33
Sublime Text 3をShift_JISとかEUC-JP等utf8以外のエンコードに対応させる。 { "keys": ["shift+super+c"], "command": "null" },
(GBK encoding へのショートカットを殺す)
InputSequence 一気に連番入力する control+option+で複数選択をした後に
control+option+0
BracketHighlighter
SublimeLinter 各種プログラムの構文チェックをリアルタイムで行えるようにする
SublimeLinter-phplint PHP構文チェックをリアルタイムで行えるようにする
JQuery
e​CSStractor 関数、メソッドの定義元にジャンプする
SublimeCodeIntel JavaScript, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, PHP等の強調表示コードの自動補完(コードヒント)
Alignment イコール = の位置を揃える。コロン : でも揃えたいときは以下のようにする (※1)
EditorConfig 色々なテキストエディタアプリでインデント等の設定を共有するEditorConfigに対応する
DocBlockr PHPDocの記述をサポート http://bit.ly/2p1pLED クラスが定義されてる1つ上の行で /** 押すと自動的にドキュメントを作成してくれる
**/ で終了。

・その他便利なパッケージ

パッケージ名 説明 キーバインド
Sync View Scroll 複数のウィンドウでスクロールを同期させる command+shift+pから SyncScroll : Toggle Current View Scroll Sync を選択
Chain of Command 任意のコマンドを連続で実行させる
SyncedSideBar 現在開いているファイルとサイドバーのファイルの位置を連動させる
Expand​Region [command] + [shift} + [space] で広がる選択範囲を細かくする { "keys": ["super+shift+space"], "command": "expand_region" }
FindKeyConflicts [command] + [shift] + p の後に FindKeyConflicts を入力するとバッティングしているショートカット一覧を表示する

(※1) Alignment を cssプロパティ( : )でも揃えられるようにする

【Preferences】→【Package Settings】→【Alignment】→【Settings - User】 に以下を記述して保存。

{"alignment_chars": ["=",":"] }

Goto-CSS-Declarationのショートカットを [ctrl] + ←・→ に設定する

    {
      "keys": ["ctrl+right"], "command": "goto_css_declaration",
      "args": {"goto": "next"}
    },
    {
      "keys": ["ctrl+left"],  "command": "goto_css_declaration",
      "args": {"goto": "prev"}
    }

● ダブルクリックでハイフンで繋いだ単語も選択できるようにする

ハイフンで繋いだ単語( my-class )をダブルクリック選択できるようにするには
【基本設定】→【基本設定 - ユーザ】で開くファイル に以下を追加

"word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",

● 文字コードと改行コードを表示する

【基本設定】→【基本設定 - ユーザ】で開くファイル に以下を追加

"show_encoding": true,
"show_line_endings": true,

● Sublime Textで shift + return で <br> タグを挿入する

【基本設定】→【キーバインド - ユーザ】で開くファイルに

{ "keys": ["shift+enter"], "command": "insert", "args": {"characters": "<br>" } }

を追加します。

● Sublime Textで ブックマークを(設定/解除)する

    { "keys": ["super+b"], "command": "toggle_bookmark" , "args": {} },

● Sublime Textで command + J で選択中のhtmlタグを1行にまとめる( 要 emmet )

【基本設定】→【キーバインド - ユーザ】で開くファイルに

    { "keys": ["super+j"], "command": "run_emmet_action" , "args": {"action": "merge_lines"} } ,

を追加します。

● Sublime Textで control + option + B で表示中のソースを自動整形(インデント)出来るようにする

【基本設定】→【キーバインド - ユーザ】で開くファイルに

{ "keys": ["control+option+b"], "command": "reindent" , "args": { "single_line": false } },

を追加します。

● Sublime Textで [command]+space で選択範囲を細かく拡張する、 [command] + [shift] + space で選択範囲を大きく拡張する

【基本設定】→【キーバインド - ユーザ】で開くファイルに

  { "keys": ["super+shift+space"], "command": "expand_selection", "args": {"to": "scope"} } ,
  { "keys": ["super+space"], "command": "expand_region" } ,

を追加します。

● Sublime Textで PHPの構文チェックを出来るようにする

  1. SublimeLinter-phplint をインストールする。

  2. 次の node.js パッケージをインストールする
    sudo npm install -g phplint

● Sublime Textのおすすめショートカットキー

(基本的なショートカットは除きます。 command + ↓ とか。)

コマンド ショートカットキー
● カーソル移動系
カーソル位置を戻す(Undo) command + U 
カーソル位置を進める command + shift + U 
今いるタグの開始タグ、終了タグへ移動 cotrol + shift + T 
● マルチカーソル
上または下にマルチカーソルを増やす ctrl + shift + ↑・↓(OSXのMission Controlのショートカットをオフにすること) 
今カーソルがあたっている単語を全てマルチカーソルで選択 command + ctrl + G 
● タブ系
隣のタブへ移動する command + option + ← ・ → 
X番目のタブへ移動する command + 0〜9 
● テキスト選択系
単語を選択 マウスダブルクリック
選択範囲を拡張 command + shift + space
今いる行を選択 command + L
今いるhtmlタグを選択(連続押しで親要素をたどって選択) command + shift + A またはcontrol + D
● 編集系
選択したテキストをソートする F5
選択したテキストの前後にhtmlタグを挿入 ctrl + shift + W
画像タグ <img>の width, height を取得して更新する ctrl + shift + I
閉じタグ を挿入する command + option + .
1行コメントアウト command + \
複数行コメントアウト command + shift + \
● その他
マクロを記録する control + Q
マクロを実行する control + shift + Q
折り返しを変更する command + shift + P の後に w を押して Word Wrap Toggle を選択

● Sublime Textのカラーテーマ

こちらのサイトから選ぶといいでしょう
http://colorsublime.com
( Colorsublime というパッケージのインストールが必要です。 )

● Sublime Textのカラーをカスタマイズする

http://tmtheme-editor.herokuapp.com
作成したファイルは拡張子「.tmTheme」をつけて

/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/Colorsublime-Themes/

に移動します。
『基本設定』→『カラースキーマ』→『ColorSublime - Themes』から選択して適用させます。

● sublime Textでインデントの罫線を見やすくする

1. 『基本設定』→『基本設定 - ユーザ』に以下の行を追加します。

現在アクティブなインデントのカラーが強調されて見やすくなります。

    "draw_indent_guides": true,
    "indent_guide_options": ["draw_normal", "draw_active"],

2. /Users/ユーザ名/Library/Application Support/Sublime Text 3/Packages/Colorsublime-Themes/カラーセッティング名.tmThemeに以下の行を追加します。

<key>guide</key>
<string>#cccccc</string>
<key>activeGuide</key>
<string>#E91E63</string>
<key>stackGuide</key>
<string>#cccccc</string>

挿入位置は background が記述してある並びでokです。

● sublime Textおすすめのフォント

Menlo
Ricty Diminished
Souce code pro

あたりがおすすめです

● sublime Textの設定

こちらを参考にするといいです。 http://bit.ly/22xr0pC

● sublime Textでファイルタイプ(拡張子)ごとにタブの設定を変更する

『基本設定』→ 『基本設定 - 拡張』→ 『シンタックス指定 - ユーザ』を開いて以下のように記述して保存

{
    "tab_size": 4, // タブサイズ
    "translate_tabs_to_spaces": true, // タブの代わりにスペースでインデントする
    "auto_indent": true, // 自動インデント
    "smart_indent": true, // 自動インデントを少し賢く
    "trim_automatic_white_space": true // 空行の無駄な自動インデントを削除
}

添付ファイル1
t_st.jpg ( 31.1 KBytes ) ダウンロード