VSCodeに乗り移った際の設定やプラグインについての備忘録

入社してから結構な頻度でテキストエディタの環境をとっかえひっかえしていましたが、今後はVisual Studio Code(VS Code)で落ち着きそうです。

今回は、私がVS Codeに移り変わった経緯や設定、とりあえず入れたプラグインなどについてざっと書きとどめておこうと思います。

使ってきたテキストエディタの遷移

メインで使用していたエディタ以外にも、一週間ごとに別のテキストエディタを触って見たりなどもしていましたが、大体以下のような遷移です。

  • 学生時代から入社1年目11月まで(約3年) => Sublime Text 2/3
  • 12月〜1月いっぱい(2ヶ月) => Atom
  • 現在 => VSCode

Sublime Textを使用していた時期が長かったため、手がSublime Textのキーバインドに慣れてしまっていました。
AtomでもVS Codeでも、キーバインドはSublime Textに寄せて使っています。

VS Codeに乗り換えようと思った理由

最初は気分転換を兼ねてエディタをころころ変えていたのですが、VS Codeをいじっているうちに「これはメインで使えるのではないか」と思い始めたのがきっかけです。
主な理由は以下3点です。

Terminalが表示できる

デフォルトの機能としてMacのターミナルが開けるので、npm PackageのインストールやGitコマンド・bashファイルの実行などもすべてVS Code内で完結できます。

AtomでもPluginをいれて試したのですが、なぜか ターミナルにフォーカスした後に別タブをクリックすると新規ペインが立ち上がる というとても謎な不具合に遭遇したので、それ以降使うのをやめていました…。

表示速度が改善されている

以前VS Codeを使用していたときは、Atom以上に動作がもっさりして使いづらいと感じた記憶がありました。しかし現在ではパフォーマンスも改善されているのか、その心配もなさそうです。
VS CodeもAtomと同じくElectronでつくられていますが、Atomよりもやや早いくらい(それでも体感できるレベル)という印象です。

設定画面が日本語に対応している

設定画面の表示が日本語対応なので、自分好みに設定をカスタマイズしたいときも割りとすんなり導入できます。

そして地味に便利なところで言うと、設定用のjsonファイルにはコメントが付け加えることができます。標準のjsonファイルにも是非対応していただきたかったところです。

導入したパッケージ一覧

画像は各Marketplaceでも閲覧することができます。

主に以下の記事を参考に導入を検討しました。非常に参考になりました。
VSCodeの拡張機能 おすすめ(12/31更新)

キーバインド設定

Sublimeで使っていたキーバインドを指定していたのですが、ほとんどがSublime Text Keymapにはいっていたので、主にパッケージのキーバインド設定を上書きしているだけです。

Emmetは ctrl+e 派です。

keybindings.json

[
    {"key": "ctrl+cmd+p", "command": "projectManager.listProjects"},
    {"key": "ctrl+e", "command": "editor.emmet.action.expandAbbreviation", "when": "editorTextFocus && !editorHasMultipleSelections && !editorHasSelection && !editorReadonly && !editorTabMovesFocus"},
    {"key": "ctrl+j", "command": "extension.jumpy-word", "when": "editorTextFocus"},
    {"key": "Escape", "command": "extension.jumpy-exit", "when": "editorTextFocus && jumpy.isJumpyMode"}
]

エディターの環境設定

.jsx用の設定もしないといけない気はしますが、現状使う機会がなさそうなので一旦スルーしました。
Emmetの自動Vendor Prefix付与は現在の開発環境だと不要なので削除しました。

{
    // フォントファミリー
    "editor.fontFamily": "'SourceHanCodeJP-Normal', Menlo, Monaco, 'Courier New', monospace",
    // フォントサイズ
    "editor.fontSize": 10.5,
    // ルーラーの指定
    "editor.rulers": [0, 80],
    // PasteImageでペーストしたファイルの保存先
    "pasteImage.path": "./images/",
    // ProjectManagerで別プロジェクトに切り替えたときに新規ウィンドウでひらくかどうか 
    "projectManager.openInNewWindow": false,
    // ProjectManagerで無視するファイル
    "projectManager.vscode.ignoredFolders": [
        "node_modules",
        ".bundle",
        "out",
        "typings",
        "test"
    ],
    // ファイルブラウザから除外するフォルダ/ファイル
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/.DS_Store": true,
        "**/.bundle": true
    },
    // 検索からのみ除外するフォルダ/ファイル
    "search.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/node_modules": true,
        "**/.bundle": true,
        "**/bower_components": true,
        "**/tmp/cache": true
    },
    // デフォルトのタブサイズの指定
    "editor.tabSize": 2,
    // ガイドの表示
    "editor.renderIndentGuides": true,
    // 行送りの指定
    "editor.wrappingColumn": -1,
    // 補完表示の遅延時間の指定
    "editor.quickSuggestionsDelay": 100,
    // Peekするファイル形式の指定
    "file_peek.searchFileExtensions": [
      ".js",
      ".ts",
      ".html",
      ".css",
      ".scss",
      ".vue",
      ".jsx"
    ],
    // 言語に対するファイルの関連付け
    "files.associations": {
      "*.vue": "vue"
    },
    // .vueファイルでCSSのシンタックスを有効にする
    "emmet.syntaxProfiles": {
        "vue": "css"
    },
    // CSSのベンダープレフィックス自動不可を止める
    "emmet.preferences": {
        "css.autoInsertVendorPrefixes": false
    }
}

さいごに

まだまだ使い始めて数週間しか経ってないのですが、とりあえず開発には支障はないので安心して使えています。

エディタでお悩みの方の参考になれば幸いです。

  • BLOG
  • >
  • web
  • >
  • VSCodeに乗り移った際の設定やプラグインについての備忘録