※再投稿
本記事は朝日新聞社 Advent Calendar 2021の13日目の記事です！
今回は「VSCodeをチームで便利に使っていこう」というお話でございます。
VSCodeは共同開発にもいいぞということをお伝えすべくこの記事を書きます。
VSCodeの設定は「settings.json」でできる
VSCodeの設定は、settings.jsonというユーザーファイルで行います。
cmd + ,でGUIを使って設定することもできますが、settings.jsonで設定すると楽でよいです。
Macだと$HOME/Library/Application Support/Code/User/settings.jsonにファイルがありますね。
さて、VSCoderは各々このsettings.jsonを編集してVSCodeを自分が使いやすいように設定していると思いますが、この設定…実はプロジェクト(ワークスペース)ごとにできるということをご存知でしたか？
※公式Docのここ
VSCodeの設定をワークスペースごとにする
VSCode全体の設定は上記の場所にsettings.jsonが格納されているのですが、ワークスペースごとの設定はまた別の場所で行います。
場所はプロジェクト/.vscode/settings.json です。
ここのsettings.jsonに設定を書いて共有すれば、プロジェクトの仲間の中でVSCodeを使っている人は特にややこしいことをせずに全員同じ設定で開発に取り組むことができます。
尚、全体設定とワークスペース設定で設定項目がかぶっているものが出てくると思います。
このときはワークスペース設定が優先されます。
チームのだれかがマジョリティには理解されない特殊な設定をしていたとしても、ワークスペースのsettings.jsonが優先されるので、あまり難しいことは考えずにワークスペースのsettings.jsonをどんどん活用していきましょう！
※公式Docのここ
コードフォーマッター
みなさんはコードフォーマッターは何を使っていますか？
ESLint(Linterだけど…)とかjs-beatifyとか、prettierとか…。
今回はprettierの例を書いてみようと思います。
まずVSCodeの拡張から「prettier」をインストール。
そうしたらプロジェクト/.vscode/settings.json に
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
みたいな感じで書けばOKです。
もしjavascriptだけに設定したかったら…
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.formatOnSave": true
}
}
こんな感じ。
ちなみに上記はコード保存時にフォーマットして保存してくれるという設定になっています。
おそらくある程度プログラムを書いてきた人であればコーディング規約を知っているし、コードフォーマッターも使っていると思います。しかし、「プログラミングを勉強したてな新人が途中からプロジェクトに参加する」というような場合には、もしかするとコーディング規約もコードフォーマッターも知らないかもしれません。独学だとそういうことが起こりがちだと思います。
そんなときには、とりあえずVSCodeにprettierをいれてもらってプロジェクトをpullして貰えば、あとはフォーマッターのことを考えずに開発に入る...なんてことができます。
エディタの設定をプロジェクトごとに管理できると、環境構築の手間を少し減らせるという利点もあり、とても便利です。
デザイン変更
VSCodeは自分好みにいろいろとデザインを変えることができます。
複数案件を抱えているとき、瞬時に今何の開発画面を開いているのか判断できない‥なんてお悩みはありませんか？
そんなときにもワークスペースsettings.jsonが活躍します。
プロジェクト/.vscode/settings.json にこのように書いてみましょう。
{
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#ff0000",
"titleBar.activeForeground": "#000000",
"activityBar.background": "#ff0000",
"activityBar.foreground": "#000000",
"activityBarBadge.background": "#000000"
}
}
そうすると…
このようにウインドウに色を付けることができるので、瞬時に今開いているプロジェクトがなんであるかを判断することができます。
※ちなみにいくら赤色が好きといえども、他エンジニアを不安な気持ちにさせるので、エディタカラーを赤にするのはやめましょう。
細かいことは公式Docのここに書いてあります。
ワークスペースのsettings.jsonを使いこなせ！
という感じでワークスペースのsettings.jsonを作成し共有化することにより、チーム全体の開発効率を上げることができます。
今回はフォーマッターとエディタカラー変更の２つを書きましたが、まだまだ便利な設定があるはずです。
VSCodeを使っていない人は、是非VSCodeに乗り換えて、チーム全体の開発効率をどんどん上げていきましょう！
以上です。ありがとうございました。
朝日新聞社では、技術職の中途採用を強化しています。
ご興味のある方は下記リンクから希望職種の募集ページに進んでください。
皆様からのご応募、お待ちしております！