Những công cụ tôi ước giá như mình biết sớm hơn khi bắt đầu học code

Bài đăng này đã không được cập nhật trong 6 năm

Trong thế giới công nghệ, có hàng nghìn công cụ hỗ trợ cho việc code mà mọi người khuyên bạn dùng. Vậy làm thế nào bạn biết được mình nên dùng cái gì? công cụ nào phù hợp nhất cho bản thân?

Với một người chỉ mới bắt đầu code gần đây, một loạt những thông tin như vậy làm tôi khá hoang mang. Tôi hay cài thêm vài extensions không hữu ích lắm trong quá trình phát triển kĩ năng của mình, và không sớm thì muộn tôi thường gặp khó khăn với chúng.

Tôi không phải một chuyên gia giàu kinh nghiệm, nhưng sau một thời gian tôi đã tổng hợp lại danh sách những extensions hữu ích nhất bằng trải nghiệm của bản thân. Nếu bạn bắt đầu học lập trình, tôi hi vọng nó sẽ giúp bạn một phần nào đấy. Nếu bạn là một nhà phát triển dày dặn, hi vọng bạn vẫn sẽ học thêm được điều gì đó mới mẻ từ bài viết này.

Tôi sẽ chia bài viết ra thành hai phần là: Chrome Extensions và Visual Studio Code Extensions. Tôi biết có nhiều trình duyệt web và trình soạn thảo khác nữa, nhưng tôi cá là nhiều công cụ dưới đây cũng có các phiên bản dành cho những nền tảng khác. Vậy nên hãy không bắt đầu một cuộc tranh cãi về sở thích cá nhân ở đây nhé.

Chrome Extensions

Hiện tại tôi có thể tự coi bản thân là một web developer, và đã là một web developer thì chắc hẳn ai cũng phải thường xuyên làm việc với Chrome console (hoặc bất cứ thể loại console của các trình duyệt web khác). Dưới đây là vài công cụ giúp tôi không phải lúc nào cũng kè kè bật console của chrome nữa.

WhatFont - Cái tên nói lên tất cả. Extension này giúp bạn dễ dàng biết tên font chữ mà website ưa thích của bạn sử dụng, từ đó bạn có thể dùng lại font đó cho project của mình.
Pesticide - giúp bạn nhìn thấy đường viền của các <div> và thay đổi CSS. Extension này đã giúp tôi rất nhiều khi tôi bắt đầu làm quen với khái niệm box-model.
Colorzilla - hữu ích trong việc sao chép lại chính xác màu của các website. Nó sẽ giúp copy lại mã màu của bất kì chỗ nào trong website ưa thích của bạn vào clipboard, do đó bạn sẽ không phải mất nhiều thời gian để mò ra một mã màu RGBA phù hợp cho website của mình.
CSS Peeper - extension này rất có ích khi bạn phải nghiên cứu các màu sắc và assets được sử dụng cho một website. Một bài tập kinh điển, đặc biệt là khi bạn bắt đầu học code web, là dựng lại một website mà bạn thấy ngầu. Sử dụng extension này giúp bạn nhìn bảng màu của họ và các assets khác trên website đó.
Wappalyzer - giúp bạn biết nền tảng công nghệ sử dụng trong một website. Bạn đã bao giờ tự hỏi website này sử dụng framework gì hay nó được host bằng dịch vụ nào? Hãy sử dụng Wappalyzer
React Dev Tools - rất có ích trong việc debug một ứng dụng React. Lưu ý là extension này chỉ hữu ích nếu bạn lập trình React thôi nhé.
Redux Dev Tools - extension này giúp bạn debug ứng dụng sử dụng Redux. Lại lưu ý là extension chỉ hữu dụng nếu bạn cài đặt Redux trong ứng dụng của bạn.
JSON Formatter - giúp các file JSON nhìn gọn hơn. Bạn đã bao giờ nhìn thấy một file JSON kinh khủng khiến bạn phải cố gắng tìm xem thông tin mà bạn cần đang được lồng trong những cặp {} nào chưa? Sử dụng extension này sẽ giúp bạn giảm thời gian từ 3 tiếng xuống còn 2 tiếng nếu gặp phải những file JSON như vậy.
Vimeo Repeat and Speed - giúp tăng tốc độ load các video trên Vimeo. Nếu bạn hay xem các video tutorial như nhiều web developer khác, bạn sẽ hiểu việc xem chúng với thời gian nhanh gấp 1.25 lần tốc độ thông thường tiện lợi thế nào. Extension này còn có cả phiên bản dành cho Youtube.

VS Code Extension

Visual Studio Code là lựa chọn của tôi (và cả người dịch bài viết này nữa).

Lập trình viên yêu các trình soạn thảo của họ, tôi cũng không ngoại lệ. Tuy nhiên tôi cá nhiều extension dưới đây cũng có phiên bản dành cho các trình soạn thảo khác. Dưới đây là một vài extension ưa thích của tôi:

Auto Rename Tag - Tự động sửa tên các cặp thẻ HTML. Bạn tạo một thẻ <p>. Bây giờ bạn muốn thay đổi nó cùng với thẻ đóng </p> thành một thẻ khác. Bạn chỉ cần sửa lại một trong hai thẻ và thẻ còn lại cũng sẽ tự động được sửa theo. Về lý thuyết nó sẽ cải thiện hiệu suất của bạn gấp 2 lần!
HTML CSS Support - Hỗ trợ CSS cho HTML document. Extension này giúp bạn có những đoạn syntax được highlight gọn gàng và gợi ý code khiến CSS không còn làm bạn muốn từ bỏ việc code nhiều lần trong ngày nữa.
HTML Snippet - hỗ trợ những đoạn code snippet. Giúp bạn tiết kiệm thời gian đáng kể. Sử dụng extension này cùng với Emmet , bạn sẽ hiếm khi phải viết lại những đoạn mã HTML nữa.
Babel ES6/ES7 - Hỗ trợ màu cho cú pháp của Javascript Babel. Nếu bạn đang sử dụng Babel, extension này sẽ giúp bạn dễ hiểu đoạn code của mình hơn. Nó cũng rất phù hợp nếu bạn muốn sử dụng thêm các tính năng mới của Javascript.
Bracket Pair Colorizer - Tạo thêm màu sắc cho các dấu ngoặc để dễ dàng nhìn ra các block code. Extension này rất tiện lợi cho các bugs rất-hay-gặp-phải khi bạn quên đóng ngoặc.
ESLint - Tích hợp ESLint vào Visual Studio Code. Nó sẽ giúp bạn nhìn ra những gợi ý về bugs khi bạn viết code và giúp bạn có coding style tốt hơn phụ thuộc vào các tùy chỉnh của bạn.
Guides - Tạo thêm các đường kẻ lề trong code của bạn. Các lề kẻ đó sẽ đảm bảo bạn đã đóng ngoặc chính xác.
Javascript Console Utils - Được tạo ra để việc log console dễ dàng hơn. Nếu bạn giống với nhiều developer khác, bạn sẽ thường phải log ra console trong quá trình debug (tôi biết là lẽ ra chúng ta phải sử dụng debugger). Extension này giúp việc viết các câu console.log() dễ dàng hơn.
Code Spell Checker - Kiểm tra camelCase. Ngọn nguồn của nhiều bugs thường xuất phát từ việc bạn gõ tên biến hoặc tên function sai. Ứng dụng kiểm tra chính tả này sẽ kiểm tra các từ ngữ hiếm gặp và sẽ rất hữu ích nếu bạn lập trình Javascript.
Git Lens - Giúp bạn biết được những thay đổi được tạo ra khi nào và bởi ai một cách dễ dàng. Nó rất hữu ích khi bạn muốn đổ lỗi cho ai đó thích hợp khi code không chạy, điều mà rõ ràng không bao giờ là lỗi của bạn.
Path Intellisense - Tự động hoàn thiện đường dẫn file. Ứng dụng này rất tiện lợi khi bạn cần import một vài thứ từ các files khác. Việc điều hướng cây thư mục của bạn chưa bao giờ dễ dàng hơn thế.
Prettier - Tự động format code. Hãy quên đi những ngày bạn phải tự chỉnh lại indent code của bạn để mọi thứ dễ nhìn hơn. Prettier sẽ làm điều đó cho bạn nhanh hơn và tốt hơn bạn rất nhiều. Tôi đặc biệt khuyên các bạn sử dụng extension này.
VSCode-Icons - Thêm icons vào cây thư mục. Nếu việc nhìn vào cấu trúc files làm bạn thấy khó chịu, extension này có thể sẽ hữu ích với bạn. Có các icon cho các loại file giúp bạn dễ dàng phân biệt bạn đang làm việc với file nào.

Tổng kết

Có thể bạn đã có các công cụ yêu thích trong quá trình phát triển kĩ năng của mình. Hi vọng một số extension tôi nêu ra ở trên có thể giúp công việc của bạn hiệu quả hơn.

Tuy nhiên đừng rơi vào một cái bẫy là cài đặt hết tất cả các công cụ bạn nhìn thấy trước khi học cách sử dụng những công cụ bạn đang có, làm vậy có thể làm bạn tiêu tốn rất nhiều thời gian vô ích thay vì chú tâm vào lập trình.

Nếu các bạn thích bài viết và cũng thường cài các extensions để hỗ trợ cho công việc của mình, các bạn có thể để lại tên những công cụ yêu thích của bạn ở dưới mục comment nhé.