Hướng dẫn cài visual studio để code react
Không biết mọi người sử dụng Code Editor nào để viết ứng dụng React? Bản thân mình thì trung thành với Visual Code (mọi người hay viết tắt là vscode). Đây là trình code editor nhỏ gọn, nhưng lại nhiều tính năng, được hậu thuẫn bởi ông trùm Microsoft. Show Điều mình thấy tâm đắc nhất ở vscode đó chính là kho extension hấp dẫn, cũng toàn miễn phí cả. Nếu bạn đang sử dụng VS Code thì mình khuyên nên thử các extension dưới đây, tăng hiệu suất công việc lên đáng kể đấy. Trước khi mình giới thiệu các extension, mình sẽ nói qua cách cài đặt extension trong VS Code đã nhé. Cài đặt extension trong VS CodeVisual code tích hợp extension market luôn trong ứng dụng, nên việc cài đặt extension rất đơn giản. Bạn chỉ vào biểu tượng extension, gõ tên extension muốn cài đặt -> chọn extension -> nhấn nút install. Thông thường thì sau khi cài xong là bạn có thể sử dụng được luôn. Tuy nhiên, cũng có một vài ngoại lệ, bạn cần khởi động lại VS Code thì extension mới có hiệu lực. ESLintĐây là tiện ích mà có lẽ hầu như ai cũng nên cài đặt. Nó giúp cho mã nguồn của bạn chất lượng hơn, hạn chế những lỗi tiềm tàng. Về cơ bản thì extension này đơn giản là tích hợp thư viện ESLint vào VS Code. Nếu bạn chưa biết ESLint là gì, mời bạn đọc tài liệu này. Extension này sử dụng thư viện ESLint được cài đặt trong thư mục workspace mà bạn đang mở. Nếu mà thư mục này không có thì nó sẽ tìm thư viện ESLint trong máy tính. Nếu bạn chưa cài đặt ESLint thì đơn giản gõ lệnh sau để cài: npm install eslint --save-dev Open native terminalViệc phải duyệt qua lại giữa các thư mục (sử dụng lệnh “cd Bạn có thể mở terminal ở bất kỳ đâu, chỉ đơn giản là chuột phải và chọn ” Open in native terminal (current folder)” hoặc “Open in native terminal (root folder)“. Tham khảo việc làm React hấp dẫn rên TopDev React PropTypes GenerateViệc phải thêm các propTypes thủ công rất thời gian. Tiện ích này sẽ tự động tạo propTypes. Bạn chỉ việc chọn component và nhấn tổ hợp phím ” ctrl + shift + alt + p”. Tiện ích này khá giống với ReactPropTypes trong Jetbrains’s Platform. Reactjs code snippetsMỗi khi bạn tạo một file mới, thông thường bạn sẽ phải tự thêm các component skeleton, component có thể là một class, function, hooks, redux… Tiện ích này sẽ giúp bạn tạo tất cả các đoạn mã đó chỉ với một nhấp chuột. Reactjs code snippet có sẵn các đoạn mã cho React dựa trên babel-sublime-snippets package. Reactjs code snippets có khoảng 50 đoạn mã khác nhau, hỗ trợ 4 ngôn ngữ (file extensions):
VSCode React RefactorBất kể dự án nào, viết bởi ngôn ngữ gì thì đều nên viết code thật clean, tuân thủ các nguyên tắc viết code. Với dự án React cũng vậy. Nếu một ngày, bạn nghĩ mình cần phải refactoring lại mã nguồn dự án thì đây chính tiện ích dành cho bạn. Một vài tính năng hữu ích của tiện ích này:
Như vậy là mình đã giới thiệu xong 5 vscode extensions hữu ích. Bạn có sử dụng các vscode extensions trên không? Ngoài ra, còn extension nào hay ho nữa không? Hãy để lại bình luận ở bên dưới nhé. Nhiều bạn hay hỏi mình code bằng tool gì, cài đặt ra sao. Do vậy, hôm này mình hướng dẫn các bạn cách setup Visual Studio Code, cài đặt những extension xịn xò nhen. Visual Studio Code là cái gì cơ?Nếu từng code C#, hẳn bạn cũng biết Microsoft có 1 cái IDE khá là nặng và bự mang tên Visual Studio. IDE này khá ngon lành, đủ chức năng, mỗi tội rất nặng, cài hơi lâu, mỗi lần bật là con lap già nhà mình lại rên rỉ. Khác với Visual Studio, Visual Studio Code là 1 text editor khá mới nhưng free, chạy được trên nhiều hệ điều hành. Tuy chỉ là text editor nhưng ta vẫn có thể compile, run, debug code trên VS Code, không thua gì cái IDE xịn. Vừa nhẹ, vừa free, lại mạnh mẽ, nên dân web developer như mình rất khoái dùng VS Code. Để bắt đầu, các bạn có thể vào đây để tải nha: code.visualstudio.com Nhớ đừng tải nhầm Visual Studio nha, kẻo bán nhà đóCài đặt theme, font và icon cho ngầuSau khi đã cài xong VS Code, bạn bấm vào mục Extensions bên góc trái, bắt đầu gõ và tìm extension rồi cài thôi ha. Đầu tiên, tụi mình sẽ cài theme, font, icon linh tinh trước. Bạn nên cài thêm 1 số theme để nhìn cho dịu mắt. Cá nhân mình thì thich dùng theme Dracula, màu xanh xanh hường hường tím tím, nhìn lâu hoặc code buổi tối cũng không mỏi mắt. Bên cạnh đó, bạn cũng nên tải thêm 1 số set-icon như vscode-icons, các icon này sẽ giúp bạn nhìn vào danh sách thư mục và dễ nhận biết đâu là folder, file nào là file gì v…v Tiếp theo, bạn nên cài font thuận tiện cho việc viết code. Cá nhân mình dùng Fira Code (github.com/tonsky/FiraCode). Cài xong, bạn vào setting đổi font thành FiraCode, sau đó bật fontLigature lên luôn nha. Bật cái này lên sẽ giúp gom nhóm mấy cái như ==, != thành 1 kí tự, giúp não bộ xử lý nhanh hơn, đọc code cũng nhanh hơn luôn. Một số extension nên dùng cho mọi devSau khi cài đủ thứ, VSCode trông cũng khá đẹp rồi, giờ chúng ta cài thêm 1 số Plugin cho việc Code nào:
Những extension hay ho cho dân làm webTiếp theo, đây là những extension mà dân làm web tụi mình hay dùng. Đa phần những extension này giúp tiết kiệm thời gian, để mình code nhanh hơn, mượt mà hơn.
Ngoài ra, tuỳ vào ngôn ngữ/framework đang dùng mà các bạn có thể cài thêm Code Snippets hoặc VSCode Extension cho ngôn ngữ đó. Bản thân mình code từ React tới Angular, từ Golang tới Elixir nên cài đủ thứ luôn. Đống VSCode Extension tả pí lù trong máy mình. Dùng một mình VS Code nhưng chơi được 3-4 ngôn ngữNgoài ra, còn 2 extension hay ho viết bằng AI, giúp bạn code nhanh hơn nữa (gần như viết code phụ bạn luôn). Mình giới thiệu trong vlog Youtube bên dưới nha. Phải xem clip demo mới thấy được sự bá đạo của tụi nó hihi. Tạm kếtTrong bài này, mình đã hướng dẫn các bạn cách cài VSCode, cũng như những extension bá đạo mà các bạn nên dùng rồi. Làm theo hướng dẫn, các bạn sẽ có 1 bản VS Code khá mạnh, đủ xài để code web nhé. Nếu các bạn có kinh nghiệm sử dụng, có extension nào hay muốn chia sẻ cho anh em thì cứ comment phía dưới nhen. |