Visual Studio Codeの初期設定とメリット

• 作成：2019/06/24
• Tool >

エディタは一つだけ使うのではなく、AtomやVisual Studio Codeなどを用途によって使い分けるようにしています。今回はおすすめしたい初期設定をご紹介します。

エンジニア速報は Twitter の@commteで配信しています。

エディタの使い分け

以下のエディタは全て、Vim化できるのでVimを覚えれば効率よくコーディングできます。

• フロントエンド / Atom
• スニペット管理、ブログ / Quiver
• フロントエンド、マークダウン / Visual Studio Code
• iOSアプリ開発 / Xcode（XVim2をインストール）

Visual Studio Codeが使いやすいところ

Visual Studio Codeは、デフォルトで様々な機能が設定されています。また、動作も軽いです。

• マークダウンのシンタックスハイライト対応数が多い（swift など）
• 起動、置換が早い
• 初期設定が充実している
• Vimプラグインとの相性がよい
• エディターと自動シンクする軽量な markdown プレビュー
• 最初から minimap、ターミナル、コード補完が用意されている
• 設定ファイルである settings.json の記述が分かりやすい
• キーマップの変更も settings.json に書ける

Atomが使いやすいところ

Visual Studio Codeと比較しても、大きな違いはないので、どちらを使うのかは好みになると思います。

• SFTPの接続切断が容易
• ファイルマネージャーが好み
• ショートカットキーが分かりやすい

初期設定

拡張機能を入れれば、Atom のキーバインドをそのまま引き継げます。拡張機能の「VS CodeVim」を入れて vim 化した後に、キー「jj」でエスケープしたり、yank を OS 上にコピーすることもできるので便利です。フォントは、Ricty Diminishedなどでよいでしょう。

settings.json

{
  "editor.multiCursorModifier": "ctrlCmd", // マウスのマルチカーソル修飾キー
  "editor.formatOnPaste": true, // ペースト時に自動フォーマット
  "editor.fontSize": 16, // フォントサイズ
  "terminal.integrated.fontSize": 16, // ターミナルのフォントサイズ
  "files.autoSave": "onFocusChange", // 自動保存
  "editor.renderControlCharacters": true, // 制御文字の表示
  "editor.tabSize": 2, // タブのスペース
  "editor.renderLineHighlight": "all", // 選択行を行番号含めすべてハイライト
  "editor.renderWhitespace": "all", // 空白文字は全て「・」で表示
  "editor.copyWithSyntaxHighlighting": false, // 書式なしでコピーする
  "markdown.styles": [], // markdown style
  // 拡張機能
  "atomKeymap.promptV3Features": true, // atom のキーマップ
  "breadcrumbs.enabled": true, // パンくずリスト
  "workbench.iconTheme": "material-icon-theme", // iconカラー
  "editor.formatOnSave": true, // 保存時に自動でコードフォーマット
  "sync.autoUpload": true, // 設定を変更したときに設定を自動アップロードする
  "sync.autoDownload": true, // エディターを開いたときに設定を自動ダウンロードする
  "easysass.formats": [
    // sass コンパイルを圧縮に
    {
      "format": "compressed",
      "extension": ".css"
    }
  ],
  "vim.useSystemClipboard": true, // vim yank先をOSのクリップボードにコピー
  "vim.insertModeKeyBindings": [
    // vimモード：jjでエスケープする
    {
      "before": ["j", "j"],
      "after": ["<Esc>"]
    }
  ],
  "vim.normalModeKeyBindingsNonRecursive": [
    // vimモード：jをgjに変更
    {
      "before": ["j"],
      "after": ["g", "j"]
    }
  ],
  "editor.wordWrap": "on",
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "terminal.integrated.fontFamily": "monospace",
  "sftp.printDebugLog": true,
  "workbench.editor.enablePreview": false,
  "workbench.editor.enablePreviewFromQuickOpen": false,
  "workbench.editor.closeOnFileDelete": true,
  "workbench.list.openMode": "doubleClick"
}