Tối ưu Visual Studio Code Phần 1 – 30 Extension VSCode tăng hiệu quả công việc

Visual Studio Code (VSCode) là một text editor cực kỳ thông minh và được cộng đồng lập trình viên yêu thích và sử dụng, đặc biệt là rất hữu dụng cho anh em website developer.

Bài viết này sẽ tổng hợp các cách tối ưu Visual Studio Code và các extension hữu ích mà mọi người có thể tham khảo để code nhanh hơn, có cảm hứng làm việc hơn và đạt hiệu suất làm việc cao hơn nhé. 😘

Tối ưu visual studio code

Phần I. 30 Extension Visual Studio Code mình đã và đang dùng

VScode Extension là các tiện ích mở rộng được tích hợp vào trong VSCode để hỗ trợ trong công việc rất tốt. Tuy VSCode chỉ một code editor như nếu ta tích hợp đầy đủ các Extension thì nó chẳng khác gì một IDE mạnh mẽ cả.

1. Visual Studio IntelliCode

Extension này hình như mặc định đã được cài thì phải. Còn nếu mọi người ai bị mất thì có thể cài lại nhé. Nó sẽ suggest code cho mọi người code nhanh chóng hơn nhé.

Visual Studio IntelliCode
Visual Studio IntelliCode Extension

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

Dracula Theme
Dracula Theme

🔗 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 mọi người đâ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é 😊

Advanced-new-file Extension
Advanced-new-file

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

File Utils
File Utils 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.

Auto rename tag
Auto rename tag

🔗 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”.

Autoprefixer Extension
Autoprefixer Extension

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

Better Comment Extension
Better Comment

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

Bracket Pair Colorizer 2 Extension
Bracket Pair Colorizer 2

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

Code Spell Checker
Code Spell Checker

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

Code Highlight Extension
Code Highlight

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

EditorConfig for VS Code
EditorConfig for VS Code

🔗 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 Extension

14. Prettier – Code Formatter

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

Prettier - Code Formatter Extension
Prettier – Code Formatter

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

 ES7 React/Redux/GraphQL/React Native Snippet
ES7 React/Redux/GraphQL/React Native Snippet

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

Git Blame Extension
Git Blame Extension

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

Highlight Matching Tag
Highlight Matching Tag

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

htmltagwrap extension
htmltagwrap extension

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

indent-rainbow
indent-rainbow

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

JavaScript (ES6) code snippet
JavaScript (ES6) code snippet

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

Live Server
Live Server

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

Material Icon Theme
Material Icon Theme

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

 Path Intellisense
Path Intellisense

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

Project manager Ext
Project manager Extension

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

React PropTypes Generate
React PropTypes Generate

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

REST Client
REST Client

🔗 Link tải Extension

27. SCSS Formatter

Ext giúp format code css và scss.

SCSS Formatter
SCSS Formatter

🔗 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 😎

Power mode
Power mode

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

Import cost
Import cost

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

Bookmarks
Bookmarks

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

Setting Sync
Setting Sync

🔗 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é. Thời gian tới mình sẽ viết một bài viết review về 2 công nghệ này nhé 😎

🔗 Link tải Tabnine

🔗 Link tải Github Copilot

Phần 2. Tối ưu Visual Studio Code

Phần 2 này mình sẽ viết về các cài đặt để Tối ưu Visual Studio Code sao cho hiệu quả, ngoài ra còn những phím tắt hữu dụng trong VSCode nữa. Mọi người đoán xem nhé.

Xem tiếp Tối ưu visual studio code phần 2 – 10 cài đặt và shortcut hiệu quả.

Tạm kết

Các Extension trên tuy rất hay ho và hữu dụng nhưng mọi người thấy cài những cái cần thiết thôi nha. Cài nhiều thì máy dễ bị giật lag, còn máy trâu rồi thì mọi người khỏi lo nha.

Mình tạm kết phần 1 ở đây thôi. Về cài đặt và các phím tắt hay ho khác mình sẽ trình bày trong phần 2 nhé. Cảm ơn mọi người đã đọc bài viết của mình ❤

Bạn có thể đọc thêm:

Give a Comment