calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

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

Sponsored Link

エディタの使い分け

以下のエディタは全て、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"
}

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください