{"id":26090495,"url":"https://github.com/datvt243/vscode_settings","last_synced_at":"2026-06-10T07:31:26.490Z","repository":{"id":280238166,"uuid":"941383640","full_name":"datvt243/vscode_settings","owner":"datvt243","description":"Cài đặt cá nhân hóa VSCode","archived":false,"fork":false,"pushed_at":"2026-05-07T11:24:12.000Z","size":11211,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-26T20:35:07.266Z","etag":null,"topics":["vim","vscode-vim","whichkey"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datvt243.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-02T06:38:31.000Z","updated_at":"2026-04-11T11:35:33.000Z","dependencies_parsed_at":"2025-04-02T20:20:23.338Z","dependency_job_id":"52226e17-1d63-4ef2-82c8-947df9f86b50","html_url":"https://github.com/datvt243/vscode_settings","commit_stats":null,"previous_names":["datvt243/vscode_vim_binding","datvt243/vscode_settings"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/datvt243/vscode_settings","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datvt243%2Fvscode_settings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datvt243%2Fvscode_settings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datvt243%2Fvscode_settings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datvt243%2Fvscode_settings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datvt243","download_url":"https://codeload.github.com/datvt243/vscode_settings/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datvt243%2Fvscode_settings/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34142637,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vim","vscode-vim","whichkey"],"created_at":"2025-03-09T09:34:23.416Z","updated_at":"2026-06-10T07:31:26.464Z","avatar_url":"https://github.com/datvt243.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cài đặt cá nhân hóa VSCode\n\n💡 **Tip**: Kết hợp các Extensions giúp tối ưu trải nghiệm làm việc trong VSCode! 🚀\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/src/images/01.png\" alt=\"Which Key\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n---\n\n## Settings \u0026 Key Bindings\n\n#### 1. Cài đặt giao diện\n\n| Setting | Value                 |\n| ------- | --------------------- |\n| Theme   | Aura Dracula Spirit |\n| File Icon    | `material-icon-theme` |\n| Product Icon | `developer-icons` |\n| Font family | FiraCode Nerd Font Mono |\n\n#### 2. Cấu hình Settings (settings.json)\n\nMở `settings.json`: `Preferences: Open User Settings (JSON)`\n\n#### 3. Cấu hình Key Bindings (keybinding.json)\n\nMở `keybinding.json`: `Preferences: Open Keyboard Shortcuts`\n\n---\n\n# Extensions\n\n[1. VIM](#1-vim-extension)\n\n[2. Bookmarks](#2-bookmarks)\n\n[3. Custom CSS and JS Loader](#3-custom-css-and-js-loader)\n\n[4. VSCode Animations](#4-vscode-animations)\n\n[5. Which Key ](#5-which-key)\n\n[6. Fuzzy Search](#6-fuzzy-search)\n\n[7. VSCode Harpoon](#7-vscode-harpoon)\n\n[8. Better Comments](#8-better-comments)\n\n[9. Multi-Command](#9-multi-command)\n\n[10. Command Variable](#10-command-variable)\n\n[11. CodeSnap](#11-codesnap)\n\n[12. Caps Lock State](#12-caps-lock-state)\n\n[13. Peacock](#13-peacock)\n\n[14. Project Manager](#14-project-manager)\n\n[15. Find It Faster](#15-find-it-faster)\n\n## 1. Vim Extension\n\n**Mô tả**: Mang lại trải nghiệm chỉnh sửa văn bản theo phong cách Vim ngay trong VSCode.\n\n🔗 [Vim Extension](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)\n\n🔗 [Vim Cheatsheet](https://marketplace.visualstudio.com/items?itemName=AndenetAlexander.vim-cheatsheet): Hướng dẫn các motion cơ bản của VIM\n\n**Plugins có sẵn** [🔗](https://github.com/VSCodeVim/Vim?tab=readme-ov-file#-emulated-plugins)\n- vim-airline (Thay đổi màu statusBar theo mode)\n- vim-easymotion (Di chuyển nhanh)\n- vim-surround (Thêm xóa và thay đổi `'`, `\"`, `(` ... )\n- vim-commentary (comment code)\n- vim-indent-object (thao tác với đối tượng object)\n- vim-sneak (di chuyển nhanh thông qua 2 kí tự)\n\n**Cài đặt (settings.json)**\n\n```json\n\n// hiển thị số dòng theo cách tương đối - dễ dàng di chuyển với vim \n\"editor.lineNumbers\": \"relative\",\n\n// Vim settings\n\"vim.leader\": \"\u003cSpace\u003e\",\n\"vim.normalModeKeyBindingsNonRecursive\": [],\n\"vim.visualModeKeyBindings\": [],\n\"vim.insertModeKeyBindings\": [],\n\"vim.handleKeys\": {},\n\"vim.cursorStylePerMode\": {\n  \"normal\": \"block\",\n  \"insert\": \"line\",\n  \"visual\": \"block\"\n}\n\"...\"\n\n// To improve performance\n\"extensions.experimental.affinity\": {\n  \"vscodevim.vim\": 1\n},\n```\n\nNếu xài [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock), setting sau giúp tránh việc ảnh hưởng đến màu sắc thanh statusBar (khi chuyển mode)\n\n```json\n// tắt ảnh hưởng đến StatusBar\n\"peacock.affectStatusBar\": false\n```\n\n**Motions**\n\nDi chuyển\n\n| Command  | Description |\n| -------- | ---------------------------------- |\n| `:ju[mps]` | The jump list |\n| `g;` | Quay lại vị trí chỉnh sửa gần nhất |\n| `g,` | Tiến đến vị trí chỉnh sửa sau đó |\n| `''` | Quay lại dòng trước đó |\n| ` `` ` | Quay lại vị trí con trỏ trước đó |\n\nSearch\n\n| Command  | Description |\n| -------- | ---------------------------------- |\n| `*` | Search từ tại vị trí con trỏ (Tìm về trước) |\n| `#` | Search từ tại vị trí con trỏ (Tìm về sau) |\n| `g*` | Giống `*` (Tìm khớp 1 phần) |\n| `g#` | Giống `#` (Tìm khớp 1 phần) |\n\n## 2. Bookmarks\n**Mô tả**: Giúp bạn dễ dàng đánh dấu các dòng hoặc đoạn mã quan trọng trong code, giúp quay lại nhanh chóng trong lần làm việc tiếp theo.\n\n🔗 [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)\n\n**Cài đặt (settings.json) cho VIM**\n```json\n\"vim.normalModeKeyBindingsNonRecursive\": [\n  // #Bookmarks - Extension Bookmarks\n  { \"before\": [\"m\", \"t\"], \"commands\": [\"bookmarks.toggle\"] },\n  { \"before\": [\"m\", \"e\"], \"commands\": [\"bookmarks.toggleLabeled\"] },\n  { \"before\": [\"m\", \"n\"], \"commands\": [\"bookmarks.jumpToNext\"] },\n  { \"before\": [\"m\", \"p\"], \"commands\": [\"bookmarks.jumpToPrevious\"] },\n  { \"before\": [\"m\", \"l\"], \"commands\": [\"bookmarks.list\"] },\n  { \"before\": [\"m\", \"C\"], \"commands\": [\"bookmarks.clear\"] },\n  { \"before\": [\"m\", \"L\"], \"commands\": [\"bookmarks.listFromAllFiles\"] },\n]\n```\n\n## 3. Custom CSS and JS Loader\n\n**Mô tả**: Cho phép tùy chỉnh giao diện VSCode bằng cách nạp các file CSS và JavaScript bên ngoài.\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/src/images/02.png\" alt=\"Which Key\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n🔗 [Custom CSS \u0026 JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css)\n\n**Cài đặt (settings.json)**\n\nDùng 2 file `js` và `css`\n - `vscode-script.js`\n - `vscode-styles.css`\n\n--- Mac\n\n```json\n\"vscode_custom_css.imports\": [\n  \"file:///Users/_user/vscode-custom/vscode-script.js\",\n  \"file:///Users/_user/vscode-custom/vscode-styles.css\",\n  \"file:///Users/_user/.vscode/extensions/brandonkirbyson.vscode-animations-2.0.7/dist/updateHandler.js\"\n]\n```\n--- Win\n\n```json\n\"vscode_custom_css.imports\": [\n  \"file:///C:/Users/_user/Documents/vscode-settings/vscode-script.js\",\n  \"file:///C:/Users/_user/Documents/vscode-settings/vscode-styles.css\",\n  \"file:///C:/Users/_user/.vscode/extensions/brandonkirbyson.vscode-animations-2.0.7/dist/updateHandler.js\"\n]\n```\n\n\n## 4. VSCode Animations\n\n**Mô tả**: Thêm hiệu ứng động cho các thao tác trong VSCode.\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/BrandonKirbyson/VSCode-Animations/raw/HEAD/static/gifs/Demo.gif\"\u003e\n\u003c/p\u003e\n\n🔗 [VSCode Animations](https://marketplace.visualstudio.com/items?itemName=brandonkirbyson.vscode-animations)\n\n\n## 5. Which Key\n\n**Mô tả**: Hiển thị các tổ hợp phím có sẵn khi nhấn `\\`.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/src/images/whichkey.png\" alt=\"Which Key\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n🔗 [Which Key](https://marketplace.visualstudio.com/items?itemName=VSpaceCode.whichkey)\n\n**settings.json (cho VIM)**\n\n```json\n\"vim.normalModeKeyBindingsNonRecursive\": [\n  { \"before\": [\"\\\\\"], \"commands\": [\"whichkey.show\"] },\n],\n\"vim.visualModeKeyBindingsNonRecursive\": [\n  { \"before\": [\"\\\\\"], \"commands\": [\"whichkey.show\"] },\n]\n\"...\"\n```\n\n**keybinding.json**\n```\n{\n  \"key\": \"alt+\\\",\n  \"command\": \"whichkey.show\",\n  \"when\": \"editorTextFocus\"\n},\n```\n\n\n## 6. Fuzzy Search\n\n**Mô tả**: Hỗ trợ tìm kiếm nhanh trong VSCode mà không cần khớp chính xác từ khóa.\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/src/images/fuzzysearch.png\" alt=\"Which Key\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n\n🔗 [Fuzzy Search](https://marketplace.visualstudio.com/items?itemName=jacobdufault.fuzzy-search)\n\n**Cài đặt (settings.json) cho VIM**\n\nẤn `/` để search với fuzzy\n```json\n\"vim.normalModeKeyBindingsNonRecursive\": [\n  { \"before\": [\"/\"], \"commands\": [\"fuzzySearch.activeTextEditor\"] },\n]\n```\n\n\n## 7. VSCode Harpoon\n\n**Mô tả**: Hỗ trợ ghi nhớ (bookmark) các file đang làm việc để chuyển đổi nhanh chóng giữa chúng.\n\n🔗 [VSCode Harpoon](https://marketplace.visualstudio.com/items?itemName=ThePrimeagen.harpoon)\n\n**Cài đặt (settings.json) cho VIM**\n```json\n\"vim.normalModeKeyBindingsNonRecursive\": [\n  { \"before\": [\"\u003cleader\u003e\", \"h\", \"p\"], \"commands\": [\"vscode-harpoon.editorQuickPick\"] },\n  { \"before\": [\"\u003cleader\u003e\", \"h\", \"a\"], \"commands\": [\"vscode-harpoon.addEditor\"] },\n  { \"before\": [\"\u003cleader\u003e\", \"h\", \"e\"], \"commands\": [\"vscode-harpoon.editEditors\"] },\n  { \"before\": [\"\u003cleader\u003e\", \"h\", \"e\"], \"commands\": [\"vscode-harpoon.editEditors\"] },\n]\n```\n\n\n## 8. Better Comments\n\n**Mô tả**: Giúp làm nổi bật các bình luận trong code bằng màu sắc.\n\n🔗 [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)\n\n**Cài đặt (settings.json)**\n```json\n\"better-comments.tags\": [\n  { \"tag\": \"!\", \"color\": \"#FF2D00\", \"bold\": true },\n  { \"tag\": \"?\", \"color\": \"#3498DB\" },\n  { \"tag\": \"TODO\", \"color\": \"#FF8C00\", \"bold\": true },\n  { \"tag\": \"*\", \"color\": \"#98C379\" }\n]\n```\n\n\n## 9. Multi-Command\n\n**Mô tả**: Cho phép thực thi nhiều lệnh một lúc trong VSCode. \nHỗ trợ cài đặt nhiều combo commands cho VIM\n\n🔗 [Multi-Command](https://marketplace.visualstudio.com/items?itemName=ryuta46.multi-command)\n\n**Ví dụ**: Command xem log git: \nForcus Ter -\u003e New Ter -\u003e nhập lệnh `git log --online`\n\n```json\n\"multiCommand.commands\": [\n  {\n    \"command\": \"multiCommand.runGitLog\",\n    \"sequence\": [\n      \"workbench.action.terminal.focus\",\n      \"workbench.action.terminal.new\",\n      {\n        \"command\": \"workbench.action.terminal.sendSequence\",\n        \"args\": { \"text\": \"git log --oneline\\n\" }\n      }\n    ]\n  }\n]\n```\n\n## 10. Command Variable\n\n**Mô tả**: extension hỗ trợ nhập liệu\nHỗ trợ tạo các multiCommand.commands với giá trị được nhập từ người dùng\nVí dụ: `git checkout -b [branch_name]`\n\n🔗 [Command-Variable](https://marketplace.visualstudio.com/items?itemName=rioj7.command-variable)\n\n## 11. CodeSnap\n\n**Mô tả**: Hỗ trợ chụp ảnh mã nguồn đẹp mắt để chia sẻ nhanh chóng.\n\n🔗 [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)\n\n## 12. Caps Lock State\n\n**Mô tả**: Xài keyboard rời và không biết caps đang on/off, ảnh hưởng đến motion của VIM -\u003e Hỗ trợ hiển thị trạng thái của capslock\nHỗ trợ hiển thị trạng thái của capslock (on/off)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://github.com/elling19/vscode-extension-caps-lock-state/blob/master/assets/md_1.gif?raw=true\" alt=\"Switch different display methods\"\u003e\u003c/p\u003e\n\n🔗 [Caps Lock State](https://marketplace.visualstudio.com/items?itemName=Elling.caps-lock-state)\n\n## 13. Peacock\n\n**Mô tả**: Giúp tùy chỉnh màu sắc của cửa sổ VSCode theo các màu sắc bạn lựa chọn, giúp dễ dàng nhận diện và phân biệt giữa các cửa sổ hoặc dự án đang mở.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/johnpapa/vscode-peacock/main/resources/hero.png\" alt=\"Peacock Windows\" title=\"Peacock windows\" width=\"450px\"\u003e\u003c/p\u003e\n\n🔗 [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)\n\n```json\n\"peacock.favoriteColors\": [\n  { \"name\": \"Jazzberry Jam\", \"value\": \"#AC1754\" },\n  { \"name\": \"Dark Cerulean\", \"value\": \"#205781\" },\n  { \"name\": \"Tangerine\", \"value\": \"#C14600\" },\n  { \"name\": \"Persian Blue\", \"value\": \"#211C84\" },\n  { \"name\": \"Rich Lavender\", \"value\": \"#AA60C8\" },\n  { \"name\": \"Blue Lagoon\", \"value\": \"#0A97B0\" },\n  { \"name\": \"Dark Gunmetal\", \"value\": \"#343131\" },\n  { \"name\": \"Medium Aquamarine\", \"value\": \"#66D2CE\" }\n]\n```\n\n## 14. Project Manager\n\n**Mô tả**: Giúp quản lý các project, mở và di chuyển qua lại các project dễ dàng\n\n🔗 [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)\n\n## 15. Find It Faster\n\n**Mô tả**: Tìm tệp và văn bản trong tệp, nhưng nhanh hơn VS Code thông thường.\n\nĐảm bảo kiểm tra các Yêu cầu bên dưới (TL; DR: có fzf, rg, bat trên PATH của bạn).\n  - [`fzf (\"command-line fuzzy finder\")`](https://github.com/junegunn/fzf)\n  - [`rg (\"ripgrep\")`](https://github.com/BurntSushi/ripgrep)\n  - [`bat (\"a cat clone with wings\")`](https://github.com/sharkdp/bat)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/tomrijndorp/vscode-finditfaster/raw/main/media/find_files.gif\" alt=\"Find Files\"\u003e\n\u003c/p\u003e\n\n\n🔗 [Find it faster](https://marketplace.visualstudio.com/items?itemName=TomRijndorp.find-it-faster#requirements)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatvt243%2Fvscode_settings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatvt243%2Fvscode_settings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatvt243%2Fvscode_settings/lists"}