Learning site for website creation

Visual Studio Code おすすめ設定

公開日:2019年09月12日 更新日:2023年08月03日

設定変更画面

「ファイル」>「基本設定」>「設定」を選択

「設定」画面が表示されるので右上の  をクリックします。

設定用JSONファイルが表示されるのでおすすめ設定をコピペし「Ctrl」+「S」で設定を保存します。

VS Code おすすめ設定

{
    /* 基本設定 */
    "editor.fontSize": 18, // エディター文字サイズ
    "debug.console.fontSize": 16, // コンソール文字サイズ
    "terminal.integrated.fontSize": 16, // ターミナル文字サイズ
    "editor.formatOnPaste": true, // ペースト時自動フォーマット
    "editor.formatOnSave": true, // 保存時自動フォーマット
    "editor.formatOnType": true, // 入力時自動フォーマット
    "editor.tabSize": 2, // タブ文字数
    "editor.detectIndentation": false, // タブルールを自分のタブルールに変更する
    "editor.mouseWheelZoom": true, // マウスホイール文字サイズ変更:Ctrl + ホイール
    "editor.renderControlCharacters": true, // 制御文字表示
    "editor.renderLineHighlight": "all", // 選択行の行番号ハイライト
    "editor.renderWhitespace": "all", // ホワイトスペース(半角スペース等)の表示
    "editor.minimap.renderCharacters": false, // ミニマップの文字をブロック表示
    "editor.minimap.showSlider": "always", // ミニマップ表示領域をハイライト
    "editor.bracketPairColorization.enabled": true, // ブラケットを色分け表示
   "editor.suggestSelection": "recentlyUsedByPrefix", // 候補リストの設定
    "explorer.compactFolders": false, // エクスプローラの省略表示しない
    "files.insertFinalNewline": true, // 保存時に末尾を空行にする
    "files.trimFinalNewlines": true, // 保存時に最終行以降を削除
    "files.trimTrailingWhitespace": true, // 保存時に行末のホワイトスペースを削除
    "workbench.editor.wrapTabs": true, // 多段タブ表示
    "window.zoomLevel": 0, // 画面全体の表示サイズ
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",  // フルパス表示
    "window.commandCenter": false, // コマンドセンター表示
    "window.enableMenuBarMnemonics": false,  // 画面幅が狭い時にメニューバーをハンバーガーメニューにしない
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", // サジェスト一覧の初期表示項目設定
    /* キー変更 */
    "editor.multiCursorModifier": "ctrlCmd", // マウスでカーソル複数作成時のキー変更
    /* 文字コード */
    "files.autoGuessEncoding": false, // 文字コード自動判別(ワークスペースで文字コード設定する)
    /* エクスプローラー */
    "files.associations": { // ファイルと言語の関連付けを変更
        ".tpl": "php"
    },
    "files.exclude": { // 非表示にするファイル
        "**/.DS_Store": true
    },
    "search.exclude": { // 検索結果から除外するファイル
        "**/tmp/cache": true
    },
    /* HTML */
    "html.format.extraLiners": "", // <head>,<body>,</html>タグ前に空行を入れない
    "html.format.contentUnformatted": "pre, code, textarea", // フォーマットしない要素を指定
    "html.format.unformatted": null, // インライン要素をフォーマットしない
    "[html]": {
      "editor.hover.enabled": false, // ホバー時メッセージ表示
    },
    /* Emmet */
    "editor.snippetSuggestions": "top", // Emmetのスニペット候補を優先表示
    "emmet.showSuggestionsAsSnippets": true, // Emmetの候補を表示
    "emmet.triggerExpansionOnTab": true, // TABキーでEmmet展開
    "emmet.variables": { // Emmet展開のHTML言語変更
        "lang": "ja"
    },
}

Java用

    /* Java */
    "java.home": "C:\\Program Files\\Java\\jdk1.8.0_XXX",
    "maven.terminal.useJavaHome": true,
    "[java]": { // Javaファイルの文字コードをSJISにする
        "files.encoding": "shiftjis"
    },
    "java.debug.settings.enableRunDebugCodeLens": false,

講師用

    /* 講師用 */
    "editor.cursorWidth": 3, // カーソル幅
    "editor.glyphMargin": false, // 行番号グリフマージン削除
    "editor.tokenColorCustomizations": {
        "comments": "#FF0000" // コメント色変更
    },

以上で設定終了です。