ฉันจะเปลี่ยนสีของความคิดเห็นในรหัส Visual Studio ได้อย่างไร


86

ฉันผ่านhttps://code.visualstudio.com/docs/getstarted/theme-color-referenceแต่ดูเหมือนจะไม่พบการตั้งค่าสำหรับการเปลี่ยนสีของความคิดเห็น

ตอนนี้ฉันใช้ Atom One Dark Theme และแค่ชอบทำให้สีจางลงเล็กน้อยเพื่อที่ฉันจะได้อ่านได้ดีขึ้น

คำตอบ:


161

ตั้งแต่1.15 (กรกฎาคม 2017)คุณสามารถเปลี่ยนได้จากsettings.json Ctrl +,

"editor.tokenColorCustomizations": {
    "comments": "#d4922f"
},

ตั้งแต่วันที่1.20 (มกราคม 2018)คุณสามารถทำได้สำหรับแต่ละธีมแยกกัน:

"editor.tokenColorCustomizations": {
    "[Atom One Dark]": {
        "comments": "#d4922f"
    }
},

การค้นหาขอบเขตที่เหมาะสม:

ผู้พัฒนา: Inspect TM Scopes editor.action.inspectTMScopes

คำสั่ง demo ตรวจสอบ tm

ลำดับความสำคัญของตัวเลือก:

https://code.visualstudio.com/blogs/2017/02/08/syntax-highlighting-optimizations#_textmate-themes



ตกลงตัวอย่างเพิ่มเติม (สำหรับjs):

"editor.tokenColorCustomizations": {
    "textMateRules": [{
        "scope": "INSERT_SCOPE_HERE",
        "settings": {
            "foreground": "#ff0000"
        }
    }]
}

comment ใส่คำอธิบายภาพที่นี่ punctuation.definition.comment ใส่คำอธิบายภาพที่นี่ comment.block.documentation ใส่คำอธิบายภาพที่นี่ storage.type.class.jsdoc ใส่คำอธิบายภาพที่นี่ entity.name.type.instance.jsdoc ใส่คำอธิบายภาพที่นี่ variable.other.jsdoc ใส่คำอธิบายภาพที่นี่


ความเป็นไปได้ใด ๆ สำหรับพื้นหลัง / เบื้องหน้า?
Johnny Derp


1
ใครทราบว่าการตั้งค่าสำหรับ // และ / * ก่อนข้อความแสดงความคิดเห็นคืออะไร? นอกจากนี้การตั้งค่าสำหรับ "ก่อนสตริงคืออะไร
Superdooperhero

คุณสามารถลอง "ค้นหาขอบเขตที่เหมาะสม" จากคำตอบ
Alex

1
วิธีใด ๆ ในการเปลี่ยนสีของส่วนเริ่มต้นและส่วนท้ายของบล็อกความคิดเห็น /**และ*/จะไม่เปลี่ยนแปลงหลังจากตั้งค่าสีของความคิดเห็น ส่วนตรงกลางกำลังเปลี่ยนสี
andre de waard

26

ไปที่การตั้งค่าของคุณ ใส่คำอธิบายภาพที่นี่

จากนั้นค้นหา settings.json ใส่คำอธิบายภาพที่นี่ เปิดไฟล์จากนั้นเพิ่มโค้ดบรรทัดนี้:

"editor.tokenColorCustomizations": {

        "comments": "#229977"
    },

เปลี่ยนสีของความคิดเห็นตามความชอบของคุณโดยวางเมาส์เหนือสีแล้วเลือกสีที่คุณต้องการ ใส่คำอธิบายภาพที่นี่ จากนั้นบันทึกการเปลี่ยนแปลง (Ctrl + S) ออกจากโปรแกรม เปิดอีกครั้งคุณจะเห็นการเปลี่ยนแปลง ใส่คำอธิบายภาพที่นี่


6
ขอบคุณสำหรับวิชวล ทำให้ง่ายขึ้นมากในการนำทาง
Biarys

19

เพื่อขยายคำตอบและความคิดเห็นของ @Johnny Derp คุณสามารถเปลี่ยนสีและรูปแบบตัวอักษรโดยใช้:

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "comment",
        "settings": {
          "fontStyle": "italic",
          "foreground": "#C69650",
        }
      }
    ]
  },

backgroundไม่สามารถเปลี่ยนแปลงได้ด้วยวิธีนี้มีเพียงสีและรูปแบบเท่านั้น ณ เดือนมิถุนายน 2561


นอกจากนี้ในคำตอบสำหรับความคิดเห็นสองสามข้อเกี่ยวกับการเปลี่ยนความคิดเห็นpuntuation(เช่น//) สีซึ่งตอนนี้ต้องแยกสีกับกฎ textmate ของตัวเองการเปลี่ยนแปลงอาจจะมาเพื่อแก้ไขในรุ่นเดือนตุลาคม 2019 - ณ จุดนี้มันเป็น ปัญหาที่ยังไม่ได้รับการแก้ไข แต่ได้เพิ่มเข้าไปในเหตุการณ์สำคัญในเดือนตุลาคม 2019 ดูhttps://github.com/microsoft/vscode/milestone/102


6

ดูเหมือนว่าไม่สามารถปรับแต่งสีโทเค็นภายในการตั้งค่าได้ในขณะนี้:

สีตัวแก้ไขที่โดดเด่นที่สุดคือสีโทเค็นที่ยึดตามไวยากรณ์ของภาษาที่ติดตั้ง สีเหล่านี้กำหนดโดยธีมสีและไม่สามารถปรับแต่ง (ในปัจจุบัน) ได้ในการตั้งค่า

ที่มา: https://code.visualstudio.com/docs/getstarted/theme-color-reference

ฉันสังเกตเห็นว่าถ้าคุณเข้าไปในโฟลเดอร์ธีมเช่น C: \ Program Files (x86) \ Microsoft VS Code \ resources \ app \ extensions \ theme-monokai และแก้ไขไฟล์ monokai-color-theme.json ให้ดู สำหรับบรรทัดที่มี "name": "Comment" และเปลี่ยนสี "พื้นหน้า" จะใช้ได้ อย่าลืมรีสตาร์ทโปรแกรม


5

เช่นเดียวกับที่มาร์คพูด แต่เพิ่มใน"scope":ภายหลัง"comment"

"punctuation.definition.comment"

เพื่อระบายสีเครื่องหมายวรรคตอน

เช่น ( //ใน javescript | /* */ใน css | <!-- -->ใน html)

"scope": ["comment", "punctuation.definition.comment"]

3

คุณสามารถแก้ไขโค้ด VS ของคุณได้เพียงแค่แก้ไขไฟล์การตั้งค่าของคุณในโค้ด VS และทำตาม 3 ขั้นตอนเหล่านี้

ขั้นตอนที่ 1: ใส่คำอธิบายภาพที่นี่

ขั้นตอนที่ 2: ใส่คำอธิบายภาพที่นี่

ขั้นที่ 3: ใส่คำอธิบายภาพที่นี่


2

ในการเปลี่ยนสีความคิดเห็น VS Code

ไฟล์ -> การตั้งค่า -> การตั้งค่า

เลือกแท็บ "การตั้งค่าพื้นที่ทำงาน" เพื่อเปลี่ยนเฉพาะสำหรับโปรเจ็กต์นี้
เลือกแท็บ "การตั้งค่าผู้ใช้" เพื่อเปลี่ยนสำหรับโปรเจ็กต์ทั้งหมด

ทำการค้นหา "settings.json" และมองหาตัวเลือก "Edit in settings.json"

แทรกการตั้งค่าสีนี้สำหรับความคิดเห็นในวงเล็บปีกกา:

  "editor.tokenColorCustomizations": {
    "comments": "# ff4"
  }

อาจบ่นว่าคุณกำลังลบล้างธีมสีปัจจุบันของคุณเพียงแค่เพิกเฉย

หากมีส่วนสำหรับ "editor.tokenColorCustomizations" อยู่แล้วให้เพิ่มบรรทัดเพื่อระบุสีของความคิดเห็น


0

การตั้งค่าเอกสารบล็อกและบรรทัด

หากต้องการมีสีที่แตกต่างกันสำหรับความคิดเห็น Doc, Block และ Line:

ตัวอย่างความคิดเห็น

"editor.tokenColorCustomizations": {
    "[Cobalt2]": {
        "textMateRules": [
            {
                "scope": [
                    "comment.block",
                    "punctuation.definition.comment.end",
                    "punctuation.definition.comment.begin"
                ],
                "settings": {
                    "foreground": "#85b3f8",
                    "fontStyle": "bold"
                }
            },
            {
                "scope": [
                    "comment.block.documentation",
                    "punctuation.definition.comment.begin.documentation",
                    "punctuation.definition.comment.end.documentation"
                ],
                "settings": {
                    "foreground": "#6bddb7",
                    "fontStyle": "bold"
                }
            },{
                "scope":["comment.line", "punctuation.definition.comment"],
                "settings": {
                    "foreground": "#FF0000",
                    "fontStyle": "bold"
                }
            }
        ]
    }
}

ทดสอบด้วย C ++


0

ขณะแสดงความคิดเห็นในหัวข้อความคิดเห็นฉันพบว่าส่วนขยาย "ความคิดเห็นที่ดีกว่า" ของ VS Code มีประโยชน์มาก คุณสามารถให้เลือกหลายสีความคิดเห็นของคุณและด้วยเหตุนี้จัดหมวดหมู่ความคิดเห็นของคุณขึ้นอยู่กับความสำคัญ ฯลฯ สีเมนต์เริ่มต้นยังสามารถเปลี่ยนแปลงได้. https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
ตัวอย่าง: ส่วนขยายนี้สามารถกำหนดค่าในการตั้งค่าผู้ใช้หรือการตั้งค่าพื้นที่ทำงาน
ยืมมาจากหน้าส่วนขยาย

ใส่คำอธิบายภาพที่นี่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.