VSCodeに触ってみる

今までBracketsを使っていたのですが、最近「VSCode良いよ」という声を聞くようになったのでちょっと試してみることにしました。

まだ触り始めたばかりですが、環境周りについてメモ。

setting.json

{
    "files.eol": "\n",
    "editor.minimap.enabled": true,
    "editor.renderWhitespace": "all",
    "editor.detectIndentation": false,
    "editor.tabSize": 4,
    "editor.snippetSuggestions": "top",
    "editor.wordWrap": "on",
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "emmet.variables": {
        "lang": "ja"
    },
    "files.trimTrailingWhitespace": true,
    "files.defaultLanguage": "markdown",
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    },
    "files.exclude": {
        "**/*.map": true,
        "**/node_modules": true
    },
    "files.watcherExclude": {
        "**/*.map": true,
        "**/node_modules": true
    },
    "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p",
    "html.format.extraLiners": "",
    "html.format.unformatted": null,
    "html.format.wrapLineLength": 0,
    "workbench.startupEditor": "none",
    "editor.copyWithSyntaxHighlighting": false
}

いくつかの記事を参考にしてsetting.jsonを編集(拡張機能に関する記述は抜いてあります)。

ショートカットのキーバインド設定

[
    {
        "key": "ctrl+shift+down ctrl+shift+p",
        "command": "editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+down",
        "command": "-editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+up ctrl+shift+p",
        "command": "editor.action.copyLinesUpAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+up",
        "command": "-editor.action.copyLinesUpAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+down",
        "command": "editor.action.insertCursorBelow",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+down",
        "command": "-editor.action.insertCursorBelow",
        "when": "editorTextFocus"
    },
    {
        "key": "shift+alt+up",
        "command": "editor.action.insertCursorAbove",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+up",
        "command": "-editor.action.insertCursorAbove",
        "when": "editorTextFocus"
    }
]

拡張機能

• Bracket Pair Colorizer – Visual Studio Marketplace
• Git History – Visual Studio Marketplace
• GitLens – Git supercharged – Visual Studio Marketplace
• Japanese Language Pack for Visual Studio Code – Visual Studio Marketplace
• vscode-icons – Visual Studio Marketplace
• Whitespace+ – Visual Studio Marketplace
• Vetur – Visual Studio Marketplace
• EJS language support – Visual Studio Marketplace
• Auto Rename Tag – Visual Studio Marketplace

こちらもいくつか記事を参考にして導入。

課題

Bracketsのときに自然に行っていたプロジェクトの切替が見当たらず、ファイル→フォルダを開く、で毎回ディレクトリを彷徨っているのでここがどうにかならないかな、と。

参考

• Visual Studio Code – Code Editing. Redefined
• VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか) – Qiita
• VSCodeで空白文字を見やすくする方法 – Qiita
• VS Codeを極める！ MarkdownやGitにもオススメの拡張機能9選 – ICS MEDIA
• Visual Studio Code の初期設定と最低限必要な拡張機能 – フロントエンド向け – – Qiita