Thành thật mà nói. Ai trong chúng ta cũng từng trải qua điều này. Bạn đang tập trung cao độ, code đang tuôn chảy, và rồi... VSCode bắt đầu giật lag. Con trỏ bị khựng, tính năng tự động hoàn thành "đi uống cà phê", và quạt laptop của bạn kêu như thể đang chuẩn bị cất cánh. Thật bực bội, nó phá vỡ sự tập trung của bạn, và thẳng thắn mà nói, đó là một kẻ hủy diệt năng suất khủng khiếp.
Trong một thời gian dài, tôi chỉ chấp nhận điều này như cái giá phải trả khi sử dụng một trình soạn thảo mạnh mẽ, có khả năng mở rộng. Tôi sẽ thở dài, đóng vài tab, và cầu nguyện một phép màu. Cho đến khi tôi quyết định đi sâu vào vấn đề và tối ưu hóa hệ thống của mình một cách có hệ thống. Kết quả? Tôi không chỉ có được một chút tăng tốc nhỏ; tôi đã biến VSCode từ một trình ngốn tài nguyên chậm chạp thành một cỗ máy lập trình tinh gọn, mạnh mẽ, có cảm giác nhanh hơn gần 10 lần.
Hành trình này không chỉ là sao chép cài đặt một cách mù quáng từ một diễn đàn. Đó là về việc hiểu tại sao VSCode lại chậm và áp dụng các bản sửa lỗi một cách có phương pháp.
Và này, trong khi chúng ta đang nói về việc tối ưu hóa quy trình làm việc của nhà phát triển, nếu bạn cũng mệt mỏi với việc phải chuyển đổi giữa Postman, Swagger và các Mock server cho công việc API, bạn nhất định phải xem xét Apidog.
Trong bài viết này, tôi sẽ hướng dẫn bạn qua các cài đặt và chiến lược chính xác mà tôi đã sử dụng. Chúng ta sẽ không chỉ dừng lại ở việc "tắt một hoặc hai tiện ích mở rộng" cơ bản mà sẽ đi sâu vào chi tiết về việc giám sát tệp, tối ưu hóa TypeScript và các yếu tố làm giảm hiệu suất ẩn. Hãy sẵn sàng để giành lại môi trường phát triển của bạn.
Thủ phạm: Tại sao VSCode của bạn lại chậm như vậy?
Trước khi chúng ta bắt đầu áp dụng các bản sửa lỗi, điều quan trọng là phải hiểu chúng ta đang đối mặt với điều gì. Hãy hình dung nó giống như việc chẩn đoán một chiếc ô tô; bạn không thể cứ bắt đầu thay thế các bộ phận một cách ngẫu nhiên. Bạn cần biết điều gì đang gây ra tiếng gõ.
Qua quá trình điều tra, tôi đã xác định ba "kẻ phản diện" chính chịu trách nhiệm cho các vấn đề hiệu suất của VSCode:
- Quá tải tiện ích mở rộng (Extension Overload): Đây chắc chắn là thủ phạm số một. Mỗi tiện ích mở rộng bạn cài đặt giống như một ứng dụng nhỏ chạy bên trong VSCode. Một số hoạt động tốt và nhẹ, nhưng số khác lại là những con quái vật ngốn tài nguyên có thể khiến toàn bộ trình soạn thảo của bạn bị tê liệt. Vấn đề càng trầm trọng hơn với mỗi tiện ích mở rộng mới bạn thêm vào.
- Cơn sốt giám sát tệp (File Watching Frenzy): VSCode có một dịch vụ tích hợp sẵn liên tục theo dõi các tệp dự án của bạn để tìm thay đổi. Đây là tính năng cung cấp sức mạnh cho các chức năng như cập nhật trực tiếp trình khám phá tệp và trạng thái Git trong thanh bên. Tuy nhiên, trong các dự án lớn, đặc biệt là những dự án có các thư mục
node_modules,disthoặcbuildkhổng lồ, trình giám sát tệp này có thể hoạt động quá mức, tiêu thụ lượng CPU và bộ nhớ khổng lồ khi nó cố gắng theo dõi hàng nghìn tệp. - Căng thẳng từ TypeScript & Language Server: Đối với những người trong thế giới TypeScript/JavaScript, language server (cung cấp IntelliSense, kiểm tra lỗi và tái cấu trúc) là một người làm việc kỳ diệu. Nhưng sức mạnh đó phải trả giá. Trên các codebase lớn, việc kiểm tra kiểu và phân tích liên tục có thể là một gánh nặng đáng kể đối với hiệu suất.
Bây giờ chúng ta đã biết kẻ thù, hãy xây dựng kế hoạch chiến đấu của mình. Chúng ta sẽ giải quyết chúng theo thứ tự tác động.
Giai đoạn 1: Thanh lọc tiện ích mở rộng – Đòn bẩy mạnh nhất của bạn
Đây là nơi bạn sẽ thấy sự cải thiện đáng kể nhất. Tôi đã giảm từ 40 tiện ích mở rộng được cài đặt một cách lười biếng xuống còn 20 tiện ích thiết yếu, và sự khác biệt không chỉ có thể đo lường được mà còn rõ rệt.
Bước 1: Xác định các tiện ích ngốn tài nguyên
Đầu tiên, bạn cần xem tiện ích mở rộng nào thực sự đang làm chậm bạn. May mắn thay, VSCode có các công cụ tích hợp tuyệt vời cho việc này.
- Mở Command Palette bằng
Ctrl+Shift+P(hoặcCmd+Shift+Ptrên Mac). - Gõ và chạy
Developer: Show Running Extensions.
Thao tác này sẽ mở một bảng điều khiển hiển thị mọi tiện ích mở rộng đang chạy và, quan trọng nhất, "Thời gian kích hoạt" của chúng. Đây là khoảng thời gian tiện ích mở rộng khởi động. Các tiện ích mở rộng có thời gian kích hoạt cao thường là những tiện ích có tác động lớn nhất đến hiệu suất khởi động của bạn. Lần đầu tiên nhìn thấy danh sách này thực sự đã mở mang tầm mắt tôi.
Bước 2: Cuộc tấn công chính xác bằng Extension Bisect
Điều gì sẽ xảy ra nếu bạn không biết *tiện ích mở rộng nào* đang gây ra vấn đề? Tắt chúng thủ công từng cái một là một cực hình. Hãy khám phá một trong những bí mật được giữ kín nhất của VSCode: **Extension Bisect**.
- Mở Command Palette một lần nữa và chạy
Developer: Start Extension Bisect.
Tính năng tuyệt vời này sử dụng thuật toán tìm kiếm nhị phân. Nó sẽ tắt một nửa số tiện ích mở rộng của bạn và hỏi bạn xem vấn đề còn tồn tại không. Bạn trả lời có hoặc không, và nó sẽ tắt/bật một nửa khác, nhanh chóng khoanh vùng thủ phạm chỉ trong vài bước. Nó giống như một thám tử đang có hệ thống tìm ra kẻ gây rối trong danh sách tiện ích mở rộng của bạn.
Bước 3: Cắt tỉa không khoan nhượng và quản lý không gian làm việc
Khi bạn đã xác định được các tiện ích mở rộng có vấn đề hoặc đơn giản là không sử dụng, đã đến lúc phải không khoan nhượng.
- Tắt toàn cầu: Đối với các tiện ích mở rộng bạn không bao giờ sử dụng, chỉ cần nhấp chuột phải và tắt chúng trên toàn cầu.
- Tắt theo không gian làm việc: Đây là một yếu tố thay đổi cuộc chơi. Bạn không cần Python linter của mình hoạt động trong dự án React của bạn, và ngược lại. Nhấp chuột phải vào một tiện ích mở rộng và chọn "Tắt (Không gian làm việc)". Thao tác này giữ cho tiện ích được bật cho các dự án khác nhưng tắt nó cho dự án hiện tại của bạn, tiết kiệm tài nguyên quý giá.
Hơn nữa, đừng quên các tiện ích mở rộng tích hợp sẵn. Tìm kiếm @builtin trong chế độ xem tiện ích mở rộng. Bạn có thể tìm thấy các tiện ích mặc định cho các ngôn ngữ hoặc framework mà bạn không sử dụng. Tắt chúng cũng có thể mang lại một chút cải thiện hiệu suất.
Kết quả của việc thanh lọc tiện ích mở rộng của tôi
Hãy nói về những con số. Tôi đã đo hiệu suất khởi động VSCode của mình trước và sau đợt thanh lọc tiện ích mở rộng lớn. Kết quả thật đáng kinh ngạc:
| Chỉ số hiệu suất | Trước (40 Tiện ích mở rộng) | Sau (20 Tiện ích mở rộng) | Cải thiện |
|---|---|---|---|
| extensions registered | 2104 ms | 1548 ms | Nhanh hơn 26% |
| workbench ready | 1130 ms | 961 ms | Nhanh hơn 15% |
| register extensions & spawn extension host | 780 ms | 495 ms | Nhanh hơn 37% |
Trình soạn thảo của tôi không chỉ khởi động nhanh hơn; nó còn cảm thấy phản hồi tốt hơn về tổng thể. Bước đơn lẻ này là hành động mang lại lợi tức đầu tư cao nhất mà bạn có thể thực hiện.
Giai đoạn 2: Thuần hóa trình giám sát hệ thống tệp
Sau khi xử lý các tiện ích mở rộng, thành công lớn tiếp theo đến từ việc kiểm soát trình giám sát tệp không ngừng nghỉ của VSCode. Dịch vụ này rất cần thiết, nhưng nó không cần phải theo dõi mọi tệp trong dự án của bạn.
Cài đặt quyền năng files.watcherExclude
Cài đặt này là người bạn tốt nhất của bạn. Nó cho VSCode biết ngừng lãng phí tài nguyên để theo dõi các thư mục thường xuyên thay đổi nhưng không ảnh hưởng đến công việc phát triển cốt lõi của bạn.
Đây là cấu hình tôi đã đưa vào settings.json của mình, tạo ra sự khác biệt lớn về mức sử dụng CPU và bộ nhớ:
json
{
"files.watcherExclude": {
".git/objects": true,
".git/subtree-cache": true,
"node_modules/*": true,
"dist": true,
"build": true,
".vscode": true,
"coverage": true,
"__generated__": true,
"tmp": true,
".cache": true
}
}
Cái này làm gì: Nó đặc biệt bỏ qua tất cả sự hỗn loạn bên trong node_modules, các đầu ra bản dựng của bạn (dist, build), các thành phần nội bộ của Git và các thư mục bộ nhớ cache khác. Các thư mục này được cập nhật bởi các trình quản lý gói và công cụ xây dựng, chứ không phải trực tiếp bởi bạn, vì vậy không cần VSCode phải tự làm kiệt sức khi theo dõi chúng.
Dọn dẹp bổ sung: files.exclude và search.exclude
Trong khi bạn đang thực hiện, hãy dọn dẹp thanh bên của bạn và tăng tốc tìm kiếm.
files.exclude: Ẩn các tệp và thư mục khỏi thanh bên trình khám phá. Điều này không tiết kiệm nhiều hiệu suất, nhưng nó làm cho cây dự án của bạn sạch sẽ hơn nhiều.search.exclude: Cái này *thực sự* cải thiện hiệu suất. Nó ngăn VSCode lập chỉ mục và tìm kiếm qua hàng nghìn tệp không liên quan trongnode_modulesvà các thư mục xây dựng khác, làm cho tính năng tìm kiếm cực kỳ nhanh chóng.
Cấu hình của tôi:
json
{
"files.exclude": {
".git": true,
".DS_Store": true,
"node_modules": true,
"__pycache__": true,
".next": true,
"dist": true,
"build": true
},
"search.exclude": {
"node_modules": true,
"bower_components": true,
".code-search": true,
"dist": true,
"build": true,
".next": true,
"coverage": true
}
}
Giai đoạn 3: Tối ưu hóa công cụ TypeScript của bạn
Nếu bạn là nhà phát triển TypeScript, language server có thể là một yếu tố ngốn tài nguyên thầm lặng. Dưới đây là cách để làm cho nó hiệu quả hơn.
Tăng cường sức mạnh cho tsconfig.json của bạn
Nơi đầu tiên cần xem xét là tệp tsconfig.json của dự án bạn. Cấu hình đúng ở đây giúp trình biên dịch TypeScript (và do đó, VSCode) tránh được những công việc không cần thiết.
json
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/"
],
"exclude": [
"node_modules",
"dist",
"build",
".spec.ts",
".test.ts",
"coverage"
]
}
Tùy chọn skipLibCheck: true đặc biệt quan trọng. Nó bỏ qua việc kiểm tra kiểu của các tệp khai báo trong node_modules, điều này có thể giảm đáng kể thời gian biên dịch và phân tích.
Cài đặt TypeScript dành riêng cho VSCode
Tiếp theo, thêm các cài đặt tập trung vào hiệu suất này vào tệp settings.json của VSCode của bạn:
json
{
"typescript.tsserver.log": "off",
"typescript.disableAutomaticTypeAcquisition": true,
"typescript.tsserver.experimental.enableProjectDiagnostics": false
}
"typescript.tsserver.log": "off": Dừng việc xuất nhật ký nội bộ, tiết kiệm I/O đĩa."typescript.disableAutomaticTypeAcquisition": true: Ngăn VSCode tự động cố gắng tải xuống định nghĩa kiểu chonode_modulescủa bạn, một quá trình có thể chậm và không thể đoán trước."typescript.tsserver.experimental.enableProjectDiagnostics": false: Giảm tải chẩn đoán, điều này hữu ích trong các dự án rất lớn.
Lựa chọn hạt nhân: Xóa bộ nhớ cache của TypeScript
Đôi khi, bộ nhớ cache của TypeScript language server có thể bị hỏng hoặc phình to. Xóa nó có thể giải quyết các vấn đề hiệu suất kỳ lạ và mức sử dụng bộ nhớ cao.
- Windows:
C:\\Users\\<Tên người dùng của bạn>\\AppData\\Local\\Microsoft\\TypeScript - macOS:
~/Library/Caches/Microsoft/TypeScript - Linux:
~/.cache/typescript
Một lời cảnh báo: Đây không phải là một quy trình chính thức, vì vậy hãy thực hiện nó với rủi ro của riêng bạn. Tuy nhiên, theo kinh nghiệm của tôi, việc xóa các thư mục này là an toàn và thường có tác dụng "quét sạch mạng nhện", làm cho mọi thứ trở nên nhanh nhẹn hơn.
Giai đoạn 4: Tinh gọn giao diện người dùng
Giao diện người dùng của VSCode rất phong phú tính năng, nhưng bạn không cần tất cả những pixel đó được hiển thị. Vô hiệu hóa các yếu tố UI mà bạn không sử dụng có thể giải phóng tài nguyên hiển thị, làm cho trình soạn thảo cảm thấy mượt mà hơn.
Dưới đây là các tối ưu hóa UI mà tôi ưa thích:
json
{
"editor.minimap.enabled": false,
"breadcrumbs.enabled": false,
"editor.codeLens": false,
"workbench.activityBar.visible": false,
"window.menuBarVisibility": "toggle"
}
Tôi thấy minimap đặc biệt ngốn tài nguyên đối với các tệp lớn hơn. Tắt nó là một chiến thắng ngay lập tức. Tương tự, CodeLens (những liên kết có thể hành động như tham chiếu và triển khai phía trên các hàm của bạn) có thể tốn kém để tính toán và hiển thị.
Giai đoạn 5: Tinh chỉnh các hành vi tự động
Tự động hóa rất tuyệt vời cho đến khi nó cản trở.
Tự động lưu và định dạng
Tính năng tự động lưu và định dạng quá mức có thể gây ra hiện tượng giật lag nhỏ khi bạn gõ. Tôi đã tìm thấy một điểm tối ưu với các cài đặt này:
json
{
"files.autoSave": "onFocusChange",
"files.autoSaveDelay": 1000,
"editor.formatOnSave": true,
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
Điều này chỉ lưu khi tôi chuyển khỏi tệp hiện tại và chỉ định dạng khi lưu chứ không phải sau mỗi lần gõ phím hoặc dán. Điều này ngăn trình định dạng liên tục chạy trong nền khi tôi đang cố gắng suy nghĩ và gõ.
Tích hợp Git
Tích hợp Git của VSCode rất tiện lợi, nhưng việc thăm dò liên tục của nó có thể là một gánh nặng.
json
{
"git.enabled": true,
"git.autorefresh": false,
"git.autofetch": false,
"git.decorations.enabled": false
}
Điều này giữ cho Git được bật nhưng tắt tính năng tự động làm mới và tìm nạp. Bạn luôn có thể tìm nạp và làm mới thủ công khi cần. Vô hiệu hóa các trang trí (các dòng màu trong thanh bên) cũng tiết kiệm một chút chi phí hiển thị.
Tổng hợp tất cả: Tệp settings.json tối ưu
Được rồi, hãy tổng hợp mọi thứ. Đây là tệp settings.json hoàn chỉnh, có chú thích, tạo nên xương sống cho trải nghiệm VSCode nhanh hơn 10 lần của tôi. Đây là "một lần sao chép-dán để thống trị tất cả."
json
{
// ===== LOẠI TRỪ GIÁM SÁT TỆP (Tiết kiệm CPU & Bộ nhớ) =====
"files.watcherExclude": {
".git/objects": true,
".git/subtree-cache": true,
"node_modules/*": true,
"dist": true,
"build": true,
".vscode": true,
"coverage": true,
"__generated__": true
},
// ===== DỌN DẸP THANH BÊN TRÌNH KHÁM PHÁ =====
"files.exclude": {
".git": true,
".DS_Store": true,
"node_modules": true,
"dist": true,
"build": true
},
// ===== TĂNG CƯỜNG HIỆU SUẤT TÌM KIẾM =====
"search.exclude": {
"node_modules": true,
"dist": true,
"build": true,
".next": true,
"coverage": true
},
// ===== TỐI ƯU HÓA TYPESCRIPT =====
"typescript.tsserver.log": "off",
"typescript.disableAutomaticTypeAcquisition": true,
// ===== CHẾ ĐỘ UI NHẸ NHÀNG =====
"editor.minimap.enabled": false,
"breadcrumbs.enabled": false,
"editor.codeLens": false,
// ===== TỰ ĐỘNG LƯU & ĐỊNH DẠNG THÔNG MINH =====
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.formatOnType": false,
"editor.formatOnPaste": false,
// ===== TÍCH HỢP GIT HIỆU QUẢ =====
"git.autorefresh": false,
"git.autofetch": false,
"git.decorations.enabled": false,
// ===== XỬ LÝ CÁC TỆP LỚN =====
"files.maxMemoryForLargeFilesMB": 4096
}
Chẩn đoán nâng cao và suy nghĩ cuối cùng
Nếu bạn đã áp dụng tất cả các cài đặt này và vẫn tò mò, VSCode có thêm một công cụ mạnh mẽ khác.
- Chạy
Developer: Startup Performancetừ Command Palette.
Điều này cung cấp cho bạn một bản phân tích chi tiết, từng mili giây về những gì đang xảy ra trong quá trình khởi động của VSCode. Nó rất tuyệt vời để xác định bất kỳ nút thắt cổ chai cứng đầu cuối cùng nào.
Một cách tiếp cận toàn diện về hiệu suất
Tối ưu hóa VSCode là một bước tuyệt vời, nhưng hãy nhớ rằng một môi trường phát triển chậm có thể có nhiều nguyên nhân. Giống như cách chúng ta đã tinh gọn trình soạn thảo mã của mình, việc sử dụng các công cụ tinh gọn các phần khác trong quy trình làm việc của chúng ta cũng rất đáng giá. Đây là lý do tại sao tôi đã tích hợp Apidog vào quy trình của mình. Quản lý API có thể tốn rất nhiều thời gian nếu các công cụ của bạn chậm hoặc không được kết nối. Có một giải pháp nhanh chóng, tất cả trong một để thiết kế, gỡ lỗi và kiểm thử API bổ sung hoàn hảo cho một môi trường mã hóa hiệu suất cao, giữ cho toàn bộ vòng lặp phát triển chặt chẽ và hiệu quả.
Tóm lại, một VSCode nhanh không phải là phép màu. Đó là về sự chủ động. Đó là về việc hiểu rõ những đánh đổi của các công cụ và tiện ích mở rộng chúng ta sử dụng và đưa ra những lựa chọn có ý thức. Bằng cách kiểm soát các tiện ích mở rộng của bạn, thuần hóa trình giám sát tệp, tối ưu hóa TypeScript và tinh gọn giao diện người dùng, bạn hoàn toàn có thể đạt được cảm giác "nhanh hơn 10 lần" đó.
Vậy bạn còn chờ gì nữa? Mở cài đặt VSCode của bạn và bắt đầu hành trình tối ưu hóa của riêng bạn. CPU của bạn (và sự tỉnh táo của bạn) sẽ cảm ơn bạn.