{"id":18729505,"url":"https://github.com/dynonguyen/vscode-tips","last_synced_at":"2025-11-12T07:30:13.204Z","repository":{"id":44341742,"uuid":"383946069","full_name":"dynonguyen/vscode-tips","owner":"dynonguyen","description":"Tối ưu hoá công việc trên Visual Code","archived":false,"fork":false,"pushed_at":"2021-07-14T12:02:11.000Z","size":17134,"stargazers_count":40,"open_issues_count":0,"forks_count":18,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-28T14:36:51.910Z","etag":null,"topics":["performance","shared","tips-and-tricks","vscode"],"latest_commit_sha":null,"homepage":"","language":null,"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/dynonguyen.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}},"created_at":"2021-07-07T23:15:24.000Z","updated_at":"2024-10-07T11:08:00.000Z","dependencies_parsed_at":"2022-08-29T17:51:40.868Z","dependency_job_id":null,"html_url":"https://github.com/dynonguyen/vscode-tips","commit_stats":null,"previous_names":["dynonguyen/vscode-tips"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dynonguyen%2Fvscode-tips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dynonguyen%2Fvscode-tips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dynonguyen%2Fvscode-tips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dynonguyen%2Fvscode-tips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dynonguyen","download_url":"https://codeload.github.com/dynonguyen/vscode-tips/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239599040,"owners_count":19665911,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["performance","shared","tips-and-tricks","vscode"],"created_at":"2024-11-07T14:27:23.831Z","updated_at":"2025-11-12T07:30:12.989Z","avatar_url":"https://github.com/dynonguyen.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e Tối ưu hoá công việc trên Visual Code \u003c/h1\u003e\n\n\u003c!-- banner --\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg  src=\"./images/banner.png\" height=\"200\" width=\"450\" /\u003e\n\u003c/div\u003e\n\n\u003c!-- Mô tả --\u003e\n\u003cbr /\u003e\n\n# 🥰 MÔ TẢ\n\n\u003e Sau thời gian làm việc với VSCode thì mình tích góp được một vài cách làm việc nhanh hơn với Code Editor này. Dưới đây là tất cả những Extensions, Settings, Tips mà mình biết về VScode, mong rằng bài viết này sẽ giúp mọi người tối ưu hoá được công việc, cũng như tạo được nguồn cảm hứng khi làm việc trên Code Editor này nhé.\n\u003e Nếu thấy hay hãy thả cho mình một sao ⭐ nhé hehe. 😉\n\n\u003c!-- Extensions --\u003e\n\u003cbr/\u003e\n\n# ⚒ Các Extension mình đã và đang dùng\n\n\u003c!-- Visual Studio IntelliCode --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    1. Visual Studio IntelliCode\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext này hình như mặc định đã được cài thì phải. Còn nếu ae nào bị mất thì có thể cài lại nhé. Nó sẽ suggest code cho ae để ae code nhanh hơn.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/vs-intelli-code.png\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)\n\n\u003c/details\u003e\n\n\u003c!-- dracula theme --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    2. Dracula Theme\n  \u003c/summary\u003e\n\n\u003cbr /\u003e\n\n\u003e Nói về Dracula theme thì chắc đây cũng chính là theme quốc dân của bao ae coder đang dùng VScode nhỉ 😁. Đây là theme mình đang dùng, cách tuỳ chỉnh lại mình sẽ nói dưới phần cài đặt nhé 🤗\n\n\u003e Hoặc ae có thể tải bản đã setting sẵn của anh Trần Anh Tuấn Evondev nhé.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/daracula-theme.jpg\" /\u003e\n\u003c/div\u003e\n\n🔗 [Link tải bản gốc](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)\n\n🔗 [Link tải bản của Evondev](https://marketplace.visualstudio.com/items?itemName=evondev.dracula-high-contrast)\n\n\u003c/details\u003e\n\n\u003c!-- advanced new file --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    3. Advanced-new-file\n  \u003c/summary\u003e\n  \u003cbr/\u003e\n\n\u003e Có bạn giờ bạn cảm thấy khó khăn khi phải tìm đến 1 thư mục con nằm trong thư mục con \u003e\u003e nằm trong thư mục con ... chỉ để tạo 1 file mới chưa? 😥 Nếu rồi thì đây chính là giải pháp cho ae đây 🙄 Extension \"advanced-new-file\" !\n\n\u003e Bạn chỉ cần dùng câu lệnh bằng cách bấm \"Ctrl + Shift + P\", Nhập câu command và chọn đường dẫn (Bạn chỉ cần nhập tắt, Ext sẽ giúp bạn đến đúng folder đó). Ngoài ra bạn có thể tạo folder bằng cách thêm \"/\" sau tên nhé.\n\n\u003e Còn muốn nhanh hơn thì xem phần cài đặt shorcut bên dưới nhé 😊\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/advanced-new-file.gif\" /\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file)\n\n\u003c/details\u003e\n\n\u003c!-- file utils --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    4. File Utils\n  \u003c/summary\u003e\n  \u003cbr/\u003e\n\n\u003e Cũng như ext trên, ext này giúp bạn có thể đổi tên file, xoá tên file ngay lập tức mà không cần tìm đến cây thư mục của VSCode nữa.\n\n\u003e Kết hợp với ext \"advanced-new-file\" thì bạn có thể bỏ luôn cây thư mục bên kia rồi hehe. Không cần dùng chuột như Vim luôn nè 😉\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/file-utils.gif\" /\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils)\n\n\u003c/details\u003e\n\n\u003c!-- auto import --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    5. Auto import\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext này sẽ giúp ae tự động tìm kiếm đường dẫn và import file. Nếu nó không tự động suggest thì ae có thể nhấn \"Ctrl + Space\" nhé.\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)\n\n\u003c/details\u003e\n\n\u003c!-- auto rename tag --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    6. Auto rename tag\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext này rất hữu ích cho ae Front-end. Khi cài đặt xong, ae chỉ cần sửa thẻ mở của 1 tag html (jsx) thì phần thẻ đóng cũng sẽ tự đổi theo 😗.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/auto-rename-tag.gif\" /\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)\n\n\u003c/details\u003e\n\n\u003c!-- Autoprefixer --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    7. Autoprefixer\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext này giúp ae code css, sass tự thêm các prefix cho từng trình duyệt khác nhau (vd: --webkit-, --ms-). Chỉ cần khi code xong, ae chạy command \"Autoprefixer\"\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/auto-prefixer.gif\" /\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer)\n\n\u003c/details\u003e\n\n\u003c!-- Better comments --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    8. Better comment\n  \u003c/summary\u003e\n  \u003cbr/\u003e\n\n\u003e Ext này giúp ae thay đổi màu comment dựa trên ý nghĩa của comment đó. Chỉ cần nhìn vào màu comment là biết ngay nó làm cái chi, có ý nghĩa gì 🤩\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/better-comment.png\" /\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)\n\n\u003c/details\u003e\n\n\u003c!-- Bracket Pair Colorizer --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    9. Bracket Pair Colorizer 2\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext này giúp tự động thay đổi màu cho các cặp ngoặc, việc này giúp chúng ta dễ dàng nhận biết các scope khác nhau dựa trên màu sắc của chúng.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/bracket-color.png\" /\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)\n\n\u003c/details\u003e\n\n\u003c!-- Code spell checker --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    10. Code Spell Checker\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Người ta nói, một lý luận của bạn đều trở nên vô nghĩa nếu bạn sai \"trính tã\". Vì thế, đừng để ae chí cốt code chung chúng ta chửi chúng ta code ngu chỉ vì lỗi chính tả. Cài ngay Ext này để nó nhắc lỗi chính tả cho bạn.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/code-spell-checker.gif\" /\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)\n\n\u003c/details\u003e\n\n\u003c!-- code highlight --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    11. Code Highlight\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext sẽ giúp phát hiện ra những đoạn code có chưa mã màu và tô đúng màu đó cho bạn.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/code-highlight.gif\" /\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)\n\n\u003c/details\u003e\n\n\u003c!-- 12. EditorConfig --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    12. EditorConfig for VS Code\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext này sẽ giúp bạn tạo cái file trong dự án cùng một format với nhau, ví dụ như Spaces: 2, tab: 4, LF, trim_trailing_whitespace ... Kết hợp với file .editorconfig thì các người khác trong team cũng tuân theo quy tắc đó.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/editorconfig.png\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)\n\n\u003c/details\u003e\n\n\u003c!-- 13. ESLint --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    13. ESLint\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e ESLint sẽ giúp chúng ta có thể tạo ra những quy tắc chung trong project, để code của tất cả các file được đồng nhất với nhau. Nó khác với Editorconfig ở chỗ là Editorconfig chỉ tạo những quy tắc về format code, định dạng file. Còn ESLint có thể tạo nhiều rule về code hơn.\n\n🔗 [Link tải Extensionhttps://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint\n\n\u003c/details\u003e\n\n\u003c!-- 14. Prettier --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    14. Prettier - Code Formater\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Prettier là 1 trình Formater hoàn hảo, nó giúp chúng ta format code, auto format và đặc biệt là nó có thể kết hợp với các quy tắc của Editor config và ESLint để Format (Nhưng chúng ta phải câu hình chúng).\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/prettier.png\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\n🔗 [Tìm hiểu thêm về Prettier](https://prettier.io/docs/en/options.html)\n\n\u003c/details\u003e\n\n\u003c!-- ES7 React/Redux/GraphQL/React Native Snippet  --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    15. ES7 React/Redux/GraphQL/React Native Snippet  \n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Bộ snippet hữu dụng cho React dev, giúp ae tạo bộ khung chương trình 1 cách nhanh chóng.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/es7-react.png\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)\n\n\u003c/details\u003e\n\n\u003c!-- 16. Git Blame / Git History --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    16. Git Blame / Git History / Git Lens\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e 3 Exts Git Blame, Git History, Git Lens có chức năng khá tương đồng nhau. Nó giúp ae có thể xem đoạn lịch sử git trực tiếp tai dòng code đó, xem branch hiện tại, các thay đổi của file, merge file, ...\n\n\u003e Bản thân mình thì mình thích Git Blame hơn vì nó tối giản, gọn nhẹ hơn. Ae có thể thử cả 3 rồi chọn cho mình 1 cái ưng ý nhé 😋\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/git-blame.gif\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Git Blame](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame)\n\n🔗 [Link tải Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)\n\n🔗 [Link tải Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)\n\n\u003c/details\u003e\n\n\u003c!-- 17. Highlight Matching Tag --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    17. Highlight Matching Tag\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext này giúp chúng ta tìm nhanh thẻ đóng của 1 thẻ mở bằng cách đưa con trỏ đến thẻ mở, Ext sẽ tự tìm thẻ đóng cho chúng ta. Ae cũng có thể custom lại màu highlight tuỳ thích.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/highlight-matching-tag.gif\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)\n\n\u003c/details\u003e\n\n\u003c!-- 18. htmltagwrap --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    18. htmltagwrap\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Như cái tên của nó, Ext này sẽ giúp ae wrap 1 cặp thẻ bao 1 đoạn code html (jsx) lại một cách nhanh chóng (mặt định là tổ hợp \"Alt + W\"). Thay vì ae phải viết 1 thẻ mở, rồi tìm đến cuối đoạn để đóng thẻ đó lại thì chỉ cần bôi đen đoạn code rồi bấm tổ hợp phím. Ae cũng có thể lựa chọn cặp thẻ để bao lại là thẻ gì.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/htmltagwrap.gif\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)\n\n💥 VScode Emmet cũng đã hỗ trợ tính năng này, bạn có thể sử dụng tính năng có sẵn thay vì dùng Ext trên. Bạn có thể bật nó qua shortcut có command `editor.emmet.action.wrapWithAbbreviation`\n🔗 [Link tham khảo](https://code.visualstudio.com/docs/editor/emmet)\n\n\u003c/details\u003e\n\n\u003c!-- 19. Indent-rainbow --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    19. indent-rainbow\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext giúp tô màu cho các tab đầu dòng của chúng ta theo kiểu rainbow, giúp phân biệt các dòng code và scope code dễ dàng hơn.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/indent-rainbow.png\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)\n\n\u003c/details\u003e\n\n\u003c!-- 20. JavaScript (ES6) code snippet --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    20. JavaScript (ES6) code snippet\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ae nào code Javascript thì chắc hẳn đều biết đến Ext này, bộ snippet cực hữu dụng cho code JS.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/js-code-snippet.png\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)\n\n\u003c/details\u003e\n\n\u003c!-- 21. Live Server --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    21. Live Server\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Live Server Ext sẽ giúp chúng ta tạo một hot reload server khi code html, css, js. Chỉ cần save lại là server sẽ tự reload và cập nhật lại trên browser.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/live-server.gif\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)\n\n\u003c/details\u003e\n\n\u003c!-- 22. Material Icon Theme / vscode-icons --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    22. Material Icon Theme / vscode-icons\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e 2 Ext này giúp ta thêm icon vào các thư mục, file bên cây thư mục của VSCode, giúp chúng ta dễ dàng phân biệt các file, folder với nhau.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/vscode-icons.gif\"\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/material-icons.png\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)\n\n🔗 [Link tải vs-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)\n\n\u003c/details\u003e\n\n\u003c!-- 23. Path Intellisense --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    23. Path Intellisense\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext này sẽ auto suggest đường dẫn khi bạn gõ đường dẫn.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/path-intellisense.gif\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)\n\n\u003c/details\u003e\n\n\u003c!-- 24. Project Manager --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    24. Project Manager\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext này giúp ae lưu trữ các đường dẫn đến các thư mục chứa các project mà ae đang code. Vì thể, việc mở 1 project sẽ trở nên nhanh chóng hơn rất nhiều.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/project-manager.png\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)\n\n\u003c/details\u003e\n\n\u003c!-- 25. React PropTypes Generate --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    25. React PropTypes Generate\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Nếu ae đang code React và dùng Proptype thì Ext này sẽ giúp ae tạo nhanh chóng proptype cho component.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/react-proptypes.gif\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=suming.react-proptypes-generate)\n\n\u003c/details\u003e\n\n\u003c!-- 26. REST Client --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    26. REST Client\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext giúp chúng ta có thể test REST API dễ dàng chỉ với vài dòng code ngay trên VSCode mà không cần phải dùng đến Postman nữa.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/rest-client.gif\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)\n\n\u003c/details\u003e\n\n\u003c!-- 27. SCSS Formater --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    27. SCSS Formater\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext giúp format code css và scss\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/scss-formater.gif\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter)\n\n\u003c/details\u003e\n\n\u003c!-- 28. Power Mode --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    28. Power Mode\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext này sẽ tạo hiệU ứng khi ta viết code, giúp ae có cảm hứng làm việc hơn. Nhưng nó có thể gây chậm máy, lag nên ae cân nhắc. Buồn buồn hả bật lên 😎\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/power-mode.gif\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)\n\n\u003c/details\u003e\n\n\u003c!-- 29. Import cost --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    29. Import cost\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext sẽ hiển thị size của các thư viện mà ae import vào, từ đó ae cân nhắc xem có nên thêm thư viện đó vào hay không.\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)\n\n\u003c/details\u003e\n\n\u003c!-- 30. Bookmarks --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    30. Bookmarks\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ext giúp chúng ta đặt các bookmark tại các dòng code cần lưu ý. Ext này đặc biết hữu dụng khi luồng code của chúng ta khá phức tạp, chia ở nhiều file. Khi Debug ta sẽ đánh dấu lại các dòng code đó.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/bookmarks.png\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)\n\n\u003c/details\u003e\n\n\u003c!-- 31. setting sync --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    31. Setting Sync\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Sau khi cài đống extensions trên và những cài đặt ở dưới đây, thì chúng ta có thể lưu trữ nó trên Github Gist và dùng Setting Sync để đồng bộ lại. Trong trường hợp, phải dùng máy tính khác hoặc phải cài lại phần mềm thì Ext này sẽ giúp những cài đặt chúng ta không bị mất đi.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/setting-sync.png\"\u003e\n\u003c/div\u003e\n\n🔗 [Link tải Extension](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)\n\n💥 Hiện nay, VSCode đã hỗ trợ tính năng Setting Sync có sẵn, bạn có thêm xem thêm về tính năng này mà không cần dùng đến Ext trên.\n🔗 [Link tham khảo](https://code.visualstudio.com/docs/editor/settings-sync)\n\n\u003c/details\u003e\n\n\u003c!-- Bonus: Tabnine AI Code \u0026 GitHub Copilot --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    Bonus: Tabnine AI Code \u0026 GitHub Copilot\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e 2 thanh niên AI đang làm mưa làm gió hiện nay. Ae có thể tìm hiểu thêm nhé.\n\n🔗 [Link tải Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)\n\n🔗 [Link tải Github Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)\n\n\u003c/details\u003e\n\n\u003c!-- setting --\u003e\n\u003cbr /\u003e\n\n# ⚙ Các cài đặt Visual Code\n\n\u003c!-- settings --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    0. Hướng dẫn cài đặt với file settings.jon\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Cho ae nào chưa biết, thì ngoài cài đặt trực tiếp bằng GUI của VSCode, thì ae có thể sửa thằng trong file `settings.json`.\n\n\u003e Có 2 cách để mở file settings.json:\n\n1. Vào phần cài đặt VSCode -\u003e chọn `Open Setting (JSON)` bên gốc phải màn hình.\n\n2. Mở command `Ctrl + Shf + P`, gõ `Open Setting (JSON)`.\n\n\u003c/details\u003e\n\n\u003c!-- Fira Font --\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    1. Fira Font và Font Ligatures\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Font chữ mà mình sử dụng là Fira font và font chữ có hõ trợ ligatures giúp chúng ta đọc code nhanh hơn.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/settings/fira.svg\" /\u003e\n\u003c/div\u003e\n\n```json\n\"editor.fontFamily\": \"Fira Code\",\n\"editor.fontLigatures\": true\n```\n\n🔗 [Link tải Font](https://github.com/tonsky/FiraCode)\n\n💥 Bạn có thể xem thêm font `Cascadia Code Font` cũng có hỗ trợ ligatures và cả tiếng Việt, khá đẹp đấy !\n🔗 [Link tải Font Cascadia](https://github.com/microsoft/cascadia-code)\n\n\u003c/details\u003e\n\n\u003c!-- Zoom --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    2. Zoom bằng chuột (Mouse Wheel Zoom)\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Cài đặt này giúp ae phóng to, thu nhỏ font chữ bằng chuột.\n\n```json\n\"editor.mouseWheelZoom\": true\n```\n\n\u003c/details\u003e\n\n\u003c!-- Format on save --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    3. Format\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Lưu lại khi save (Format on Save)\n\n```json\n\"editor.formatOnSave\": true\n```\n\n\u003e Chọn trình format mặc đỊnh (default formatter)\n\n```json\nCấu trúc \u003e \"[ngôn ngữ]\": {\n  \t\"editor.defaultFormatter\": \"trình format\"\n}\n\nVí dụ:\n\"[javascript]\": {\n\t\t\"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n},\n\"[scss]\": {\n\t\t\"editor.defaultFormatter\": \"sibiraj-s.vscode-scss-formatter\"\n}\n```\n\n\u003e Một vài cài đặt Prettier\n\n```json\n\"prettier.singleQuote\": true, // Sử dụng dấu nháy đơn\n\"prettier.jsxSingleQuote\": true, // Sử dụng dấu nháy đơn cho thuộc tính trong jsx\n\"autoprefixer.formatOnSave\": true, // Format on Save\n\"prettier.trailingComma\": \"all\", // Thêm dấu phẩy vào phần tử cuối của Object\n\"prettier.useTabs\": true, // Dùng tab thay vì space\n```\n\n\u003c/details\u003e\n\n\u003c!-- Emmet --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    4. Emmet cho ngôn ngữ khác\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Emmet bộ snippet giúp ae Front-end code html nhanh hơn. VD: `.box` = `\u003cdiv class=\"box\"\u003e\u003c/div\u003e`. Mặc định, ta chỉ có thể dùng trong file html. Với cài đặt này, ae có thể dùng ở các file khác.\n\n```json\n\"emmet.includeLanguages\": {\n  \"javascript\": \"javascriptreact\", // dành cho file jsx\n  \"markdown\": \"html\"\n},\n```\n\n\u003c/details\u003e\n\n\u003c!-- Custom VSCode --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    5. Custom giao diện VSCode\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ae có thể thay đổi mọi màu sắc trong VSCode một cách tuỳ thích, chỉ cần ae hiều thuộc tính cần thay đổi là gì.\n\n```json\n// Thay đổi màu sắc\n\"workbench.colorCustomizations\": {\n  \"sideBar.background\": \"#191932\",\n  \"editor.background\": \"#191932\",\n  // ...\n},\n\n// Một vài cài đặt khác\n\"workbench.activityBar.visible\": true, // Bật tắt thanh sidebar bên trái\n\"workbench.colorTheme\": \"Dracula\", // Cài đặt theme\n\"window.menuBarVisibility\": \"toggle\", // Tắt thanh menu trên cùng (Giữ Alt và Click để hiện thanh menu)\n```\n\n🔗 [Link tìm hiểu thêm API VSCode](https://code.visualstudio.com/api/references/theme-color)\n\n\u003c/details\u003e\n\n\u003c!-- custom editor theme --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    6. Custom theme\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Ae có thể tuỳ ý thay đổi các màu của bất kỳ theme nào, chỉ cần ae biết tý về Css.\n\n```json\nCấu trúc\n\n\"editor.tokenColorCustomizations\": {\n  \"[Tên theme]\": {\n    \"textMateRules\": [\n      {\n        \"scope\": [Mảng các scope],\n        \"settings\": {\n          Các thuộc tính style\n        }\n      },\n    ]\n  }\n}\n```\n\n```json\nVí dụ:\n\"editor.tokenColorCustomizations\": {\n  \"[Dracula]\": {\n    \"textMateRules\": [\n      {\n        \"scope\": [\"string.quoted\", \"string.quoted.single\"],\n        \"settings\": {\n          \"foreground\": \"#d38a60\",\n          \"fontStyle\": \"italic\"\n        }\n      },\n    ]\n  }\n}\n```\n\n\u003e Cách lấy tên các scope\n\n\u003e B1: Mở command `Ctrl + Shf + P`, gõ \"Inspect Editor Tokens and Scopes\"\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/settings/inspect-tokens.png\" /\u003e\n\u003c/div\u003e\n\n\u003e B2: Click chuột vào vị trí mà ae muốn đổi màu, và copy tên thuộc tính.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/settings/custom-theme.png\" /\u003e\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n\u003c!-- Better comment --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    7. Better comment\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Thêm màu sắc để phân biệt các comment với nhau.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/better-comment.png\" /\u003e\n\u003c/div\u003e\n\n```json\n\"better-comments.tags\": [\n  {\n    \"tag\": \"@render\", // prefix trước mỗi comment\n    \"color\": \"#06AEED\",\n    \"strikethrough\": false,\n    \"underline\": false,\n    \"backgroundColor\": \"transparent\",\n    \"bold\": false,\n    \"italic\": true\n  },\n\n  // ...\n]\n```\n\n\u003c/details\u003e\n\n\u003c!-- html wrap --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    8. html wrapper\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Custom htmlwrapper extension\n\n```json\n\"htmltagwrap.tag\": \"div\", // tag mặc định sẽ wrap\n\"htmltagwrap.autoDeselectClosingTag\": true, // tự động phát hiện kết thúc tag\n```\n\n\u003c/details\u003e\n\n\u003c!-- exclude file --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    9. Ẩn bớt folder, file (Exclude Folder, Files)\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Có một số folder và file rất ít khi chúng ta cần mở lên xem như node_modules, hay các file lock... Chúng ta có thể ẩn nó đi bên thanh sidebar để thư mục đỡ rối hơn.\n\n```json\n\"files.exclude\": {\n  \"**/.git\": true,\n  \"**/.next\": true,\n  \"**/.svn\": true,\n  \"**/.hg\": true,\n  \"**/CVS\": true,\n  \"**/.DS_Store\": true,\n  \"**/node_modules/\": true,\n  // ...\n},\n```\n\n\u003c/details\u003e\n\n\u003c!-- Other --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    10. Một vài cài đặt khác\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n- Chọn terminal mặc định khi mở\n\n```json\n\"terminal.integrated.shell.windows\": \"C:\\\\Windows\\\\System32\\\\cmd.exe\",\n```\n\n- Auto save (Hạn chế liệt phím Ctrl + S)\n\n```json\n\"files.autoSave\": \"afterDelay\",\n\"files.autoSaveDelay\": 2000 // Tự lưu sau 2s\n```\n\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n# 🐱‍👤 Snippet\n\n\u003e 🐣 Snippet là những đoạn code ngắn thay thế cho những đoạn code có một mẫu chung, được lặp đi lặp lại. Sử dụng quen với các snippet thì ae sẽ giảm được rất nhiều thời gian khi code.\n\n\u003e Ngoài những snippet có sẵn do các Extension hỗ trợ, ae hoàn toàn có thể tạo ra những snippet cho riêng mình một cách dễ dàng.\n\n- B1: Mở cài đặt góc phải, chọn `User Snippet` hoặc dùng tổ hợp phím `Ctrl+U Ctrl+S`.\n\n- B2: Chọn loại snippet (có 2 loại là `Local` chỉ dùng cho dự án hiện tại và `Global` là cho mọi dự án).\n\n- B3: Thêm 1 snippet theo cấu trúc như vd sau:\n\n```json\n\"Make Arrow Function\": { // Tên Snippet\n  \"prefix\": \"fn\", // Cụm thay thế mà ae sẽ gõ\n  \"body\": [\n    // những gì cần thay thế\n    \"const ${1:name} = function(${2:params}){\",\n    \"  $3\",\n    \"  return $4;\",\n    \"}\"\n  ],\n  \"description\": \"Make Arrow Function\"\n},\n```\n\n\u003e 📝`$1` là thứ tự vị trí con trỏ sẽ di chuyển đến khi ae nhấn tab. `${1:default}` Cũng thế nhưng có default value\n\n\u003e 🐣 Ae có thể snippet generator website để tạo snippet nhanh chóng nhé.\n\n🔗 [Link Snippet VSCode API](https://code.visualstudio.com/docs/editor/userdefinedsnippets)\n🔗 [Link Snippet Generator](https://snippet-generator.app/)\n\n# ⌨ Các shortcut hữu dụng trong Visual Code\n\n## ⚙ Default Shortcut\n\n| Key           |                                Mô tả                                 |                  Command                   |                                           Ghi chú |\n| :------------ | :------------------------------------------------------------------: | :----------------------------------------: | ------------------------------------------------: |\n| Ctrl+K Ctrl+S |                           Mở bảng Shortcut                           |           openGlobalKeybindings            |                                              \\_\\_ |\n| Ctrl+P        |                     Mở navigation tìm file nhanh                     |     quickOpenNavigateNextInFilePicker      |                                     Nhập tên file |\n| Ctrl+R        |                    Mở navigation tìm folder nhanh                    |  quickOpenNavigateNextInRecentFilesPicker  |                                     Nhập tên file |\n| Ctrl+`        |                          Mở Terminal (cmd)                           |          terminal.toggleTerminal           |                                              \\_\\_ |\n| Ctrl+Shf+C    |                     Mở Terminal (cmd) bên ngoài                      |         terminal.openNativeConsole         |           Mở terminal của máy và đến project root |\n| Ctrl+Space    |                              Nhắc lệnh                               |               triggerSuggest               |                                              \\_\\_ |\n| Ctrl+Shf+P    |                           Mở bảng command                            |   quickOpenNavigatePreviousInFilePicker    |                                      Nhập command |\n| PageUp        |                       Đưa con trỏ về đầu file                        |                cursorPageUp                |                                              \\_\\_ |\n| PageDown      |                       Đưa con trỏ về cuối file                       |               cursorPageDown               |                                              \\_\\_ |\n| Home          |                       Đưa con trỏ về đầu dòng                        |                 cursorHome                 |                                              \\_\\_ |\n| End           |                       Đưa con trỏ về cuối dòng                       |                 cursorEnd                  |                                              \\_\\_ |\n| Ctrl+G        |                      Di chuyển đến dòng bất kỳ                       |                  gotoLine                  |                                      Nhập số dòng |\n| Ctrl+Shf+K    |                             Xoá một dòng                             |                deleteLines                 |                                              \\_\\_ |\n| Ctrl+C        |                           Copy (Copy dòng)                           |            clipboardCopyAction             |                       Copy dòng không cần bôi đen |\n| Ctrl+X        |                            Cắt (Cắt dòng)                            |             clipboardCutAction             |                        Cắt dòng không cần bôi đen |\n| Ctrl+L        |                        Bôi đen dòng hiện tại                         |            expandLineSelection             |                                              \\_\\_ |\n| Shf+[⬆ ⬇ ⬅ ➡] |                    Chọn liên tiếp dòng hoặc ký tự                    |  cursor[Row or Column]Select[Navigation]   |                                              \\_\\_ |\n| Alt+Shf+[⬇ ⬆] |              Copy\u0026Paste một dòng lên trên hoặc bên dưới              |        copyLines[Navigation]Action         |                   Có thể copy 1 đoạn được bôi đen |\n| Alt+[⬇ ⬆]     |                   Di chuyển 1 dòng lên hoặc xuống                    |        moveLines[Navigation]Action         |                                              \\_\\_ |\n| Ctrl+K Ctrl+L |                  Thu gọn hoặc mở rộng một đoạn code                  |             editor.toggleFold              |                                              \\_\\_ |\n| Ctrl+D        | Tìm kiếm các từ trùng với ký tự tại con trỏ và thêm 1 con trỏ tại đó |        addSelectionToNextFindMatch         |                                Bôi đen hoặc không |\n| Ctrl+Shf+L    |          Chọn tất cả các ký tự trùng và thêm con trỏ tại đó          |              selectHighlights              | Không phân biệt hoa thường (Bôi đen) và ngược lại |\n| F2            |                    Đổi tên 1 phương thức, 1 biến                     |                   rename                   |           Thay đổi tất cả chỗ nào có dùng biến đó |\n| Ctrl+F or F3  |                   Tìm kiếm và tìm kết quả kế tiếp                    |            nextMatchFindAction             |                                              \\_\\_ |\n| Ctrl+H        |                               Thay thế                               |           startFindReplaceAction           |                                              \\_\\_ |\n| Ctrl+B        |                       Đóng mở Sidebar bên trái                       |          toggleSidebarVisibility           |                                              \\_\\_ |\n| Ctrl+/        |          Tạo hoặc xoá 1 comment hoặc comment dòng hiện tại           |                commentLine                 |                   Tạo multiple nếu bôi nhiều dòng |\n| Shf+Tab       |                              Lùi 1 tab                               |                  outdent                   |                                 Ngược lại với tab |\n| Ctrl+Tab      |                    Di chuyển các tab trong VSCode                    | quickOpenPreviousRecentlyUsedEditorInGroup |                                              \\_\\_ |\n| Ctrl+U Ctrl+S |                         Mở hoặc tạo Snippet                          |                openSnippets                |                                              \\_\\_ |\n| Ctrl+,        |                             Mở settings                              |                openSettings                |                                              \\_\\_ |\n\n## 😎 Custom Shortcut\n\n\u003e Để custom lại các shortcut, ae có thể mở bảng shortcut, click thẳng vào shortcut cần custom và sửa lại. Hoặc có thể dùng file `keybinding.json` để sửa, mở file đó ở gốc phải màn hình shortcut.\n\n\u003e Ở dưới đây có một số shortcut là default, nhưng mình muốn để chung với các shortcut mình đã sửa để dễ nhớ\n\n| Key                   |                  Mô tả                  |                 Command                  |               Ghi chú |\n| :-------------------- | :-------------------------------------: | :--------------------------------------: | --------------------: |\n| Ctrl+K Ctrl+Backspace |           Thu gọn tất cả code           |              editor.foldAll              |                  \\_\\_ |\n| Ctrl+K Ctrl+J         |           Mở rộng tất cả code           |             editor.unFoldAll             |               default |\n| Ctrl+W                |            Đóng tab hiện tại            |    workbench.action.closeActiveEditor    |               default |\n| Ctrl+Shf+W            |  Đóng tất cả các tab trừ tab hiện tại   |    workbench.action.closeOtherEditors    |                  \\_\\_ |\n| Win+Shf+Z             |            Bật tắt Zen Mode             |      workbench.action.toggleZenMode      |                  \\_\\_ |\n| Ctrl+[⬆ ⬇ ⬅ ➡]        |   Chia màn hình ra nhiều màn hình con   | workbench.action.splitEditor[Navigation] |                  \\_\\_ |\n| Ctrl+Shf+[⬆ ⬇ ⬅ ➡]    | Di chuyển qua lại các màn hình vừa chia |  workbench.action.navigate[Navigation]   |                  \\_\\_ |\n| Alt+N                 |           Tạo file mới nhanh            |        extension.advancedNewFile         | advanced new file Ext |\n| Alt+F2                |       Đổi tên file hiện tại nhanh       |           fileutils.renameFile           |        File Utils Ext |\n| Alt+Delete            |         Xoá file hiện tại nhanh         |           fileutils.removeFile           |        File Utils Ext |\n\n\u003cbr/\u003e\n\n# 🌞 Một vài tips cho người dùng Windows\n\n\u003c!-- powertoys --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    1. Sử dụng PowerToys\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e PowerToys là một ứng dụng của Microsoft, có các tính năng rất tuyệt vời như chia màn hình làm việc, PowerToys Runs tìm nhanh 1 file/folder như Macbook, ... Một trong só đó là Color Picker rất hữu ích cho ae Front-end và Design nhé 😊\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/powertoys-cp.png\" /\u003e\n\u003c/div\u003e\n\n🔗 [Link tải PowerToys](https://github.com/microsoft/PowerToys)\n\n\u003c/details\u003e\n\n\u003c!-- emoji --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    2. Chèn nhanh 1 Emoji\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Sử dụng phím tắt `Windows + .` để mở bảng Emoji trên máy nhé.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/emoji.png\" /\u003e\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n\u003c!-- clipboard --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    3. Mở Clipboard\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Nhiều khi chúng ta Copy nhiều nội dung và muốn dán lại các nội dung cũ mà không cần phải copy lại, thì ae có thể dùng phím tắt `Windows + V` để mở Clipboard nhé. Nếu ae nào không thể mở thì ae vào phần `Settings \u003e Clipboard Setting \u003e Bật Clipboard history`.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/clipboard.png\" /\u003e\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n\u003c!-- window --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    4. Mở thêm Desktop làm việc\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e Chắc ae ai cũng đã biết dùng `Alt + Tab` để chuyển giữa các Tab trên 1 màn hình làm việc. Trong 1 vài trường hợp, có một số Tab chạy ngầm như các tab terminal thì để trong 1 màn hình sẽ rất rối. Vậy thì chúng ta sẽ vứt nó chạy bến 1 vùng làm việc mới.\n\n`Windows + Tab \u003e Tạo một Desktop mới \u003e Kéo thả những Tab chạy ngầm qua Desktop đó`\n\n\u003c/details\u003e\n\n\u003c!-- DOSKEY --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\n    5. DOSKEY Alias\n  \u003c/summary\u003e\n\n  \u003cbr/\u003e\n\n\u003e DOSKEY trên Windows giúp ae tạo ra những Alias như trên terminal MacOS hay Linux. Vd: ga -\u003e git add .\n\n- Tạo một tệp .bat hoặc .cmd bằng các DOSKEY lệnh của bạn.\n- Chạy regedit và đi đến HKEY_CURRENT_USER\\Software\\Microsoft\\Command Processor\n- Thêm mục nhập Giá trị chuỗi với tên AutoRun và đường dẫn đầy đủ của tệp .bat / .cmd của bạn.\n- File alias.cmd có dạng như sau:\n\n```\nDOSKEY ni=npm install\nDOSKEY ns=npm start\nDOSKEY nt=npm run test\nDOSKEY nb=npm run build\n```\n\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n# 🐱‍🐉 Kết quả\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/result.png\" /\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdynonguyen%2Fvscode-tips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdynonguyen%2Fvscode-tips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdynonguyen%2Fvscode-tips/lists"}