Chuyển từ vscode sang (Neo)Vim để code Reactjs nào

Có một vài sự thật trong quá trình code mà chúng ta thường không để ý nhưng nó vẫn đang hiện diện xung quanh ta. Ví dụ như:

• Hầu hết thời gian ta làm việc với dự án thì thời gian đọc code nhiều hơn thời gian viết code.
• Khi đang hăng say gõ code trong file này mà muốn chỉnh sửa, hay xem chỗ khác cùng file hoặc khác file thì thường tốn thời gian để dời tay khỏi home row (là nơi mà 2 ngón trỏ tay trái, phải đặt tại phím F và J) để xử lý. Cho dù bạn di chuyển tay sang phím mũi tên hoặc di chuyển tay ra khỏi bàn phím để cầm dùng chuột thì đều tốn thời gian cả và quan trọng là nó làm bạn bị phân tâm, làm cho dòng code thần sầu mà bạn nghĩ ra bị lạc trôi theo cú chuyển tay. Hazzz, thật buồn quá đi.
• Các IDE (Itergrated Development Environment) như vscode (Visual Studio Code) thì vô cùng mạnh mẽ nhưng khi khởi động lại chậm, tốn RAM, hay bị crash và trông chả hack tí nào.
• Khi ta muốn tìm nhanh thông tin, di chuyển nhanh trong file code và giữa các file code thì lại dùng chuột hoặc phải dùng mấy phím tắt khủng bố của vscode ví dụ Ctrl + Shift + K để xóa dòng chẳng hạn. Trong khi với vim (mình xài neovim/nvim là phiên bản nâng cấp của vim) thì ta chỉ cần gõ dd là xóa dòng và chẳng phải di chuyển ngón tay của mình khỏi hàng home row của bàn phím.

Ngoài ra thì còn nhiều thứ khác nhưng tóm lại là chỉ xung quanh việc làm sao để tăng năng suất làm sao cái tay mình lười nhất có thể trên bàn phím mà vẫn đạt kết quả nhanh nhất theo cách nó phải xảy ra như vậy. Đó chính là lúc mình giới thiệu ngôi sao già cỗi (Neo)Vim đã hơn 40 nồi bánh chưng nhưng vẫn làm mê mệt biết bao nhiêu thánh DEV.

Từ giờ trờ đi trong bài biết khi mình nhắc đến vim, VIM ở đây là Neovim (hay viết tắt là: nvim) nhé mọi người. Nó là project được mở rộng từ VIM gốc và nghe chém là dễ xài hơn VIM.

Bên trên là những lý do mà mình quyết định tìm hiểu vim. NHƯNG nó chỉ là lý do PHỤ thôi. Còn lý do chính mà mình phải qua vim là do một ngày đẹp trời lướt youtube và được gợi ý cho xem video code thần sầu đạt giải nhất của bạn trẻ Hàn Quốc William Lin trong Google Kickstart 2020 trong video này. Và trong video thì thánh này code bằng VIM. Mình thấy ham quá và đã bị chinh phục bởi quá trình thực chiến của VIM nên quyết định nghiêm túc tìm hiểu kỹ hơn và xài extension vscodevim để code vim trong vscode.

Sau bao nhiêu lần cày video youtube và stackoverflow, reddit… thì mình cũng đã setup đủ kiểu cho vscode thành Vim và dùng vim code ngon lành với phím tắt và sự tiện lợi của vim mang lại.

Nhưng thật sự thì khi gõ code trên vscodevim thì cảm giác nó không thật sự nhanh bởi vì nó có sự chậm trễ khi mà con trỏ chuột nó bị lag một chút sau khi gõ xong một từ rồi khi space một cái là lại bị delay một chút. Rồi trông code bằng vscode nó không ngầu, rồi phím tắt của vscode thì hơi bị dài…

Vim có một cộng đồng hỗ trợ với rất nhiều Plugin cài cắm vào giúp biến vim gần như có những tính năng của một IDE ví dụ như plugin coc, fzf, gitgutter, fugitive, theme one dark… và còn nhiều plugin nữa mà từ đó giúp cho quá trình làm việc trên vim không khác gì trên IDE ví dụ với Plugin cài đặt xong thì ta cũng có tính năng gợi ý code hay là nhảy nhanh tới định nghĩa của hàm giúp ta có thể nhanh chóng xem hàm này viết gì. Hoặc là có thể tìm từ trong toàn bộ source code hoặc tìm xem hàm này có mặt ref trong những chỗ nào trong toàn bộ source code, hay xem là file đang làm việc thì chỗ nào bị chỉnh sửa so với file trước trong git… Nói chung là ngon

Thêm nữa là với sự khuyến khích chuyển mình của các thành viên khác trong team teach thì mình quyết định phải thay đổi và chuyển qua code bằng vim trên terminal. Và từ đó Người ra đi đầu không ngoảnh lại. Sau lưng vscode đợi mỏi mòn. Hay Từ ấy trong tôi bừng nắng hạ. Mặt trời vim ấy chói keyboard. Xin lỗi các tác giả vì mình đã chế mấy bài thơ này.

VIM và ưu điểm

Code trên terminal thì có chế độ transparent background với nền màu đen nhìn có cảm hứng code ngay. Cái này trên vscode cũng có extention thì phải.

Vim chia chế độ làm việc và khi mở file lên thì mặc định nó sẽ ở chế độ normal,ngoài ra thì ta còn có chế độ insert và visual. Trước tiên ta đi tìm hiểu ưu điểm của cách chia ra chế độ như thế này.

• normal nghĩa là tại vị trí con trỏ thì sẽ không có thể gõ chữ bình thường và với chế độ normal này thì ta có thể xem,đọc code, văn bản với phím lên xuống gần nhất với hàng phím home row là nơi mà ngón tay để chế độ mặc định. Việc này sẽ giúp cho ta làm được nhiều việc mà không phải thay đổi vị trí bàn tay, ngón tay.
• insert muốn truy cập vào chế độ này thì ta phải nhấn phím i và khi đang ở trong chế độ này thì ta có thể gõ văn bản bình thường như là ở trong các trình soạn thảo văn bản khác.
• visual muốn vào chế độ này thì ta nhấn phím v và mục đích là để chọn một đoạn văn bản để ta có thể xóa, sao chép…

Việc chia ra chế độ này sẽ giúp ta tự tin di chuyển trong văn bản trong chế độ normal mà không phải lo là lỡ tay xóa mất hay thay đổi ký tự nào đó.

Mặc dù vậy nhưng trong chế độ normal ta vẫn có thể xóa ký tự, xóa từ mà không nhất thiết phải vào chế độ insert.

Khi dùng VIM thì sẽ hạn chế tối đa không phải dùng chuột. Tất cả các thao tác trong khi làm việc sẽ được thực hiện thông qua bàn phím và hệ thống phím tắt giúp cho việc di chuyển trong file và giữa các file làm việc một cách nhanh nhất và hiệu quả nhất

Mặc dù có một hệ thống phím tắt vô cùng lớn để đáp ứng nhu cầu vô cùng phong phú của người dùng. NHƯNG để học hệ thống phím tắt thì lại vô cùng logic và lý do là vì hệ thống phím tắt của VIM giống như là một hệ thống trong đó thì các phím tắt có thể được tự suy ra trên một số phím chức năng cơ bản.

Ví dụ phím d là phím chức năng xóa, phím w là di chuyển nhảy từ này sang từ khác và ta có thể kết hợp bấm vô cùng phong phú đa dạng như:

• daw delete a word (xóa một từ)
• d2w xóa 2 từ
• …

Cài đặt (Neo)vim

Chọn terminal để cài vim

Hiện tại thì mình đọc trên mạng và xài terminal là Alacritty để làm terminal để code vim và terminal để chạy lệnh là gnome-terminal mặc định của Ubuntu 20.04 LTS. Lý do xài Alacritty vì khi đang tìm hiểu về vim thì có đọc được bài này có recommend dùng terminal Alacritty với lý do cross platform (MacOs, Win, Ubuntu) và tận dụng sức mạnh của GPU mà máy laptop mình có card đồ họa rời 2GB vậy thì ngu gì không thử. Và sau đó thì hài lòng với sự lựa chọn này.

À mà vì sao mà mình dùng Ubuntu thì cũng là một câu chuyện khác và mình sẽ viết một bài chuyển nhà sang Ubuntu từ Window sau nhé, giờ xin nợ

• Khi cài đặt Alacritty thì mình cứ cài bình thường theo link github hướng dẫn nhưng sau đó thì phải tải file cài đặt cấu hình cho nó mà phải tải file cấu hình mặc định cho từng phiên bản là alacrity.yml từ github về máy tính và sau đó bắt buộc phải tự tạo folder rồi bỏ file cấu hình đó vào. Tùy từng hê điều hành mà sẽ đặt tại từng chỗ khác nhau. Như Ubuntu thì file cấu hình đặt tại $HOME/.config/alacritty/alacritty.yml.
• Sau đó vào file alacritty.yml ở bên trên và xóa dấu # - kiểu như uncomment để bật cấu hình mong muốn lên. Trong đó thì quan trọng nhất là cấu hình về kích thước terminal, độ trong transparent của background, rồi font chữ. Riêng mình thì chọn font chữ Cascadia Code tải cho Ubuntu tại đây. Ưu điểm lớn nhất của font chữ này là gõ tiếng việt không bị lỗi hiển thị méo mó ký tự khi gõ tiếng việt khi có dấu trong terminal và có ligatures như hình

  

  Nhưng mình chưa làm được nó hiển thị ra trên terminal của mình. Bạn nào có kinh nghiệm comment giúp. Còn bên dưới là khoe hàng trá hình màn hình code alacritty terminal hàng ngày và mình đang dùng terminal này để viết bài bằng markdown file luôn.

Trong hình thì mình có folder với plugin nerdtree nhưng thật sự ít xài cái này. Có chia màn hình ra 2 cột, rồi có thể xem git branch, xem status git của file đang chọn nhanh chóng với plugin gitgutter. Có transparent background cho terminal. Rồi khi con trỏ cursor nó di chuyển vào chữ màu gì thì nó cũng chuyển sang màu đó luôn, ví dụ trong hình trên là con trỏ có màu xanh lá cây vì đang ở chữ có màu xanh lá cây.

Thiết lập terminal code trong mơ

Cài đặt neovim (nvim)

Sau khi chọn mặt gửi vàng ở terminal rồi thì ta sẽ tiến hành cài vim thôi. Và như mình đã nói bên trên thì vim ở đây là Neovim nhé. Như mình xài Ubuntu thì cứ theo lệnh là sudo apt install neovim vậy là xong. Sau khi cài thì vào termimal và gõ nvim để vào vim và lệnh nvim -v để biết version của nvim là gì. Để vào nvim thì ta mở terminal lên. Ở đây có thể là bất cứ terminal nào trong máy tính,có thể là promt hay powershell bên window hay gnome-terminal bên Ubuntu. Nhưng mình thì xài terminal alacritty do đó nên sẽ mở nó lên. Sau đó thì dùng lệnh nvim để vào trong trình soạn thảo nvim.

Bạn sẽ vô cùng thất vọng cho lần đầu tiên vào nvim vì trông nó chả có gì hấp dẫn. Tất cả chỉ là màn hình đen ngòm. Không sao cả. Ta sẽ đi trang bị tận răng cho nó trở thành dream IDE.

Đầu tiên là kiểm tra xem file config nvim nó nằm ở đâu. Vậy thì khi đang ở trong nvim bạn gõ Shift + ; để vào chế độ gõ lệnh bên góc trái bên dưới màn hình terminal sẽ hiện ra dấu hai chấm :. Từ đây thì bạn gõ lệnh này là :echo stdpath('config') và sau đó sẽ hiện ra kết quả chính là nơi mà nvim sẽ load toàn bộ thiết lập cấu hình cho nó khi sử dụng.

Cài đặt Plugin cho vim

Cài đặt xong neovim thì cũng mới chỉ là bắt đầu thôi vì thực sự thì nó cũng chỉ là text editor giống nodepad thôi có điều là có nhiều phím tắt bá đạo và trình làm việc ngon lành hơn.

Nói vậy thôi chứ các cao thủ xài vim thì thường cứ thế mà xài với bàn phím cơ xịn thôi. Còn anh em dev cày quốc đầu óc ngoài code ra còn cơm áo gạo tiền thì nhiều khi đang code mà quên. Do đó cộng đồng vim đã sáng tạo ra vô cùng nhiều Plugin dùng để giúp đỡ cho quá trình code nhanh chóng thuận tiện hơn. Vậy nên cài đặt xong nvim thì mới chỉ là bước đầu thôi. Tiếp theo ta sẽ trang bị cho nvim trở thành IDE thôi nào.

Để cài đặt Plug in thì cần phải cài đặt trình quản lý Plug-in và trình quản lý mà mình đang dùng là vim-plug hay gọi là Plug cho nó gọn. Mình chọn cái này vì đơn giản là khi đi tìm hiểu về vim thì thấy đa số những dotfiles mà share trên mạng thì họ xài vim-plug nên mình cũng xài luôn cho dễ copycat.

Tạo config để chứa toàn bộ thiết lập cho neovim.

• Tạo folder chứa Neovim config file mkdir ~/.config/nvim
• Tạo init.vim file chứa toàn bộ thiết lập touch ~/.config/nvim/init.vim

Để cài đặt vim-plug thì vào link này để tham khảo. Với mình xài neovim trên ubuntu thì sẽ mở terminal lên và chạy lệnh curl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim Vậy là xong vim-plug đã được cài đặt thành công

Nghĩa là file plug.vim đã được tải về và cài đặt ok và sẽ tự động load khi khởi động neovim để mà còn quản lý tất cả các Plug-in khi mình xài vim.

Tiếp theo ta sẽ vào file init.vim mà ta đã tạo từ trước bằng lệnh nvim ~/.config/nvim/init.vim và sẽ tiến hành thiết lập cho Neovim.
Trong file init.vim sẽ bao gồm tất cả thiết lập bao gồm

• Quản lý Plug-in bao gồm themes và cấu hình theme
• Quản lý cấu hình cho các Plug-in
• Quản lý cấu hình cho neovim ví dụ set backspace, set encoding, searching…
• Tạo và quản lý phím tắt gán cho các Plug-in và các chế độ trong Neovim đây là tính năng rất quan trọng giúp tăng tốc độ làm việc và hiệu quả trong vim

Ngoài ra thì với Plug-in coc thì ta có thể thêm những thiết lập khác cho nó trong file coc-settings.json. File này sẽ được tự động tạo ra khi ta ở trong nvim và dùng lệnh :CocConfig thì ngay lập tức nvim sẽ tạo file này và mở ra một cửa sổ mới cho ta chỉnh sửa nó. Xong rồi thì ta save & quit với :wq thôi.

Còn nợ video thiết lập nvim để biến nvim thành IDE. Khi nào thu xếp quay xong sẽ upload nhé

Flow cơ bản làm việc trong nvim

Khi làm việc với nvim thì flow làm việc hiển nhiên sẽ khác so với khi làm việc trên các IDE khác vì nvim chủ yếu dùng phím tắt.

Về bản thân mình thì flow làm việc hiện tại thì mình mô tả như sau:

1. Mở folder dự án lên và click chuột phải chọn Open in terminal.
2. Sau khi đã mở terminal mặc định lên thì gõ lệnh alacritty để mở terminal alacritty lên.
3. Sau đó bấm phím tắt Ctr + Shirt + T để mở tab thứ 2 của terminal lên và chạy dự án. Ví dụ mình làm dự án này bằng Hugo thì sẽ dùng lệnh hugo server để chạy dự án. Còn nếu dùng react thì có thể dùng lệnh npm start hoặc yarn start
4. Mở browser lên xem dự án chạy lên ngon lành không. Như vậy là xong cơ bản.
5. Quay trở lại terminal alacritty mà mình đang và làm việc chính với source code và bắt tay vào việc
6. Nếu là project mới thì mình sẽ dùng Nerd tree để xem cây thư mục dự án với lệnh F3 để toggle lên và dùng phím j đi xuống, k đi lên để vào từng thư mục.
7. Nếu muốn tương tác với project như là thêm, xóa, file, folder thì tại nơi con trỏ đang đứng ta nhấn phím m để truy cập vào menu tương tác hiện lên góc dưới bên phải màn hình terminal.
8. Menu này bao gồm các hành động mà mình có thể làm như tạo, xóa file, folder. Ta cũng dùng phím j, k để di chuyển lên xuống. Ngoài ra còn dùng phím tắt để tạo, xóa file nhanh

Lưu ý để rename thay đổi tên của folder hay file thì ta sẽ di chuyển con trỏ tới folder, file cần đổi tên và dùng lệnh (m)ove the current node

9. Thường khi làm project mà ta quen với cấu trúc folder rồi thì sẽ không dùng nhiều nerd tree nữa mà ta sẽ dùng lệnh mở nhanh file và di chuyển nhanh với những flow mô tả như sau:

• Trong setting của nvim thì ta đã thiết lập sẵn hệ thống map phím tắt. Trong vim có một phím đặc biệt gọi là leader key phím này có tác dụng là sẽ kết hợp thêm phím tiếp theo tạo ra một key bindings.
  • Tùy vào sở thích mỗi người sẽ map phím leader key này thành một phím nào đó trên bàn phím. Mặc định phím leader là dấu phẩy ,. Mình map leader key thành phím space. Lý do là nó dễ gõ nhất
• Trong terminal alacrity thường chia làm 2 màn hình trái, phải để một lúc ta làm việc với 2 file để xem qua lại, ví dụ làm file html và css. Khi đó việc di chuyển qua lại giữa hai màn hình là vô cùng cần thiết. Và mình map di chuyển qua lại trái, phải giữa hai màn hình là phím Ctrl + h qua trái và Ctrl + l qua phải. Đồng thời map Ctrl + j xuống dưới và Ctrl + k lên trên. Ngoài ra map <leader>w là chia đôi màn hình theo chiều dọc và <leader>W là chia đôi màn hình theo chiều ngang.

10. Khi làm việc trong dự án thì cái bạn quan tâm ngay đầu tiên có thể là:

• Làm sao mở nhanh file
• Làm sao di chuyển nhanh trong file tới vị trí bất kỳ với ít phím nhất, nhanh nhất
• Chuyển đổi làm việc trên từng file nhanh
• Tìm nhanh đến chỗ nào trong file đã bị thay đổi so với phiên bản trước… Bản thân nvim thì hạn chế trong những việc này. Nhưng mà chúng ta đã cài plugin vào nvim và dựa vào những plugin này sẽ giúp cho chúng ta mau chóng muốn làm những cái mà mình muốn làm một cách nhanh nhất với hệ thống phím tắt ngắn nhất và thuận tiện nhất cho từng người sử dụng.