tags

[4]
[1]
[1]

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

Sublime Text

https://www.sublimetext.com

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

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

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

・HTMLやCSS(SCSS)編集 WEB制作に便利なパッケージ

(インストール方法: Command + Shift + P を押して「Package Control : Install Packages」を選択し、パッケージ名を入力してインストール。)

パッケージ名 説明 キーバインド・備考
SublimeNFDToNFCPaste Macユーザーは必須!!!。PDFやFinderから文字列をコピーペーストした時の濁点などが離れてしまうのを修正する。
BracketHighlighter 行番号の左に対応するカッコを表示する
Emmet HTML入力を支援する div.class と 入力して「TAB」でHTMLタグへ変換します。
「ctrl」+「 ↓ ↑ 」で 10px などの数値を変更します。
Emmet LiveStyle CSS編集を即座にブラウザに反映
HTML-CSS-JS Prettify ( command + shift + H でhtmlソースコードを整形。余分な行末スペースを削除 )
SublimeLinter-html-tidy HTML5の構文チェック インストール前に
brew install tidy-html5
で tidyコマンドをインストールしておくこと
SublimeLinter-csslint CSSの構文チェック 下記オプションを参考
W3CValidators W3CValidators を使って HTML5のバリデーションが一撃で行える
Hayaku css入力をショートカットできる。「fl」→「 command + E 」→「float: left;」となる
CSSFontFamily cssの font-family: 入力中に先頭文字を打つとフォント名を保管する
Goto-CSS-Declaration HTMLファイルから該当cssクラスへジャンプする
SCSS SCSS編集時にオートコンプリートしてくれる
AutoFileName ファイル挿入ヘルパー。また width image も自動でセットする
autoprefixer cssのベンダープレフィックスを自動で追加する
CSS Comb cssのプロパティを自分の好きな順に並べることができる
Smart Delete 前の行の一番後ろ(一番右)でdeleteキーを押した時に余計なインデントも一緒に削除してくれる。
Local History 自動バックアップ。"history_retention": 30 くらいに設定しておきましょう(30日後にバックアップを自動削除)。設定しないとずっとバックアップが残ります。

● SublimeLinter-csslint の設定

例えば下記のように設定してエラー出力をゆるくします

{
    "paths": {
        "osx": ["/Users/USER-NAME/.anyenv/envs/ndenv/versions/v9.11.2/bin/"],
    },
    "linters": {
        "csslint" : {
            "ignore" : ["order-alphabetical", "important", "empty-rules", "universal-selector","font-sizes", "box-model", "zero-units", "shorthand","fallback-colors","adjoining-classes", "box-sizing"]
        }
    }
}

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

パッケージ名 説明 キーバインド
Pretty JSON JSONをバリデーションかけてから整形する JSONファイル保存時に書式が正しいかチェックしてくれます。またJSONを綺麗に整形します。
ShellCommand シェルコマンドを実行する キーバインドに好きなショートカットを設定して任意のシェルコマンドを実行できます
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
SublimeLinter 各種プログラムの構文チェックをリアルタイムで行えるようにする
SublimeLinter-phplint PHP構文チェックをリアルタイムで行えるようにする
SublimeLinter-phpmd PHPの使われてない変数などを知らせてくれる
SublimeLinter-annotations FIXME, NOTE, TODO, @todo, XXX, README などの重要なコメントをハイライト表示させる。@todo のハイライトは重宝します。
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つ上の行で /** 押すと自動的にドキュメントを作成してくれる
**/ で終了。

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

パッケージ名 説明 キーバインド
File​Diffs 最速Diff(ファイル比較)比較したい2つのファイルを開いてタブを右クリックして「Diff with Tab」でパッと比較できます
BetterFindBuffer フォルダ内一括検索の検索結果からファイル名にカーソルを当てて「enter」でファイルを開く
SideBarEnhancements サイドバーを拡張し、右クリックメニューを増やす
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"}
    }

● 前回開いたファイルを自動で次回起動時に開くのをやめる

Preference > Setting に以下を追加します

{
    "hot_exit": false,
    "remember_open_files": false,
}

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

ハイフンで繋いだ単語( 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

● ShellCommandで 任意のシェルコマンドをショートカットで実行出来るようにする

例 : 「ctrl」+「3」でPHPのバージョンを表示します

  {
    "keys": ["ctrl+3"],
    "command": "shell_command",
    "args": {
      "command": "echo $PATH" ,
      "target": "point"
    }
  } ,

● 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のカラーテーマ

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

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

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

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

に移動します。
『Sublime Text』→『Preferences』→『ColorScheme ... 』から選択して適用させます。

● 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 ) ダウンロード