Skip to content

dynonguyen/vscode-tips

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tối ưu hoá công việc trên Visual Code


🥰 MÔ TẢ

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. 😉


⚒ Các Extension mình đã và đang dùng

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.

🔗 Link tải Extension

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é.

🔗 Link tải bản gốc

🔗 Link tải bản của Evondev

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é 😊

🔗 Link tải Extension

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è 😉

🔗 Link tải Extension

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é.

🔗 Link tải Extension

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 😗.

🔗 Link tải Extension

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"

🔗 Link tải Extension

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ì 🤩

🔗 Link tải Extension

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.

🔗 Link tải Extension

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.

🔗 Link tải Extension

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.

🔗 Link tải Extension

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 đó.

🔗 Link tải Extension

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).

🔗 Link tải Extension

🔗 Tìm hiểu thêm về Prettier

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.

🔗 Link tải Extension

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é 😋

🔗 Link tải Git Blame

🔗 Link tải Git Lens

🔗 Link tải Git History

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.

🔗 Link tải Extension

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ì.

🔗 Link tải Extension

💥 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.

🔗 Link tải Extension

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.

🔗 Link tải Extension

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.

🔗 Link tải Extension

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.


🔗 Link tải Material Icon Theme

🔗 Link tải vs-icons

23. Path Intellisense

Ext này sẽ auto suggest đường dẫn khi bạn gõ đường dẫn.

🔗 Link tải Extension

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.

🔗 Link tải Extension

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.

🔗 Link tải Extension

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.

🔗 Link tải Extension

27. SCSS Formater

Ext giúp format code css và scss

🔗 Link tải Extension

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 😎

🔗 Link tải Extension

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.

🔗 Link tải Extension

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 đó.

🔗 Link tải Extension

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.

🔗 Link tải Extension

💥 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é.

🔗 Link tải Tabnine

🔗 Link tải Github Copilot


⚙ Các cài đặt Visual Code

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:

  1. Vào phần cài đặt VSCode -> chọn Open Setting (JSON) bên gốc phải màn hình.

  2. 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

🔗 Link tải Font

💥 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": true
3. Format

Lưu lại khi save (Format on Save)

"editor.formatOnSave": true

Chọ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ì space
4. 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)

🔗 Link tìm hiểu thêm API VSCode

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 tag
9. Ẩ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

🐣 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 Snippet hoặc dùng tổ hợp phím Ctrl+U Ctrl+S.

  • 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).

  • 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"
},

📝$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

🐣 Ae có thể snippet generator website để tạo snippet nhanh chóng nhé.

🔗 Link Snippet VSCode API 🔗 Link Snippet Generator

⌨ Các shortcut hữu dụng trong Visual Code

⚙ Default Shortcut

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 Shortcut

Để 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

🌞 Một vài tips cho người dùng Windows

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é 😊

🔗 Link tải PowerToys

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ần Settings > 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

🐱‍🐉 Kết quả

About

Tối ưu hoá công việc trên Visual Code

Topics

Resources

Stars

Watchers

Forks