Fetch and Start

この記事はSublime Text Advent Calendar 2014の6日目の記事です。

5日目のtoru_inoueさんにご紹介いただきまして、6日目を担当いたしますは、私こもり(Tシャツの人)でございます。あ、空前の大ブームを巻き起こしたオレンジの教科書の監修者です。

Sublime Text Advent Calendar 2014 | Day 6

ロケットスタートしたい…

どうでしょう、最近のWebの制作とかの仕事は使う技術も増え、それに伴ってあれやこれやと設定ファイルの類も増えてませんか? 「.gitignore」「.editorconfig」「.jshintrc」に「package.json」「bower.json」「Gemfile」とかいろいろ。

それぞれコマンドで自動的、もしくは手動でファイルを追加するわけですが、いちいちコマンド打つのもまた面倒くさい。だったら、「何か新しく作り始める時に最初から使いそうなオレオレセットを作っちまおうじゃないか」というのが今回の主題です。

ひとまとめにしたフォルダをzipとかで圧縮しておいてそれを解凍して始める、どっかのリポジトリにおいといてGitでクローンして、というのもありですが、そこはほらSublime Textのパッケージをうまく使いながらやりましょう。そうでなければこの記事は成立しませんので…。

で、今回使うのは「Nettuts+ Fetch(以下、Fetch)」です。Fetchは、あの有名なオレンジの教科書でも紹介されていますが、あらかじめよく使うファイルやzipなどで圧縮されたファイル群のURIを登録しておき、必要に応じてコマンドパレットから呼び出して手元に用意しちゃおう的なパッケージです(今のご時世、ライブラリの入手はBowerでしょうが、FetchはFetchであると便利)。

あとせっかくなので、今回の記事ではいろんな余談を交えつつ、増えすぎたプロジェクトディレクトリ内のファイルの類をサイドバーに表示しない方法もあわせて紹介しましょう。

オレオレセットを準備する

オレオレセットといっても、そこは人それぞれ扱う技術も必要となるファイルも異なります。ライブラリとかはプロジェクトごとに使うのも変わるでしょうから、そこは最低限必要となりそうなものだけを入れておくと良いでしょう。

たとえば、Gitを使うなら.gitignoreが多くの場合ありますよね。その他にも、3日目のハムさんも取りあげていた.editorconfigなどもありますね。自動調整じゃなくショートカットでフォーマットするならパッケージ「HTML-CSS-JS Prettify」を使うと便利ですが、この全体設定ではなくてプロジェクトごとに.jsbeautifyrcを入れて調整する方が良いでしょう。

また、いまどきのWeb制作ではnpmのモジュールを使うとかBowerでライブラリをまとめて用意するでしょうから、package.jsonとかbower.jsonをあらかじめ作っとけば、initコマンドを打つ必要もありません。SassやCompassをBundlerでバージョン管理するならGemfileが要りますしね。

そういうのをフォルダの中に一緒くたにして入れてまるっと圧縮しちゃいましょう。

こんな感じで、ね。

Fetchの設定に追加する

インストールが終わったら、コマンドパレットから「Fetch: Manage」を選んで設定ファイルを開き、「files」に単体のファイル、「packages」にライブラリパッケージなどのURIを登録します。準備はこれだけ。

Fetch: Manageで登録

http://〜」だけじゃなくて「file:///〜」のローカルファイルも登録できますので、自前のオレオレセットはローカルのどこかに置いておけばよろし。

Fetch.sublime-settings

次からはコマンドパレットから「Fetch: File」か「Fetch: Package」を選択すれば、リストが表示されるのでお目当てのを呼び出すだけであら不思議、と。

さ、準備が出来たらフォルダを一個作ってSublime Textにドラッグしてはじめましょう。


だいぶ前に公開したFetchの設定ファイルはこちら。こんな感じで設定をします。


複数のファイルで検索・置換

package.jsonやbower.jsonのように、ものによってはファイル中にプロジェクト名を指定するものなどもあります。複数の設定ファイルをまとめて用意しておくのは良いですが、それらのファイル中の任意のワードを個別に開いて置換するのは面倒です。そんな時は、Sublime Textの「Find in files...(cmd+shift+f)」メニューを使うと楽勝です。

Find in files...でマルチファイル検索

「Find」に検索したいワードを入れて、「Where」の欄は右の「…」をクリックして「Add Open Folders」をクリックすれば、そのディレクトリ内を対象にすることができます。

開いてるフォルダを対象にする

置換したいワードを入れればOK

あとは置換したいワードを入れて右下の「Replace」ボタンを押せばオッケー、と。

余談ですが、こういうpackage.jsonみたいなのがプロジェクトディレクトリ内にあると、「Recents」からプロジェクト名でさらっとそのディレクトリをSublime Textで開けたりするわけです。「Project Manager」ってパッケージも便利だな、と思ったんですがこれにはかないません。

Recent

見えなくていいのは設定で非表示に

サイドバーには「.(ドット)」で始まる不可視のファイルやディレクトリなども表示されます。こういったファイルが増えていくと、サイドバーのプロジェクトディレクトリが煩雑になっていき「おいおいおい、まるでゴミ箱のようじゃないか…」となるわけです。

で、残念なのがこれらのファイルは都度開くものばかりではありません。

日常的に見えなくてよいファイルやフォルダはSublime Textの設定を開いて、「file_exclude_patterns」や「folder_exclude_patterns」に追加しておくと良いでしょう。

Preferences.sublime-settings

「.git」「.sass-cache」みたいな普段あまり見ることのない不可視のフォルダなども入れておけばスッキリしますね。

実際にやるとこんな感じ

といったことを、実際にSublime Textでやるとこんな感じです。

といった感じでおしまい。「エディタは好きなの使えば良いじゃん」と思ってるこもりがお届けしました。


で、続く7日目は大都会岡山から、1年数ヶ月ぶりにブログを書いたという中川製作所山川製作所の山川さんです。