เปลี่ยนสีข้อความไฮไลต์ใน Visual Studio Code

ตอนนี้มันเป็นภาพซ้อนทับสีเทาจาง ๆ ซึ่งมองเห็นได้ยาก วิธีใดในการเปลี่ยนสีเริ่มต้น?

อัปเดต ดูคำตอบของ @Jakub Zawiślakสำหรับ VScode 1.12+

คำตอบเก่า

Visual Studio Code เรียกการเลือกนี้ว่าไฮไลต์และน่าเสียดายที่ฉันไม่คิดว่าสีสามารถปรับแต่งได้ในขณะนี้ ธีมสามารถควบคุมสี "การเลือก" ได้ แต่สีของ "ไฮไลต์การเลือก" เป็นแบบฮาร์ดโค้ด

ดูปัญหานี้ในการติดตามวิธีแก้ไขที่เป็นไปได้: https://github.com/Microsoft/vscode/issues/1636

(ตามหมายเหตุด้านข้างคุณสามารถสลับหรือปิดคุณสมบัตินี้ได้ด้วยการeditor.selectionHighlightตั้งค่า)

เพิ่มบรรทัดต่อไปนี้ในการตั้งค่า "Editor: Token Color Customizations" ภายในไฟล์ settings.json

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#135564",
    "editor.selectionHighlightBackground": "#135564"
},

ดูการอ้างอิงสีของธีมสำหรับตัวเลือกเพิ่มเติม

คำตอบข้างต้นครอบคลุมSelected textและareas with same content as selectionแต่พวกเขาพลาดCurrent Search MatchและOther Search Matches- ที่มีปัญหาเดียวกัน

"workbench.colorCustomizations": {
    "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
    "editor.findMatchHighlightBackground": "#ff7b00a1" //Other SEARCH MATCHES
}

หมายเหตุว่าการตั้งค่าดังกล่าวข้างต้นจะมีผลต่อสีเมื่อใช้การเปลี่ยนแปลงทั้งหมดที่ปรากฏCtrlF2 (คำสั่งซุปเปอร์ที่มีประโยชน์ที่ ชาญฉลาด เลือกเกิดขึ้นทั้งหมดของสตริงวางเคอร์เซอร์ที่สถานที่สำหรับการแก้ไขหลายตัวอย่างแต่ละคน)

อัพเดท:

สำหรับผู้ที่ใช้ส่วนขยายที่เป็นที่นิยมNumbered Bookmarksตอนนี้คุณสามารถเปลี่ยนสีพื้นหลังของเส้นที่คั่นไว้ได้ - ทำให้ง่ายต่อการสังเกตเห็น เพิ่มบรรทัดนี้ใน settings.json ของคุณ (ภายใต้workbench.colorCustomizations ):

        "numberedBookmarks.lineBackground": "#007700"

และไม่พลาดเคล็ดลับที่เป็นประโยชน์เฮนรี่จู้ในคำตอบของเขาด้านล่าง (อย่าลืม upvote คำตอบของเขาถ้าคุณพบว่าเป็นประโยชน์) ฉันเพิ่มเคล็ดลับของ Henry ในการตั้งค่าด้านบนและพบว่าผลโดยรวมดีขึ้น

ตัวอย่างไฟล์การตั้งค่าทั่วไป post mod:

    {
        "git.enableSmartCommit": จริง
        "git.autofetch": จริง,
        "breadcrumbs.enabled": จริง
        "git.confirmSync": เท็จ
        "explorer.confirmDelete": เท็จ
        "code-runner.saveFileBeforeRun": จริง,
        "code-runner.saveAllFilesBeforeRun": จริง
        "workbench.activityBar.visible": จริง,
        "files.trimTrailingWhitespace": จริง,
        "telemetry.enableTelemetry": เท็จ
        "scm.providers.visible": 0, // 0 อนุญาตให้ปรับขนาดแผงควบคุมแหล่งที่มาด้วยตนเอง
        "workbench.colorCustomizations": {
            "editor.selectionBackground": "# e788ff7c", // ข้อความที่เลือกในปัจจุบัน
            "editor.selectionHighlightBackground": "# ff00005b", // เนื้อหาเดียวกับการเลือก
            "editor.findMatchBackground": "# 00cc44a8", // การจับคู่การค้นหาปัจจุบัน
            "editor.findMatchHighlightBackground": "# ff7b00a1", // อื่น ๆ SEARCH MATCHES
            "numbereredBookmarks.lineBackground": "# 007700"
            // คำแนะนำของ Henry อยู่ที่นี่ ... (อย่าลืมใส่เครื่องหมายจุลภาคในบรรทัดด้านบน)
        }
    }

จะหาไฟล์ settings.json ได้ที่ไหน:

Depending on your platform, the user settings file is located here:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

วิธีทางเลือกในการเปิดไฟล์ settings.json:

1. Ctrl +, (ลูกน้ำ) เพื่อเปิดการตั้งค่า

2. โต๊ะทำงาน

3. ตัวแก้ไขการตั้งค่า

4. วางในช่องค้นหาด้านบน workbench.colorCustomizations

5. คลิกWorkbenchแล้วคลิกทางด้านซ้ายAppearance

6. คลิกลิงก์ไปทางขวา: Edit in settings.json

อ้างอิง:

https://code.visualstudio.com/api/references/theme-color#editor-colors

https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

https://code.visualstudio.com/docs/getstarted/settings

หากใครพบสิ่งนี้และเช่นฉันไม่สามารถรับการกำหนดค่าข้างต้นได้ให้ลองทำสิ่งนี้

1. ไปที่ไฟล์> การตั้งค่า> การตั้งค่า
2. พิมพ์การปรับแต่งสีโทเค็นตัวแก้ไขการค้นหา
3. ภายใต้ส่วนหัวการปรับแต่งสีโทเค็นตัวแก้ไข
4. คลิกที่แก้ไขใน settings.json
5. ในคอลัมน์ทางขวามือเลือกการตั้งค่าผู้ใช้
6. วางสิ่งนี้ลงในวัตถุ json

อย่าลืมแทนที่ # ด้วยสีที่คุณต้องการเห็น

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#<color1>",
    "editor.selectionBackground": "#<color2>",
    "editor.wordHighlightBackground": "#<color3>",
    "editorCursor.foreground": "#<color4>"
},

ความเข้าใจของฉันเกี่ยวกับ config ข้างต้น

editor.lineHighlightBackground - เมื่อคุณคลิกที่บรรทัดนี่คือสีที่พื้นหลังของเส้นจะเป็น

"editor.selectionBackground" - นี่คือพื้นหลังของการเลือกที่ตรงกันที่อื่นในบัฟเฟอร์ ลองนึกถึงตัวแปรชื่อ foo และใช้กับทุกไฟล์ จากนั้นคุณไฮไลต์ข้อความนั้นและ Foos อื่น ๆ ทั้งหมดในหน้าจะเป็นสีนี้

"editor.wordHighlightBackground" - นี่คือสีของข้อความที่เลือกหากคำไฮไลต์เริ่มต้นเมื่อคลิกไม่มีผล ฉันเห็นว่าค่านี้สร้างความแตกต่างได้หากคุณคลิกที่คำที่ไม่ได้เลือกอัตโนมัติ

editorCursor.foreground - นี่คือสีของเคอร์เซอร์ของคุณ

ตามที่ฉันได้ทดสอบแล้วการตั้งค่าสีเส้นขอบทำให้อ่านง่ายกว่าการตั้งค่าสีพื้นหลังซึ่งเป็นสิ่งที่ Sublime Text ทำ

ตัวอย่างเช่นเพิ่มบรรทัดเหล่านี้ในsettings.json:

"workbench.colorCustomizations": {
    "editor.selectionHighlightBorder": "#FFFA",
},

คำที่เลือกจะแสดงในลักษณะนี้:

คุณสามารถเปลี่ยนเป็นสีที่คุณชื่นชอบได้โดย:

ขั้นตอน

1. เปิดโค้ดภาพ
2. ไปที่เมนูไฟล์
3. การตั้งค่า -> การตั้งค่า

หลังจากเปิดการตั้งค่าคุณจะอัปเดตการตั้งค่าของคุณในคอลัมน์ด้านขวาคัดลอกและวางรหัสนี้ในวงเล็บหลัก { ... }

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#f00", // red color hexadecimal code
    "editor.selectionHighlightBackground": "#fff" // white hex code
},

หากใครพบว่าตัวเองอ่านคำตอบของ @ FujiRoyale เนื่องจากไม่มีคนอื่นได้ผลและสงสัยว่าทำไมของเขา / เธอถึงไม่ได้ผล แต่ล่าสุดสงสัยว่าทำไมฉันจึงทำตามคำตอบของพวกเขาและมี (ด้วย v1.18 ของ vscode ) นี้เป็นการuser settingsตั้งค่า:

{
    // Is git enabled
    "git.enabled": true,
    // Path to the git executable
    "git.path": "C:\\Users\\t606964\\AppData\\Local\\Programs\\Git\\mingw64\\bin\\git.exe",
    "workbench.startupEditor": "newUntitledFile",
    // other settings
    //
    "editor.fontSize": 12,
    "editor.tabSize": 2,
    "git.confirmSync": false,
    "workbench.colorTheme": "Monokai",
    "editor.fontWeight": "bold",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDelete": false,
    "files.autoSave": "off",
    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#f00",
        "editor.selectionBackground": "#0f0",
        "editor.wordHighlightBackground": "#00f",
        "editorCursor.foreground": "#ff0"
    }
}

สังเกตการเยื้องและจุลภาคและการลบเครื่องหมายคำพูดคู่ออกจากคำตอบ (ซึ่งฉันต้องเล่นด้วยเพื่อให้ถูกต้องซึ่งไม่ชัดเจนจากคำตอบ) ไม่จำเป็นต้องรีสตาร์ท vscode แต่อาจคุ้มค่าที่จะไปFile > Autosaveดูว่าคุณเริ่มได้รับไฮไลต์สีหลักหรือไม่ จากนั้นเลือกสีที่ดีกว่าสำหรับไฮไลท์ของคุณ

คุณยังสามารถทำงานนี้ได้workspace settingsโดยการวาง

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#f00",
    "editor.selectionBackground": "#0f0",
    "editor.wordHighlightBackground": "#00f",
    "editorCursor.foreground": "#ff0"
}

ระหว่างสิ่งที่มีอยู่{}ในบานหน้าต่างการตั้งค่าด้านขวามือนั้น