2年前はJavascriptのジャの字も知らず、HTMLとCSSをメモ帳で書いていた私ですが、今は名刺にフロントエンドエンジニアって付いてます。
そんな私を長らく支えてくれたSublime Text。この1年で覚えたこのエディタの使い方の中から、「痒いところに手が届く」設定を紹介します。（※Window環境です）
プラグイン（パッケージ）について
プラグインについては、「Sublime プラグイン おすすめ」とGoogle検索すれば求めている情報が大量に出てくるため、詳しくは割愛させていただきます…。
私の使っているSublime Textに入っているプラグインは以下です（好き順）。
・Emmet（コーディングの友）
・HTML-CSS-JS Prettify（整形）
・SublimeLinter(jslint, csshint)（コードの品質管理）
・Terminal（パッとターミナル！！）
・SCSS（Syntaxに.scss追加）
・SideBarEnhancements（一部しか使ってないけど…）
・HTMLAttributes（ちょっと便利）
・Tag（閉じタグ忘れに）
・SmartDelete（youre smart!）
・Bracket Highlighter（うん）
・Trailing Spaces（他人のコードが真っ赤っ赤）
・Origami（名前が好き）
・IMESupport（Macは不要）
・ConvertToUTF（ちょっと不安定な時あり）
・CSScomb（品質管理）
・Inc-Dec-Value（ちょっと便利）
・DockBlockr（これでコメント書くとそれっぽく見える）
プラグイン以外の設定について
■スニペットの登録方法
Sublime Textにおけるスニペット登録の基本は、メニュー -> Tools -> New Snippetから登録するアレです。が、CSSにおいて中括弧の外側でスニペットが展開できないという問題があります。コメントアウト用のスニペットが用意したい場合にこれでは使い物になりません。
もう一つよく紹介されているものに、Emmetのスニペット機能があります。が、EmmetはHTML・CSSをサポートするツールなので、Javascriptのスニペットはサポートしていません（多分）。なんてこった。
|
1 2 3 4 5 6 7 8 9 |
{//EmmetのConfigをこんな感じにしても機能しない "snippets": { "js":{ "snippets":{ "c":"console.log(${1});" } } } } |
というわけで、私は今のところ、HTMLとCSSはEmmetのスニペットを、JavascriptはSublime標準のスニペット機能を使って登録しています。
具体的には、Javascriptはこんな感じで登録しています。
|
1 2 3 4 5 6 7 |
<snippet> <content>console.log(${1});</content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>c</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <scope>source.js</scope> </snippet> |
（上記のscope部分は、スニペットを展開したいファイルの種類を指定します。Javascriptなら「source.js」、HTMLなら「text.html.basic」などです。特定のファイルのscopeを知りたいときは、ファイル開いている状態でCtrl+Shift+Alt+pを押すとステータスバーに表示されます。）
Emmetはこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "snippets": { "html": { "snippets": { "maru":"①", "ogp":"<meta property=\"og:title\" content=\"\">\n<meta property=\"og:type\" content=\"article\">\n<meta property=\"og:description\" content=\"\">\n<meta property=\"og:url\" content=\"\">\n<meta property=\"og:image\" content=\"\">\n<meta property=\"og:site_name\" content=\"\">\n<meta property=\"og:email\" content=\"\">", "phi":"<img src=\"http://placehold.it/${1}\">" }, }, "css": { "snippets": { "ff" :"font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;", "ff2" :"font-family: Verdana, Roboto, 'Droid Sans', YuGothic, Meiryo,'Hiragino Kaku Gothic Pro','MS PGothic',sans-serif;", "media":"@media screen and (max-width:){\n${1}\n}" } } } } |
「phi」でplacehold.itを展開するやつ、気に入ってます。
■ダブルクリックの選択範囲を変更できる
CSSのクラスを命名する際、ハイフン区切りなのか、アンダーバー使うのか、キャメルケースなのか、はたまたBEM記法なのかなんて議論があるかと思うのですが、私はダブルクリックでクラス名全体を一発選択できることからアンダーバーやキャメルケースが好きでした。が、世の中的にはハイフン使えとか…。などと悩んでいたら、実は設定でダブルクリックの選択範囲を設定できるんですね…。
メニューバー -> Preferences -> Settings Userに以下を追加します。
|
1 2 3 |
{ "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?" } |
ここに書かれている中にハイフンはありません。つまりこの設定ならハイフンがあっても一気通貫で選択できます！もっと貫いて選択したい人は、どんどん記号を削りましょう。
■閉じタグコメントの位置を変更（Emmet）
HTMLって閉じタグコメント（って呼ぶんでしょうか？HTMLコメントで開始タグと綴じタグをペアるアレ）があったほうがいいですよね。
この閉じタグコメントも、閉じタグの右がいいとか
|
1 |
</div><!-- .container --> |
左がいいとか
|
1 |
<!-- .container --></div> |
下がいいとか
|
1 2 |
</div> <!-- .container --> |
色々派閥があるかと思います。
この閉じタグコメント、Emmetの機能で下記のようにパイプとCを付けて展開すると自動挿入できるんですが
|
1 |
.container|c |
デフォルトでは、閉じタグの下にコメントがつくんですよね。私は閉じタグの右派なので、それを右に変えたかったんです。
方法をGoogle検索すると、コアファイルをいじる方法が結構出てくるのですが、それをせずとも以下の方法で変更できます。
メニューバー -> Preferences -> Package Settings -> Emmet -> Settings – User に以下を追加しましょう。
|
1 2 3 4 5 |
{ "preferences": { "filter.commentAfter": "<!-- <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->" } } |
以上、いまさらSublime Textの話題でした！では、私はAtomに移行します！