วิธีการกำหนดรหัส Visual Studio เอง

Visual Studio Code ซึ่งเป็นโอเพนซอร์ซโค้ดโอเพ่นซอร์สตัวใหม่ของ Microsoft ช่วยให้นักพัฒนามีฟีเจอร์ที่ยอดเยี่ยมมากมาย อำนวยความสะดวกในกระบวนการแก้ไขซอร์สโค้ด. นอกจากนี้ Visual Studio Code ยังช่วยให้แน่ใจว่าผู้ใช้จะไม่เบื่อเมื่อพวกเขาทำงานด้วยเพราะจะช่วยให้พวกเขา กำหนดลักษณะส่วนต่าง ๆ ของมันเอง, เช่นสีฟอนต์ระยะห่างและการจัดรูปแบบข้อความเช่นเดียวกับฟังก์ชันมากมายเช่น linting และ กฎการตรวจสอบ.

ในตอนแรกเราจะมาดูกัน วิธีการเปลี่ยนรูปลักษณ์ของเวิร์กสเปซ Visual Studio, จากนั้นฉันจะแสดงวิธีปรับแต่งการตั้งค่าเริ่มต้นด้วยความช่วยเหลือของสองคน JSON-รูปแบบไฟล์การกำหนดค่า.

วิธีการตั้งค่าธีมสีบนรหัส VS

Visual Studio Code ช่วยให้คุณ กำหนดธีมสีที่กำหนดเอง สำหรับบรรณาธิการของคุณ.

หากต้องการนำชุดรูปแบบที่สร้างไว้ล่วงหน้าไปใช้ให้คลิกที่ ไฟล์> ค่ากำหนด> ธีมสี เมนูในแถบเมนูด้านบน เมื่อคุณตี “เข้าสู่”, Command Palette จะปรากฏขึ้นและแสดงรายการแบบหล่นลงของชุดรูปแบบที่คุณสามารถเลือกได้.

คุณสามารถบรรลุผลเช่นเดียวกันหากคุณกด F1 เพื่อเปิด Command Palette และพิมพ์ การตั้งค่า: ธีมสี คำสั่งลงในช่องใส่.

ในขณะที่คุณเกลือกกลิ้งตัวเลือกในรายการแบบเลื่อนลง, ลักษณะที่ปรากฏของเวิร์กสเปซเปลี่ยนตามเวลาจริง, เพื่อให้คุณสามารถดูว่าธีมใดเหมาะกับความต้องการของคุณที่สุด.

ฉันเลือก “ความคมชัดสูง” ธีมสีเนื่องจากดวงตาของฉันไม่ดีที่สุด นี่คือมุมมองของฉัน.

วิธีการติดตั้งธีมจาก VS Code Marketplace

หากคุณไม่ชอบรูปแบบสีใด ๆ ที่มีให้ใน VS Code คุณสามารถดาวน์โหลดรูปแบบอื่น ๆ ได้จาก VS Code Marketplace.

ที่นี่คุณสามารถดูชุดรูปแบบที่ Marketplace มีอยู่ในปัจจุบัน หากคุณต้องการติดตั้งชุดรูปแบบจาก Marketplace ให้กด F1 ด้านในเครื่องมือแก้ไขรหัส VS ของคุณเพื่อเปิด Command Palette จากนั้นพิมพ์ การติดตั้งต่อ คำสั่งลงในช่องป้อนข้อมูลในที่สุดก็เลือก ส่วนขยาย: ติดตั้งส่วนขยาย ตัวเลือกจากรายการที่ปรากฏขึ้น.

เมื่อคุณคลิกที่ตัวเลือกนี้อินสแตนซ์ใหม่ของ Command Palette จะปรากฏขึ้น พิมพ์ "ชุดรูปแบบการติดตั้งเพิ่มเติม" คำสั่งลงในช่องป้อนข้อมูลใหม่และคุณจะ รับรายการของธีมทั้งหมด ที่พร้อมใช้งานจาก VS Code Marketplace.

ฉันเลือกชุดรูปแบบที่เรียกว่า “ชุดรูปแบบวัสดุ”, และติดตั้งโดยคลิกที่มัน หากต้องการมีชุดรูปแบบใหม่ในรายการชุดรูปแบบสีในที่เดียวกับที่ชุดรูปแบบเริ่มต้นอื่นคุณต้องการ รีสตาร์ทรหัส VS. หลังจากรีสตาร์ทชุดรูปแบบใหม่จะปรากฏในรายการชุดรูปแบบและคุณสามารถตั้งค่าได้จาก Command Palette.

ด้วยชุดรูปแบบวัสดุใหม่ตอนนี้โปรแกรมแก้ไขของฉันจะมีลักษณะดังนี้:

คุณสามารถกลับไปที่ชุดรูปแบบก่อนหน้า (เหมือนที่ฉันทำเพราะฉันยังคงชอบชุดรูปแบบนั้น) หรือคุณสามารถเล่นรอบเพิ่มเติมกับชุดรูปแบบอื่นเพื่อดูว่าชุดไหนเหมาะกับคุณที่สุด.

ถ้าคุณต้องการคุณยังสามารถ สร้างธีมที่กำหนดเองของคุณ, และเผยแพร่ใน VS Code Marketplace โดยใช้เครื่องมือเครื่องมือจัดการส่วนขยาย vsce.

เปลี่ยนการตั้งค่าผู้ใช้และพื้นที่ทำงาน

รหัส VS ไม่เพียง แต่อนุญาตให้คุณตั้งค่าธีมที่กำหนดเอง แต่คุณยังสามารถทำได้ กำหนดการตั้งค่าอื่น ๆ อีกมากมาย, เช่นกฎการจัดรูปแบบการใช้งานคุณสมบัติที่แตกต่างกันรายงานข้อขัดข้องการตั้งค่า HTTP การเชื่อมโยงไฟล์กฎการทับหลังและอื่น ๆ.

คุณสามารถทำได้โดยแก้ไขไฟล์กำหนดค่าสองไฟล์ทั้งในรูปแบบ JSON ไม่ต้องกังวลคุณไม่จำเป็นต้องเป็นมืออาชีพเพราะ VS Code นำเสนอวิธีที่ตรงไปตรงมาและใช้งานง่ายในการเพิ่มการปรับแต่งของคุณอย่างรวดเร็ว.

ตอนแรกเรามาดูว่าอะไรคือความแตกต่างระหว่างสองไฟล์การตั้งค่า รหัส VS มีสองขอบเขต (ทั่วโลก และ ในประเทศ) สำหรับการตั้งค่าดังนั้นไฟล์ทั้งสองแยก:

1. ทั่วโลก settings.json, กฎการกำหนดค่าที่ถูกต้องสำหรับแต่ละพื้นที่ทำงาน
2. พื้นที่ทำงานที่เกี่ยวข้อง .vscode / settings.json, มันเกี่ยวข้องกับพื้นที่ทำงานเฉพาะเท่านั้น

ทั่วโลก settings.json ไฟล์สามารถพบได้ในโฟลเดอร์ที่ระบบปฏิบัติการของคุณจัดเก็บไฟล์การกำหนดค่าที่เกี่ยวข้องกับแอพอื่น ๆ ตามลำดับ:

• บน Windows: % APPDATA% \ รหัส \ User \ settings.json
• บน Linux: $ HOME / .config / รหัส / ผู้ใช้ / settings.json
• บน Mac: $ HOME / ห้องสมุด / การสนับสนุนแอปพลิเคชัน / รหัส / ผู้ใช้ / settings.json

พื้นที่ทำงานที่เกี่ยวข้องกับ settings.json ไฟล์จะถูกเก็บไว้ในโฟลเดอร์ของโครงการปัจจุบันของคุณ ตามค่าเริ่มต้นไฟล์นี้จะไม่มีอยู่ แต่ทันทีที่คุณเพิ่มการตั้งค่าพื้นที่ทำงานแบบกำหนดเองรหัส VS จะสร้าง .vscode / settings.json ไฟล์ในครั้งเดียวและวางการกำหนดค่าเฉพาะพื้นที่ทำงานที่กำหนดเองลงในมัน.

ดังนั้นเมื่อไหร่ที่คุณใช้ settings.json ไฟล์?

หากคุณต้องการให้รหัส VS ใช้กฎการกำหนดค่าแบบกำหนดเองของคุณใน ทั้งหมด โครงการของคุณนำพวกเขาเข้าสู่ระดับโลก settings.json ไฟล์.

หากคุณต้องการให้การตั้งค่าของคุณใช้ได้เฉพาะใน โครงการปัจจุบัน, วางไว้ในพื้นที่ทำงานที่เกี่ยวข้อง settings.json ไฟล์.

การตั้งค่าพื้นที่ทำงานจะแทนที่การตั้งค่าส่วนกลาง, ดังนั้นระวัง.

เรียกการตั้งค่าส่วนกลาง “การตั้งค่าผู้ใช้” ในรหัส VS เปิดได้โดยคลิกที่ ไฟล์> ค่ากำหนด> การตั้งค่าผู้ใช้ เมนูหรือโดยเริ่มพิมพ์นิพจน์ “การตั้งค่าผู้ใช้” ลงใน Command Palette (เปิดด้วย F1).

รหัส VS จะเปิดบานหน้าต่างสองบานที่อยู่ติดกัน: บานหน้าต่างด้านซ้ายประกอบด้วยตัวเลือกทั้งหมดที่สามารถกำหนดค่าได้และบานหน้าต่างด้านขวาจะแสดงทั่วโลก settings.json ไฟล์. คุณต้องวางกฎการกำหนดค่าที่กำหนดเองลงในไฟล์นี้.

อย่างที่คุณเห็นคุณไม่จำเป็นต้องทำสิ่งใดเพียงคัดลอกวางการตั้งค่าที่คุณต้องการเปลี่ยนจากด้านซ้ายไปทางขวาและเพิ่มค่าที่แก้ไข.

ลองมาดูตัวอย่างสั้น ๆ (แต่คุณสามารถทำการปรับเปลี่ยนอื่น ๆ ตามความต้องการส่วนบุคคลของคุณ) ฉันจะเปลี่ยนตระกูลตัวอักษรลดความยาวของ แถบ จากค่าเริ่มต้นสี่ช่องว่างเป็นสองลดจำนวนไฟล์การทำงานสูงสุดจากเก้าเป็นห้าและเปลี่ยนหนึ่งในกฎ linting CSS ที่เกี่ยวข้องกับรูปแบบที่ซ้ำกัน "ละเว้น" ไปยัง "คำเตือน".

หลังจากการคัดลอกวางทั่วโลกของฉัน settings.json ไฟล์มีลักษณะเช่นนี้:

 // วางการตั้งค่าของคุณในไฟล์นี้เพื่อแทนที่การตั้งค่าเริ่มต้น "editor.fontFamily": "Courier ใหม่", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "คำเตือน"

หลังจากบันทึกการแก้ไข settings.json ไฟล์ลักษณะที่ปรากฏของโปรแกรมแก้ไขของฉันเปลี่ยนแปลงพร้อมกัน (บนหน้าจอด้านล่างเฉพาะการเปลี่ยนแปลงของตระกูลแบบอักษรเท่านั้นที่มองเห็นได้):

คุณสามารถเปลี่ยนการตั้งค่าพื้นที่ทำงานในทำนองเดียวกัน ตอนนี้คุณต้องคลิกที่ ไฟล์> ค่ากำหนด> การตั้งค่าพื้นที่ทำงาน ในแถบเมนูด้านบนเพื่อเข้าถึงพื้นที่ทำงานที่เกี่ยวข้อง .vscode / settings.json ไฟล์.

การตั้งค่าพื้นที่ทำงานมีตัวเลือกการกำหนดค่าเช่นเดียวกับการตั้งค่าผู้ใช้และคุณสามารถใช้เทคนิคการคัดลอกวางเดียวกัน มีความแตกต่างเพียงสองประการขอบเขต (ภายในแทนที่จะเป็นแบบสากล) และ settings.json ไฟล์ที่การกำหนดค่าแบบกำหนดเองของคุณจะถูกบันทึกไว้.