てくすた

ピクスタ株式会社のエンジニア・デザイナーがつづるよもやまテクニカルブログです

Visual Studio Codeでコーディングを効率化するための便利な使い方

この記事は、PIXTA Advent Calendar 2017 19日目の記事です。

こんにちは。出張撮影マッチングサービスfotowaのデザイナーの小川です。
今回は Visual Studio Code を使ったコーディングの効率化について簡単にまとめました。

Visual Studio Codeとは?

f:id:masahiro-ogawa:20171218145304p:plain Visual Studio Code はMicrosoftが提供しているソースコードエディタです。
特徴として下記のようなものがあります。

  • 複数言語のサポート
  • Git連携機能のサポート
  • コードの自動補完(Intellisense)
  • 拡張機能が豊富
  • 動作が軽い
  • Windows、Mac、Linuxに対応

効率化の方法

よく使うショートカットまとめ(Mac)

ショートカットを覚えることで、作業効率を上げることができます。

コマンド 内容
Cmd + N 新規ファイル作成
Cmd + Shift + S 名前を付けて保存
Cmd + W エディタを閉じる
Cmd + X 行の切り取り
Cmd + C 行のコピー
Option + ↑ カーソル行を上に移動
Option + ↓ カーソル行を下に移動
Shift + Option + ↑ カーソル行を上にコピー
Shift + Option + ↓ カーソル行を下にコピー
Cmd + D 選択した次の一致項目に移動
Cmd + ↑ ファイルの先頭に移動
Cmd + ↓ ファイルの末尾に移動
Cmd + / 行コメント記号をトグル
Cmd + F 検索
Cmd + Option + F 置換

*必要に応じて、Code > 基本設定 > キーボード ショートカット から変更できます。

Emmet

Emmetの省略記法を活用することで最小限の記述で展開ができるので便利です。
下記はEmmetの省略記法の一例です。

[HTMLの場合]
エディタ上で下の文字を打ち込み f:id:masahiro-ogawa:20171218150613g:plain

tab もしくは Enter で展開 f:id:masahiro-ogawa:20171218150637g:plain

[CSSの場合]
エディタ上で下の文字を打ち込み f:id:masahiro-ogawa:20171218150702g:plain

tab もしくは Enter で展開 f:id:masahiro-ogawa:20171218150716g:plain

他の記述はCheat Sheetを参照してみてください。

*tab もしくは Enter で展開しない場合は、下記の設定が必要です。 f:id:masahiro-ogawa:20171218150802g:plain

  • 画面左下の歯車アイコンから「設定」を開く
  • 2分割画面の左側にあるEmmetの項目をクリック
  • 画面上部にある「設定の検索」で「emmet.triggerExpansionOnTab」を検索
  • "emmet.triggerExpansionOnTab": false の左側にある編集アイコンをクリック
  • クリックしたら「true」に変更

拡張機能

拡張機能を活用することで、記述、修正、確認などを効率化できます。

  • Auto Rename Tag 開始タグもしくは、閉じタグを変更すると、自動的に対になってるタグを変更してくれます。

  • Trailing Spaces 行末のスペースを分かりやすく可視化してくれます。

  • Path Intellisense srcやhrefとしてパスを書き込む際に、自動でそのディレクトリにあるパス入力の補完を行ってくれます。

まとめ

今回は Visual Studio Code を使ったコーディングの効率化ついて紹介しました。
私はこれまで Coda2 を利用していましたが、 Visual Studio Code を使い始めてから作業スピードがだいぶ上がりました。無償の上に多機能なので、エディタ選びに迷われている方にもオススメです!
効率化については、はじめは慣れるまでに少し時間が必要になりますが、作業時間の短縮に繋がるので、まずは是非試してみてください!

デザイナー/エンジニア募集

ピクスタでは、新規事業 fotowa の成長を加速してくれるデザイナー/エンジニアを募集しています!
recruit.pixta.co.jp