Trang chủ » Thiết kế web » Cách tùy chỉnh mã Visual Studio

    Cách tùy chỉnh mã Visual Studio

    Visual Studio Code, trình chỉnh sửa mã nguồn mở mới của Microsoft cung cấp cho các nhà phát triển nhiều tính năng tuyệt vời đáng kể tạo điều kiện cho quá trình chỉnh sửa mã nguồn. Bên cạnh đó, Visual Studio Code cũng đảm bảo người dùng sẽ không cảm thấy nhàm chán khi họ làm việc với nó, vì nó cho phép họ tùy chỉnh một số phần của sự xuất hiện của nó, chẳng hạn như màu sắc, phông chữ, khoảng cách và định dạng văn bản, giống như nhiều chức năng, chẳng hạn như xơ vảiquy tắc hợp lệ.

    Trong bài viết này, đầu tiên chúng ta sẽ xem xét Làm cách nào để thay đổi giao diện của không gian làm việc Visual Studio Code, sau đó tôi sẽ chỉ cho bạn cách tùy chỉnh các cài đặt mặc định với sự trợ giúp của hai JSON-định dạng tập tin cấu hình.

    Cách đặt chủ đề màu trên mã VS

    Visual Studio Code cho phép bạn đặt chủ đề màu tùy chỉnh cho biên tập viên của bạn.

    Để đưa một chủ đề được tạo sẵn vào sử dụng, nhấp vào Tệp> Tùy chọn> Chủ đề màu menu trong thanh menu trên cùng. Khi bạn đánh “Đi vào”, Bảng lệnh bật lên và hiển thị danh sách thả xuống của các chủ đề bạn có thể chọn từ.

    Bạn có thể đạt được hiệu quả tương tự nếu bạn nhấn F1 để mở Bảng lệnh và nhập Tùy chọn: Chủ đề màu lệnh vào trường đầu vào.

    Khi bạn cuộn qua các tùy chọn trong danh sách thả xuống, diện mạo của không gian làm việc thay đổi theo thời gian thực, để bạn có thể nhanh chóng xem chủ đề nào phù hợp với nhu cầu của bạn nhất.

    Tôi chooe “Độ tương phản cao” chủ đề màu sắc, như đôi mắt của tôi không phải là tốt nhất. Đây là quan điểm của tôi.

    Cách cài đặt một Theme từ VS Code Marketplace

    Nếu bạn không thích bất kỳ chủ đề màu nào mà VS Code cung cấp theo mặc định, bạn có thể tải xuống nhiều chủ đề khác từ Thị trường mã VS.

    Tại đây bạn có thể xem các chủ đề mà Thị trường hiện có. Nếu bạn muốn cài đặt một chủ đề từ Thị trường, hãy nhấn F1 ngay bên trong trình soạn thảo Mã VS của bạn để mở Bảng màu Lệnh, sau đó nhập cài đặt máy lẻ lệnh vào trường đầu vào, cuối cùng chọn Tiện ích mở rộng: Cài đặt tiện ích mở rộng tùy chọn từ danh sách bật lên.

    Khi bạn bấm vào tùy chọn này, một phiên bản mới của Command Palette sẽ bật lên. Nhập "chủ đề cài đặt ext" lệnh vào trường đầu vào mới, và bạn sẽ có được một danh sách tất cả các chủ đề có sẵn từ Thị trường Mã VS.

    Tôi chọn chủ đề gọi là “Vật liệu chủ đề Kit”, và cài đặt nó bằng cách nhấp vào nó. Để có chủ đề mới trong danh sách Chủ đề màu, ở cùng nơi có các chủ đề mặc định khác, bạn cần phải khởi động lại mã VS. Sau khi khởi động lại, chủ đề mới xuất hiện trong danh sách chủ đề và bạn có thể đặt nó từ Bảng lệnh.

    Với Chủ đề Vật liệu mới, trình soạn thảo của tôi bây giờ trông như thế này:

    Bạn có thể quay lại chủ đề trước đó (như tôi đã làm, vì tôi vẫn thích chủ đề đó) hoặc bạn có thể chơi xung quanh một số chủ đề khác để xem cái nào phù hợp nhất với bạn.

    Nếu bạn muốn, bạn cũng có thể tạo chủ đề tùy chỉnh của bạn, và xuất bản nó trên VS Code Marketplace bằng cách sử dụng công cụ quản lý mở rộng vsce.

    Thay đổi cài đặt người dùng và không gian làm việc

    Mã VS không chỉ cho phép bạn đặt chủ đề tùy chỉnh, nhưng bạn cũng có thể cấu hình nhiều cài đặt khác, chẳng hạn như quy tắc định dạng, sử dụng các tính năng khác nhau, báo cáo sự cố, cài đặt HTTP, liên kết tệp, quy tắc nhuộm và hơn thế nữa.

    Bạn có thể làm điều này bằng cách chỉnh sửa hai tệp cấu hình, cả hai đều ở định dạng JSON. Đừng lo lắng, bạn không cần phải là một người chuyên nghiệp, vì Mã VS cung cấp một cách khá đơn giản và trực quan để nhanh chóng thêm các tùy chỉnh của bạn.

    Đầu tiên, hãy xem sự khác biệt giữa hai tệp cấu hình. Mã VS có hai phạm vi (toàn cầuđịa phương) cho các cài đặt, do đó hai tệp riêng biệt:

    1. toàn cầu settings.json, trong đó các quy tắc cấu hình là hợp lệ cho từng không gian làm việc
    2. không gian làm việc liên quan .vscode / settings.json, điều đó chỉ liên quan đến một không gian làm việc cá nhân

    Các toàn cầu settings.json có thể tìm thấy tệp trong thư mục nơi hệ điều hành của bạn lưu trữ mọi tệp cấu hình liên quan đến ứng dụng khác, tương ứng:

    • trên Windows: % APPDATA% \ Code \ User \ settings.json
    • trên Linux: $ HOME / .config / Code / Người dùng / settings.json
    • trên máy Mac $ HOME / Thư viện / Hỗ trợ ứng dụng / Mã / Người dùng / settings.json

    Các liên quan đến không gian làm việc settings.json tập tin được lưu trữ trong thư mục của dự án hiện tại của bạn. Theo mặc định, tệp này không tồn tại, nhưng ngay sau khi bạn thêm Cài đặt không gian làm việc tùy chỉnh, Mã VS sẽ tạo một .vscode / settings.json tập tin cùng một lúc và đặt các cấu hình không gian làm việc tùy chỉnh vào đó.

    Vậy khi nào bạn sử dụng settings.json các tập tin?

    Nếu bạn muốn Mã VS sử dụng quy tắc cấu hình tùy chỉnh của mình trong tất cả các dự án của bạn, đưa chúng vào toàn cầu settings.json tập tin.

    Nếu bạn muốn cài đặt của mình chỉ hợp lệ trong dự án hiện tại, đặt chúng vào không gian làm việc liên quan settings.json tập tin.

    Cài đặt không gian làm việc ghi đè cài đặt chung, vì vậy hãy cẩn thận.

    Cài đặt toàn cầu được gọi “Thiết lập người dùng” trong Mã VS. Mở chúng bằng cách nhấp vào Tệp> Tùy chọn> Cài đặt người dùng menu hoặc bằng cách bắt đầu nhập biểu thức “Thiết lập người dùng” vào Bảng lệnh (mở nó bằng F1).

    Mã VS mở hai khung cạnh nhau: bên trái chứa tất cả các tùy chọn có thể định cấu hình và bên phải hiển thị toàn cục settings.json tập tin. Bạn cần đặt quy tắc cấu hình tùy chỉnh của mình vào tệp này.

    Như bạn có thể thấy, bạn không cần phải làm gì khác, chỉ cần sao chép-dán các cài đặt bạn muốn thay đổi từ bên trái sang bên phải và thêm các giá trị đã sửa đổi.

    Chúng ta hãy xem một ví dụ ngắn (nhưng bạn có thể thực hiện bất kỳ sửa đổi nào khác theo nhu cầu cá nhân của bạn). Tôi sẽ thay đổi họ phông chữ, giảm độ dài của một chuyển hướng từ bốn khoảng trống mặc định thành hai, giảm số lượng tệp làm việc tối đa từ chín xuống còn năm và thay đổi một trong các quy tắc nhuộm CSS liên quan đến các kiểu trùng lặp từ "bỏ qua" đến "cảnh báo".

    Sau khi sao chép, dán toàn cầu của tôi settings.json tập tin trông như thế này:

     // Đặt cài đặt của bạn trong tệp này để ghi đè cài đặt mặc định "Editor.fontF Family": "Courier New", "Editor.tabSize": 2, "explorer. : "cảnh báo" 

    Sau khi lưu sửa đổi settings.json tệp, giao diện trình chỉnh sửa của tôi thay đổi cùng một lúc (trên ảnh chụp màn hình bên dưới chỉ hiển thị thay đổi của họ phông chữ):

    Bạn có thể thay đổi Cài đặt Workspace tương tự. Bây giờ bạn cần phải bấm vào Tệp> Tùy chọn> Cài đặt không gian làm việc trong thanh menu trên cùng để truy cập không gian làm việc liên quan .vscode / settings.json tập tin.

    Cài đặt không gian làm việc có chính xác các tùy chọn cấu hình giống như Cài đặt người dùng và bạn có thể sử dụng cùng một kỹ thuật dán sao chép. Chỉ có hai sự khác biệt, phạm vi (cục bộ thay vì toàn cầu) và settings.json tập tin mà cấu hình tùy chỉnh của bạn sẽ được lưu.