kanke

TAMのエンジニアが使っているエディタとSublime Textのプラグイン14選

TAMでは、月に一度、大阪と東京のエンジニアが集まってミーティングをしています。

主にやっていることは、案件でやったことの発表や、技術情報の共有なので、
ミーティングというよりは、案件発表会・技術勉強会と言ったほうが良いかもしれません。

TAMは色々なチームがあって、エンジニアの人数も多いので、他のエンジニアがどういう仕事をしているか知ったり、スキルの属人化を防いだりするために、定期的にこういったミーティングを設けるようにしています。

その中で、他のエンジニアの作業環境が知りたいという話があったので、みんなの制作環境にガサ入れ(アンケート)をしてみました!
今回は、使っているエディタとプラグインについての調査結果をお送りします。

使っているエディタに関して

editor_01

複数回答可ですが、半数以上がSublime Textでした。

Sublime Textを使ってる理由は「軽さと拡張性」という意見が多かったです。
面白い意見では「惰性でつかってます」というものがありましたw

Dreamweaverを使っているという意見も多かったですが、話を聞いてみると、他のエディタと併用して使っているということでした。
長く運用に携わっている案件なども多いので、そういった案件はDreamweaverを使うことが多いのかと思います。僕もたまに使っています。

使用しているプラグイン

使用しているプラグインというか、おすすめのプラグインがあれば教えてくださいという質問で上がったものを紹介していきます。
集まったプラグインもSublime Textのものが多かったので、今回はSublime Textのプラグインに絞って紹介していきます。
※紹介しているショートカットはMacのものです。

Emmet

もはや説明不要かと思いますが、Emmetです。

Emmet記法と呼ばれる、CSSの記述のような書き方で書いたものをHTMLに展開してくれます。

via GIPHY

上記の動画を見てもらえればわかりますが、下記のように展開してくれます。

<!-- こう書くと -->
#header>h1.logo{ロゴ}+nav.gnav>ul>(li>a[href=link$.html])*3^^#hero-img|c`

<!-- こう展開してくれる -->
<div id="header">
    <h1 class="logo">ロゴ</h1>
    <!-- /.logo -->
    <nav class="gnav">
        <ul>
            <li><a href="link1.html"></a></li>
            <li><a href="link2.html"></a></li>
            <li><a href="link3.html"></a></li>
        </ul>
    </nav>
    <!-- /.gnav -->
    <div id="hero-img"></div>
    <!-- /#hero-img -->
</div>
<!-- /#header -->

メジャーなエディタは大体対応してます。
記述方法について詳しくは、公式サイトをご確認ください。

Hayaku

CSSを良い感じに展開してくれるプラグインです。
Emmetと似ているのですが、Emmetよりも柔軟に変換してくれます。

via GIPHY

上記の例では、下記のように入力して展開しています。

cF → color: #FFF
c0.5 → color: rgba(0,0,0,.5)
pa → position: absolute

ただ、Emmetとぶつかるので、EmmetとHayakuを共存させる場合は、CSS系のファイルでTabの展開を切るなどの対応が必要です。

こちらのGistが詳しかったので参照ください。

BracketHighlighter

カーソルの位置に合わせて、コーテーションやタグをハイライトしてくれます。

via GIPHY

ちょっとわかりにくいかもしれませんが、カーソルの位置によって、対応する閉じタグなどにアンダーバーが出ているのがわかると思います。
また行の左側にタグマークなどが現れてくれます。

細かいところですが、あるとないとでは全然使い勝手が違いますね。

AutoFileName

定番ですね!
例えば、imgタグで画像を参照しようとした時など、自動でディレクトリ内のファイル一覧を補完してくれます。

via GIPHY

とりあえず入れているという人も多そうな気がします。

All Autocomolete

これも定番!
開いているファイルの中で、マッチする文字列があればサジェストしてくれます。

via GIPHY

画像名から関数名まで、使用している文字列をサジェストしてくれてるのがわかると思います。

とりあえず入れておいて損はないという感じでしょうか。

TrailingSpaces

不要スペースのハイライトをしてくれます。

via GIPHY

行末に不要なスペースや、空行にスペースがあるとハイライトしてくれてます。
一目瞭然ですね!

Alignment

[=][;][=>]などの記号の位置を簡単に揃える事ができます。

via GIPHY

プログラミングしている時に気になりますよね。
揃えたい行を選択して右クリック Align By から何に揃えるか指定して揃えることができます。

SublimeLinter

構文チェックをしてくれるプラグイン。
構文エラーがあると、エラーがある箇所をハイライトしてくれて、ステータスバーにエラー内容が表示されます。

via GIPHY

例は、JavaScriptのコードです。
31行目はセミコロンが無い、33行目は関数名にハイフンを使っているということでエラーになっていますね。

CSSやJSなどそれぞれのLint packageが別途必要になります。
イージーミスが起きにくくなるのでおすすめです。

JavaScriptの構文チェックに関しては、こちらの記事もどうぞ。

ESLintでJavaScriptの構文チェックを始める

CSScomb

CSSを決まったルールで整えてくれます。
例えば、プロパティの順番やインデント、{} の前後にスペースを入れるかどうかなど指定できます。

via GIPHY

ルールは設定ファイルに記述します。設定ファイルは Preferences → Package Settings → CSScomb → Settings - User から開いて、Json形式で設定できます。
公式サイトで、自分好みの設定用のJsonを作成することもできます。

List stylesheet variables

Sassで定義している変数を呼び出すことが出来ます。

via GIPHY

ショートカット option + control + l で変数の一覧が出てきます。
途中まで入力するとサジェストもされます。

注意点としては、変数を定義しているファイルが開いていないと読み込むことが出来ません。

SideBarEnhancements

プロジェクトのフォルダやファイルを選択して右クリックを押した時の項目が拡張されます。

via GIPHY

複製や移動ができるようになるので、非常に使い勝手がよくなります。

Diffy

ファイル間の差分を表示してくれるプラグインです。

via GIPHY

ウインドウを分割した状態で command + kcommand + d と順番に押すと、差分がある箇所をハイライトしてくれます。

Quick File Open

よく使うファイルを登録して、すぐに呼び出すことが出来るようになります。

via GIPHY

個人的には、たまに使うけどファイルの場所がどこだっけ?
ってなるhostsやバーチャルホストの設定ファイルなどを設定しておくと便利だなと思いました。

ファイルの登録は、設定ファイルにパスを書いていくだけです。設定ファイルは、Preferences → Package Settings → QuickFileOpen → Settings – User で開くことができます。

ファイルを登録したら、ctrl + option + shift + pで登録されているファイルが表示されます。

EditorConfig

インデントの設定や文字コードなど、プロジェクト間のエディタの設定を揃えてくれます。
詳しくは、以下の記事をどうぞ。

EditorConfig でチームみんなのエディタの設定を揃える

いかがでしたでしょうか?
僕自身、知らないものも多かったので非常に参考になりました。
紹介したプラグインの中で気になるものがあれば、ぜひ試してみてください!

今後も、社内発表会や勉強会で発表したもので、記事にできそうなものがあれば記事にしていきます。

エンジニア募集中!

そんなTAMではエンジニアを絶賛募集中です。

制作環境は自由なので、好きなエディタやツールを使って仕事ができます!
新しいツールなども積極的に試して導入をしていますので、エンジニアは働きやすい環境だと思います。

エディタのカスタマイズに情熱をもっている人もそうでない人も、ご興味があれば気軽にWantedlyからご連絡ください。

大阪・東京のどちらでも募集しています!

「清く、正しく、面白く。」大手企業のウェブを支えるフロントエンドエンジニア
https://www.wantedly.com/projects/68610

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら