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ếu thấy hay hãy thả cho mình một sao ⭐ nhé hehe. 😉
1. Visual Studio IntelliCode
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.
2. Dracula Theme
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é 🤗
Hoặc ae có thể tải bản đã setting sẵn của anh Trần Anh Tuấn Evondev nhé.
3. Advanced-new-file
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 >> 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" !
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é.
Còn muốn nhanh hơn thì xem phần cài đặt shorcut bên dưới nhé 😊
4. File Utils
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.
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è 😉
5. Auto import
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é.
6. Auto rename tag
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 😗.
7. Autoprefixer
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"
8. Better comment
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ì 🤩
9. Bracket Pair Colorizer 2
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.
10. Code Spell Checker
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.
11. Code Highlight
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.
12. EditorConfig for VS Code
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 đó.
13. ESLint
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.
🔗 [Link tải Extensionhttps://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
14. Prettier - Code Formater
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).
15. ES7 React/Redux/GraphQL/React Native Snippet
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.
16. Git Blame / Git History / Git Lens
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, ...
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é 😋
17. Highlight Matching Tag
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.
18. htmltagwrap
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ì.
💥 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
🔗 Link tham khảo
19. indent-rainbow
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.
20. JavaScript (ES6) code snippet
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.
21. Live Server
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.
22. Material Icon Theme / vscode-icons
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.
24. Project Manager
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.
25. React PropTypes Generate
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.
26. REST Client
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.
28. Power Mode
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 😎
29. Import cost
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.
30. Bookmarks
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 đó.
31. Setting Sync
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.
💥 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. 🔗 Link tham khảo
Bonus: Tabnine AI Code & GitHub Copilot
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é.
0. Hướng dẫn cài đặt với file settings.jon
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.
Có 2 cách để mở file settings.json:
-
Vào phần cài đặt VSCode -> chọn
Open Setting (JSON)bên gốc phải màn hình. -
Mở command
Ctrl + Shf + P, gõOpen Setting (JSON).
1. Fira Font và Font Ligatures
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.
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true💥 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 !
🔗 Link tải Font Cascadia
2. Zoom bằng chuột (Mouse Wheel Zoom)
Cài đặt này giúp ae phóng to, thu nhỏ font chữ bằng chuột.
"editor.mouseWheelZoom": true3. Format
Lưu lại khi save (Format on Save)
"editor.formatOnSave": trueChọn trình format mặc đỊnh (default formatter)
Cấu trúc > "[ngôn ngữ]": {
"editor.defaultFormatter": "trình format"
}
Ví dụ:
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
}Một vài cài đặt Prettier
"prettier.singleQuote": true, // Sử dụng dấu nháy đơn
"prettier.jsxSingleQuote": true, // Sử dụng dấu nháy đơn cho thuộc tính trong jsx
"autoprefixer.formatOnSave": true, // Format on Save
"prettier.trailingComma": "all", // Thêm dấu phẩy vào phần tử cuối của Object
"prettier.useTabs": true, // Dùng tab thay vì space4. Emmet cho ngôn ngữ khác
Emmet bộ snippet giúp ae Front-end code html nhanh hơn. VD:
.box=<div class="box"></div>. 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.
"emmet.includeLanguages": {
"javascript": "javascriptreact", // dành cho file jsx
"markdown": "html"
},5. Custom giao diện VSCode
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ì.
// Thay đổi màu sắc
"workbench.colorCustomizations": {
"sideBar.background": "#191932",
"editor.background": "#191932",
// ...
},
// Một vài cài đặt khác
"workbench.activityBar.visible": true, // Bật tắt thanh sidebar bên trái
"workbench.colorTheme": "Dracula", // Cài đặt theme
"window.menuBarVisibility": "toggle", // Tắt thanh menu trên cùng (Giữ Alt và Click để hiện thanh menu)6. Custom theme
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.
Cấu trúc
"editor.tokenColorCustomizations": {
"[Tên theme]": {
"textMateRules": [
{
"scope": [Mảng các scope],
"settings": {
Các thuộc tính style
}
},
]
}
}Ví dụ:
"editor.tokenColorCustomizations": {
"[Dracula]": {
"textMateRules": [
{
"scope": ["string.quoted", "string.quoted.single"],
"settings": {
"foreground": "#d38a60",
"fontStyle": "italic"
}
},
]
}
}Cách lấy tên các scope
B1: Mở command
Ctrl + Shf + P, gõ "Inspect Editor Tokens and Scopes"
B2: Click chuột vào vị trí mà ae muốn đổi màu, và copy tên thuộc tính.
7. Better comment
Thêm màu sắc để phân biệt các comment với nhau.
"better-comments.tags": [
{
"tag": "@render", // prefix trước mỗi comment
"color": "#06AEED",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": true
},
// ...
]8. html wrapper
Custom htmlwrapper extension
"htmltagwrap.tag": "div", // tag mặc định sẽ wrap
"htmltagwrap.autoDeselectClosingTag": true, // tự động phát hiện kết thúc tag9. Ẩn bớt folder, file (Exclude Folder, Files)
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.
"files.exclude": {
"**/.git": true,
"**/.next": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/node_modules/": true,
// ...
},10. Một vài cài đặt khác
- Chọn terminal mặc định khi mở
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",- Auto save (Hạn chế liệt phím Ctrl + S)
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 2000 // Tự lưu sau 2s🐣 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.
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.
-
B1: Mở cài đặt góc phải, chọn
User Snippethoặc dùng tổ hợp phímCtrl+U Ctrl+S. -
B2: Chọn loại snippet (có 2 loại là
Localchỉ dùng cho dự án hiện tại vàGloballà cho mọi dự án). -
B3: Thêm 1 snippet theo cấu trúc như vd sau:
"Make Arrow Function": { // Tên Snippet
"prefix": "fn", // Cụm thay thế mà ae sẽ gõ
"body": [
// những gì cần thay thế
"const ${1:name} = function(${2:params}){",
" $3",
" return $4;",
"}"
],
"description": "Make Arrow Function"
},📝
$1là 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
🐣 Ae có thể snippet generator website để tạo snippet nhanh chóng nhé.
🔗 Link Snippet VSCode API 🔗 Link Snippet Generator
| Key | Mô tả | Command | Ghi chú |
|---|---|---|---|
| Ctrl+K Ctrl+S | Mở bảng Shortcut | openGlobalKeybindings | __ |
| Ctrl+P | Mở navigation tìm file nhanh | quickOpenNavigateNextInFilePicker | Nhập tên file |
| Ctrl+R | Mở navigation tìm folder nhanh | quickOpenNavigateNextInRecentFilesPicker | Nhập tên file |
| Ctrl+` | Mở Terminal (cmd) | terminal.toggleTerminal | __ |
| Ctrl+Shf+C | Mở Terminal (cmd) bên ngoài | terminal.openNativeConsole | Mở terminal của máy và đến project root |
| Ctrl+Space | Nhắc lệnh | triggerSuggest | __ |
| Ctrl+Shf+P | Mở bảng command | quickOpenNavigatePreviousInFilePicker | Nhập command |
| PageUp | Đưa con trỏ về đầu file | cursorPageUp | __ |
| PageDown | Đưa con trỏ về cuối file | cursorPageDown | __ |
| Home | Đưa con trỏ về đầu dòng | cursorHome | __ |
| End | Đưa con trỏ về cuối dòng | cursorEnd | __ |
| Ctrl+G | Di chuyển đến dòng bất kỳ | gotoLine | Nhập số dòng |
| Ctrl+Shf+K | Xoá một dòng | deleteLines | __ |
| Ctrl+C | Copy (Copy dòng) | clipboardCopyAction | Copy dòng không cần bôi đen |
| Ctrl+X | Cắt (Cắt dòng) | clipboardCutAction | Cắt dòng không cần bôi đen |
| Ctrl+L | Bôi đen dòng hiện tại | expandLineSelection | __ |
| Shf+[⬆ ⬇ ⬅ ➡] | Chọn liên tiếp dòng hoặc ký tự | cursor[Row or Column]Select[Navigation] | __ |
| Alt+Shf+[⬇ ⬆] | Copy&Paste 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 |
| Alt+[⬇ ⬆] | Di chuyển 1 dòng lên hoặc xuống | moveLines[Navigation]Action | __ |
| Ctrl+K Ctrl+L | Thu gọn hoặc mở rộng một đoạn code | editor.toggleFold | __ |
| 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 |
| 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 |
| 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 đó |
| Ctrl+F or F3 | Tìm kiếm và tìm kết quả kế tiếp | nextMatchFindAction | __ |
| Ctrl+H | Thay thế | startFindReplaceAction | __ |
| Ctrl+B | Đóng mở Sidebar bên trái | toggleSidebarVisibility | __ |
| 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 |
| Shf+Tab | Lùi 1 tab | outdent | Ngược lại với tab |
| Ctrl+Tab | Di chuyển các tab trong VSCode | quickOpenPreviousRecentlyUsedEditorInGroup | __ |
| Ctrl+U Ctrl+S | Mở hoặc tạo Snippet | openSnippets | __ |
| Ctrl+, | Mở settings | openSettings | __ |
Để 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.
Ở 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ớ
| Key | Mô tả | Command | Ghi chú |
|---|---|---|---|
| Ctrl+K Ctrl+Backspace | Thu gọn tất cả code | editor.foldAll | __ |
| Ctrl+K Ctrl+J | Mở rộng tất cả code | editor.unFoldAll | default |
| Ctrl+W | Đóng tab hiện tại | workbench.action.closeActiveEditor | default |
| Ctrl+Shf+W | Đóng tất cả các tab trừ tab hiện tại | workbench.action.closeOtherEditors | __ |
| Win+Shf+Z | Bật tắt Zen Mode | workbench.action.toggleZenMode | __ |
| Ctrl+[⬆ ⬇ ⬅ ➡] | Chia màn hình ra nhiều màn hình con | workbench.action.splitEditor[Navigation] | __ |
| Ctrl+Shf+[⬆ ⬇ ⬅ ➡] | Di chuyển qua lại các màn hình vừa chia | workbench.action.navigate[Navigation] | __ |
| Alt+N | Tạo file mới nhanh | extension.advancedNewFile | advanced new file Ext |
| Alt+F2 | Đổi tên file hiện tại nhanh | fileutils.renameFile | File Utils Ext |
| Alt+Delete | Xoá file hiện tại nhanh | fileutils.removeFile | File Utils Ext |
1. Sử dụng PowerToys
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é 😊
2. Chèn nhanh 1 Emoji
Sử dụng phím tắt
Windows + .để mở bảng Emoji trên máy nhé.
3. Mở Clipboard
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ầnSettings > Clipboard Setting > Bật Clipboard history.
4. Mở thêm Desktop làm việc
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.
Windows + Tab > Tạo một Desktop mới > Kéo thả những Tab chạy ngầm qua Desktop đó
5. DOSKEY Alias
DOSKEY trên Windows giúp ae tạo ra những Alias như trên terminal MacOS hay Linux. Vd: ga -> git add .
- Tạo một tệp .bat hoặc .cmd bằng các DOSKEY lệnh của bạn.
- Chạy regedit và đi đến HKEY_CURRENT_USER\Software\Microsoft\Command Processor
- 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.
- File alias.cmd có dạng như sau:
DOSKEY ni=npm install
DOSKEY ns=npm start
DOSKEY nt=npm run test
DOSKEY nb=npm run build
