Visual Studio Code phần mềm soạn thảo code mã nguồn mở được phát triển bởi Microsoft, sử dụng để xây dựng các website, ứng dụng hoàn toàn miễn phí.
Extension
Một số extension nên dùng khi sử dủng dụng vs code vào trong dự án1. CSS Peek
CSS Peek giúp di chuyển nhanh chóng đến nơi định nghĩa các class và id của css,. nhấp chuột phải vào một selector và chọn “Go to Definition”. Peek sẽ nhanh chóng chuyển bạn đến đúng file, vị trí mà class và id đó được định nghĩa.
2. Open-In-Browser
Tùy chọn này sẽ mở khi click chuột vào file, ngoài Default browser cũng có thể mở bất kỳ Browser nào như IE, Chrome, Firefox,…
3. Code Spell Checker
Code Spell Checker giúp kiểm tra chính tả trong mã nguồn được sử dụng để kiểm tra chính tả trong nhiều ngôn ngữ lập trình, bao gồm: C/C++, C#, Java, JavaScript, Python,…
Code Spell Checker có những tính năng:
- Kiểm tra chính tả của toàn bộ project hoặc một phần nào đó
- Hỗ trợ thêm nhiều ngôn ngữ khác nhau để kiểm tra chính tả.
- Tự động phát hiện các từ khóa trong các ngôn ngữ lập trình khác nhau và loại bỏ chúng khỏi kiểm tra chính tả.
- Đề xuất các từ đúng khi bạn gõ sai chính tả và cho phép bạn sửa nhanh bằng cách nhấn Ctrl + . hoặc nhấn vào biểu tượng bóng đèn ở lề trái.
- Cho phép bạn thêm từ vào từ điển của extension.
4. Rainbow Brackets
Extension này sẽ tự động tô màu vào những cặp dấu ngoặc để coder dễ dàng xác định được mức độ lồng của một đoạn mã.
5. JavaScript (ES6) Code Snippets
Giúp bạn tiết kiệm thời gian khi viết mã JavaScript, Extension này cung cấp sẵn các cú pháp để tạo nhanh các hàm hoặc thuộc tính phổ biến. Bên cạnh đó, extension còn hỗ trợ nhiều ngôn ngữ khác nhau như JavaScript React, HTML, TypeScript, TypeScript React, Vue…
6. Auto Rename Tag
Extension này giúp bạn tự động đổi tên các cặp thẻ ở trong XML và HTML, khi người dùng thay đổi tên thẻ mở thì thẻ đóng tương ứng cũng sẽ được thay đổi theo một cách tự động
7. GitHub Pull Requests
Extension này cho phép bạn xem xét và quản lý GitHub pull requests và issues trong Visual Studio Code.
8. SFTP(Natizyskunk)
Cài bản extension của Natizyskunk
9. Eslint
Hỗ trợ tìm và fixbug nhanh code javascript
Tối ưu
Để tối ưu tìm kiếm trong code nên set cấu hình bỏ qua tìm ở các thư mục lớn hoặc cache
Mở VS Code trong project của bạn.
Nhấn Ctrl + Shift + P (Windows) hoặc Cmd + Shift + P (Mac)
Gõ:
Preferences: Open Workspace Settings (JSON)
VS Code sẽ tự động:
Tạo thư mục .vscode (nếu chưa có).
Mở và tạo mới nếu chưa tồn tại file settings.json.
Bên trong tạo file settings.json.
Dán cấu hình bạn muốn vào, ví dụ:
{// 🔍 Giảm tải khi VS Code index file"files.watcherExclude": {"**/node_modules/**": true,"**/vendor/**": true,"**/storage/**": true,"**/public/**": true,"**/build/**": true,"**/dist/**": true,"**/.git/**": true},"search.exclude": {"**/node_modules": true,"**/vendor": true,"**/storage": true,"**/public": true,"**/build": true,"**/dist": true,"**/.git": true},// ⚙️ Giảm tải cho IntelliSense"typescript.disableAutomaticTypeAcquisition": true,"javascript.suggest.autoImports": true,"typescript.tsserver.maxTsServerMemory": 4096,// 🧠 Tối ưu cho PHP (Laravel, CodeIgniter)"php.suggest.basic": false,"intelephense.files.exclude": ["**/node_modules/**","**/vendor/**/vendor/**","**/storage/**","**/.git/**"],"intelephense.environment.includePaths": ["app","config","routes","resources"],// 🧹 Tối ưu ESLint / Prettier (Node.js)"eslint.workingDirectories": [{"mode": "auto"}],"eslint.validate": ["javascript","typescript","vue","html","php"],"prettier.requireConfig": true,// ⚡ Tối ưu trải nghiệm mở file"files.hotExit": "onExitAndWindowClose","window.restoreWindows": "all",// 🧭 Giảm noise khi mở project"explorer.excludeGitIgnore": true,"explorer.compactFolders": false,// 🔧 Cấu hình chung"editor.quickSuggestions": {"strings": true},"editor.tabSize": 2,"editor.formatOnSave": true,"editor.minimap.enabled": false,// 🧩 Ngăn extension gây nặng"git.enabled": true,"git.autorefresh": false}
Nhận xét
Đăng nhận xét