Atomのスニペットをカスタマイズした
こんにちは、だいちゃんです。
Atomを愛用しているのですが、HTML/CSSのコーディングの際、デフォルトでサジェストされるスニペットと僕の相性が若干悪かったので、カスタマイズしてみることにしました。
サジェストの恩恵を100%享受できていなかった
サジェストしてくれる機能自体は、英語が苦手な僕には超重宝している機能ですし、これ無しではコーディングしたくないレベルです。ただ、使っていると、ふとしたタイミングで意図しないサジェストを選択していたり、スニペットで入力された文字列を毎回書き直したりしていて非効率に感じることがありました。
もっと他にも気にかかってたことがあったと思いますが、とりあえず今回は下記の2点の対策を考えてみようと思います。
html のスニペットが弱い
新規でHTMLファイルを作成するとき、必ず最初に入力するのが html の文字です（実際には ht だけでサジェスト出るんだけど）。
この単語を入れるだけで、HTMLのベースが一気に流し込まれるのですが、これがどうも僕には弱くて、毎回書き足したり、変更したりしていたのでいっそのことスニペットの内容を変えたいなと思っていました。半年くらい前から。（気付くのも遅いし、気付いてからの行動も遅い）
id と打ったときに一番上が idea になってる
これも地味に厄介で。
まぁ落ち着いてよく確認しながら作業すれば問題ないのでしょうが、それでも idea 使うことほぼ無いので、消す or 下に移動させたいです。
autocomplete-plus はコアパッケージだからイジれない
このサイト によると app.asar というファイルに内包されているため、コアパッケージのソースファイルには手を加えられないようになってるようです。
ソースはGithubで公開されているので、出来なくもないんでしょうけど、アップデートの度に上書きされる運命ですしね。運用上現実的ではなさそうです。
となると、 autocomplete-html autocomplete-css あたりをラップしてパッケージごと自作しちゃう？？とまで考えましたがめんどくさいので、今回は自作スニペットで上書きする強硬手段で解決してみようと思います。
自作のスニペットを登録する
スニペットの登録は案外簡単に出来ます。
メニューバーから Atom ＞ スニペット... を押すと、 snippets.cson が開くのでその中身を書き換えてあげるだけで完了します。ちなみにこのファイルは ~/.atom/snippets.cson にあるのでそこからも開くことが出来ます。
記法としては、下記のような感じになっています。
'.source.coffee':
'Console log':
'prefix': 'log'
'body': 'console.log $1'
- 1行目がスコープ（どのファイル形式のときに発動するか）
- 2行目がタイトル（サジェストのときに説明文として表示されます）
- 3行目がトリガーとなる単語
- 4行目が挿入される単語
4行目はダブルコーテーション3つずつで囲うと複数行にも対応しています。
こんな感じで登録したスニペットは優先度が高いので、より上部に表示されるようになります。なので、今より上に来てほしいスニペットを同じprefixで再登録することで、上部に表示させるようにすることも可能です。
Atomを本格的に使うようになってから1年半くらい（実際の使い始めは8年くらい前）ですが、まだまだ使いこなせていないので、これからもガンガンカスタマイズしていきたいです。
「ちょっと気になるなー」程度のことならだいたいカスタマイズ出来ちゃうのがAtomの良いところなので、面倒くさがらずに設定していきますw
今回の設定内容をチームに共有したら、Atom使ってる人が僕一人になっていたことを知ってしまいました。かなしみ。
今回設定したスニペット
snippets.cson に設定した内容をメモしておきます。今後増える予定。
「僕好みのHTMLファイルを作成するスニペット」と「idをより上に表示するためのスニペット」です。
'.text.html.basic':
'HTML 5':
'prefix': 'html'
'body': """
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
</body>
</html>
"""
'id':
'prefix': 'id'
'body': 'id="$1"'
