TAMでは、月に一度、大阪と東京のエンジニアが集まってミーティングをしています。
主にやっていることは、案件でやったことの発表や、技術情報の共有なので、
ミーティングというよりは、案件発表会・技術勉強会と言ったほうが良いかもしれません。
TAMは色々なチームがあって、エンジニアの人数も多いので、他のエンジニアがどういう仕事をしているか知ったり、スキルの属人化を防いだりするために、定期的にこういったミーティングを設けるようにしています。
その中で、他のエンジニアの作業環境が知りたいという話があったので、みんなの制作環境にガサ入れ(アンケート)をしてみました！
今回は、使っているエディタとプラグインについての調査結果をお送りします。
使っているエディタに関して
複数回答可ですが、半数以上がSublime Textでした。
Sublime Textを使ってる理由は「軽さと拡張性」という意見が多かったです。
面白い意見では「惰性でつかってます」というものがありましたｗ
Dreamweaverを使っているという意見も多かったですが、話を聞いてみると、他のエディタと併用して使っているということでした。
長く運用に携わっている案件なども多いので、そういった案件はDreamweaverを使うことが多いのかと思います。僕もたまに使っています。
使用しているプラグイン
使用しているプラグインというか、おすすめのプラグインがあれば教えてくださいという質問で上がったものを紹介していきます。
集まったプラグインもSublime Textのものが多かったので、今回はSublime Textのプラグインに絞って紹介していきます。
※紹介しているショートカットはMacのものです。
Emmet
もはや説明不要かと思いますが、Emmetです。
Emmet記法と呼ばれる、CSSの記述のような書き方で書いたものをHTMLに展開してくれます。
上記の動画を見てもらえればわかりますが、下記のように展開してくれます。
<!-- こう書くと -->
#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よりも柔軟に変換してくれます。
上記の例では、下記のように入力して展開しています。
cF → color: #FFF
c0.5 → color: rgba(0,0,0,.5)
pa → position: absolute
ただ、Emmetとぶつかるので、EmmetとHayakuを共存させる場合は、CSS系のファイルでTabの展開を切るなどの対応が必要です。
こちらのGistが詳しかったので参照ください。
BracketHighlighter
カーソルの位置に合わせて、コーテーションやタグをハイライトしてくれます。
ちょっとわかりにくいかもしれませんが、カーソルの位置によって、対応する閉じタグなどにアンダーバーが出ているのがわかると思います。
また行の左側にタグマークなどが現れてくれます。
細かいところですが、あるとないとでは全然使い勝手が違いますね。
AutoFileName
定番ですね！
例えば、imgタグで画像を参照しようとした時など、自動でディレクトリ内のファイル一覧を補完してくれます。
とりあえず入れているという人も多そうな気がします。
All Autocomolete
これも定番！
開いているファイルの中で、マッチする文字列があればサジェストしてくれます。
画像名から関数名まで、使用している文字列をサジェストしてくれてるのがわかると思います。
とりあえず入れておいて損はないという感じでしょうか。
TrailingSpaces
不要スペースのハイライトをしてくれます。
行末に不要なスペースや、空行にスペースがあるとハイライトしてくれてます。
一目瞭然ですね！
Alignment
[=][;][=>]などの記号の位置を簡単に揃える事ができます。
プログラミングしている時に気になりますよね。
揃えたい行を選択して右クリック Align By から何に揃えるか指定して揃えることができます。
SublimeLinter
構文チェックをしてくれるプラグイン。
構文エラーがあると、エラーがある箇所をハイライトしてくれて、ステータスバーにエラー内容が表示されます。
例は、JavaScriptのコードです。
31行目はセミコロンが無い、33行目は関数名にハイフンを使っているということでエラーになっていますね。
CSSやJSなどそれぞれのLint packageが別途必要になります。
イージーミスが起きにくくなるのでおすすめです。
JavaScriptの構文チェックに関しては、こちらの記事もどうぞ。
ESLintでJavaScriptの構文チェックを始める
CSScomb
CSSを決まったルールで整えてくれます。
例えば、プロパティの順番やインデント、{} の前後にスペースを入れるかどうかなど指定できます。
ルールは設定ファイルに記述します。設定ファイルは Preferences → Package Settings → CSScomb → Settings - User から開いて、Json形式で設定できます。
公式サイトで、自分好みの設定用のJsonを作成することもできます。
List stylesheet variables
Sassで定義している変数を呼び出すことが出来ます。
ショートカット option + control + l で変数の一覧が出てきます。
途中まで入力するとサジェストもされます。
注意点としては、変数を定義しているファイルが開いていないと読み込むことが出来ません。
SideBarEnhancements
プロジェクトのフォルダやファイルを選択して右クリックを押した時の項目が拡張されます。
複製や移動ができるようになるので、非常に使い勝手がよくなります。
Diffy
ファイル間の差分を表示してくれるプラグインです。
ウインドウを分割した状態で command + k → command + d と順番に押すと、差分がある箇所をハイライトしてくれます。
Quick File Open
よく使うファイルを登録して、すぐに呼び出すことが出来るようになります。
個人的には、たまに使うけどファイルの場所がどこだっけ？
ってなるhostsやバーチャルホストの設定ファイルなどを設定しておくと便利だなと思いました。
ファイルの登録は、設定ファイルにパスを書いていくだけです。設定ファイルは、Preferences → Package Settings → QuickFileOpen → Settings – User で開くことができます。
ファイルを登録したら、ctrl + option + shift + pで登録されているファイルが表示されます。
EditorConfig
インデントの設定や文字コードなど、プロジェクト間のエディタの設定を揃えてくれます。
詳しくは、以下の記事をどうぞ。
EditorConfig でチームみんなのエディタの設定を揃える
いかがでしたでしょうか？
僕自身、知らないものも多かったので非常に参考になりました。
紹介したプラグインの中で気になるものがあれば、ぜひ試してみてください！
今後も、社内発表会や勉強会で発表したもので、記事にできそうなものがあれば記事にしていきます。
エンジニア募集中！
そんなTAMではエンジニアを絶賛募集中です。
制作環境は自由なので、好きなエディタやツールを使って仕事ができます！
新しいツールなども積極的に試して導入をしていますので、エンジニアは働きやすい環境だと思います。
エディタのカスタマイズに情熱をもっている人もそうでない人も、ご興味があれば気軽にWantedlyからご連絡ください。
大阪・東京のどちらでも募集しています！
「清く、正しく、面白く。」大手企業のウェブを支えるフロントエンドエンジニア
https://www.wantedly.com/projects/68610