Hướng dẫn sử dụng Dyno File Utils – VSCode Extension

Mình vừa tạo ra một vscode extension mang tên là “Dyno File Utils” và nó đã giúp mình tiết kiệm rất nhiều thời gian, tăng hiệu suất làm việc lên nhiều lần. Hãy cùng mình tìm hiểu nó là gì và cách sử dụng extension này sao cho hiệu quả nhé 😎

Let’s get started !

Dyno File Utils VSCode Extension

1. Dyno File Utils là gì?

Dyno File Utils là một VSCode Extension giúp việc thao tác với file / folder trên vscode của bạn trở nên thuận tiện hơn rất nhiều. Nó được mình phát triển bởi ngôn ngữ Javascript, dựa trên VScode API.

Lý do Dyno File Utils ra đời:

Mình đã quen dùng Vim, nên các thao tác của mình chủ yếu là với bàn phím. Việc sử dụng chuột để tìm kiếm 1 file, xoá, tạo file bên cây thư mục của vscode làm mình rất mất thời gian.

Sau đó, mình ta tìm thấy một extension là File Utils của Steffen Leistner, nhưng nó vẫn còn nhiều thứ hoạt động không như ý mình. Vì thế mình đã mài mò cách viết một extension trên VSCode. Và Dyno File Utils đã ra đời 😎 (Mình sẽ có bài viết hướng dẫn cách xây dựng một extension trên vscode nhé hehe).

Tải extension của mình tại:

  • Cài trực tiếp trên VSCode (Ctrl + Shift + x) -> Tìm “Dyno File Utils” -> Install

Fun fact: Mình chợt ra ý tưởng và viết nó ngay trong ngày 🤣

2. Tính năng

Một vài tính năng của Dyno File Utils:

  • Thao tác với file mà không cần dùng đến chuột (sử dụng phím tắt hoặc command) 🐭
  • Tạo nhanh một hoặc nhiều file / folder tại vị trí bất kỳ, tại root dự án, tại cùng folder với file đang mở.
  • Thêm nhanh nhiều file / folder, folder lồng nhau, file lồng trong folder 🤣
  • Thay đổi tên file hiện tại đang mở.
  • Di chuyển, sao chép file đang mở tới vị trí khác.
  • Xoá file / folder nhanh chóng.
  • Tạo nhanh, copy cấu trúc thư mục thường dùng của bạn.

Tính năng dự tính phát triển thêm

  • Chọn xoá nhiều file / folder
  • Xoá nhanh node_modules
  • Thay đổi tên thư mục
  • Auto update import khi thay đổi tên file / folder.

2. Cấu hình cài đặt

Bạn có thể cài đặt cấu hình cho extension này bằng 2 cách:

  • Vào Settings (Ctrl + ,) –> Search “Dyno File Utils”
  • Chỉnh sửa file Settings.json (Vào settings) –> chọn logo script bên gốc phải màn hình –> Thêm các cấu hình bên dưới vào file.
Dyno File Utils Configuration
Dyno File Utils Configuration

dynoFileUtils.confirmDelete - boolean: Có mở thông báo xác nhận xoá file / folder hay không. Mặc định true (là có), còn false nó sẽ tự xoá mà không hỏi (Yên tâm file sẽ được đưa vào thùng rác). Bạn cũng có thể tắt bằng cách chọn “Yes. Don’t show again” trong lần đầu xoá file.

confirm delete

dynoFileUtils.folderExclude - [String]: Thêm các folder mà bạn không muốn extension này thực hiện tìm kiếm trong dự án.

dynoFileUtils.separator - string: dấu phân cách giữa các file / folder khi bạn muốn tạo nhiều file / folder cùng lúc (mặc định là dấu phẩy , không phải khoảng trắng vì ext cho phép bạn tạo file có khoảng trắng).

dynoFileUtils.openFile – boolean: Có mở file lên editor khi tạo file hay không (mặc định là có). Mặc định VSCode sẽ mở đè các file lên cùng một 1 editor. Bạn có thể tắt tính năng này bằng cài đặt "workbench.editor.enablePreview": false.

dynoFileUtils.showPopupTitle - boolean: Có hiển thị title cho popup hay không. Mặc định là có, bạn có thể tắt nhìn cho gọn.

dynoFileUtils.showPopupTitle

dynoFileUtils.templates [Object]: định nghĩa các mẫu dự án mà bạn muốn tạo, tính năng rất hữu dụng khi bạn có nhiều mẫu project hoặc các file hay dùng chung có các project khác nhau. Bạn có thể tạo thêm nhiều mẫu khác bằng cách thêm object vào mảng đó. Có 2 tính năng chính:

  • folderPath (khi isPattern: false): Bạn tạo sẵn một folder chứa các file / folder cấu trúc của template. Copy đường dẫn và điền vào folderPath và đặt isPattern: false. Nó sẽ copy tất cả các file / folder trong template đó vào dự án hiện tại của bạn. (Lúc này có thể bỏ trống pattern).
  • pattern (khi isPattern: true): Bạn sẽ tạo sẵn một pattern như cách bạn dùng chức năng New Items. Tuy nhiên điểm yếu của nó là chỉ có thể tạo các file / folder rống. (Lúc này có thể bỏ trống folderPath).

3. Hướng dẫn sử dụng

Lưu ý: bạn cần mở một project. Extension không hoạt động khi không có folder root nào.

Cách 1: Sử dụng qua Command Palette:

  • Mở Command Palette (Ctrl + Shf + P).
  • Tìm kiếm “File Utils” hoặc tìm tên chức năng vd: “New Items”
  • Chọn 1 trong các command và thực hiện.
Command Palette

Cách 2: Sử dụng phím tắt (Keyboard Shortcut):

  • Mở Keyboard shortcut (Ctrl+k Ctrl+s).
  • Tìm “File Utils”
  • Thêm keybidding của bạn vào cho từng chức năng. Bạn cũng có thể dùng các shortcut mặc định của nó.
Keyboard Shortcut

4. Demo

Tạo file / folder

Tạo 1 file / folder. Bạn có thể tạo file trong folder:

Tips: khi tìm kiếm, bạn không cần phải gõ chính xác các cấp thư mục, bạn chỉ cần gõ tắt cho từng cấp.

Tạo file / folder

Tạo nhiều file, folder. Cách nhau bởi seperator trong cài đặt của bạn (mặc định là ,). Ví dụ, bạn nhập như sau:

input.html, style.css, script.js, public/styles/scss/index.scss, public/lib/js/, public/lib/css/

Kết quả sẽ như sau:

/demo
├── public
│   ├── lib
│   ├── styles
|   |---|-- scss
|   |-------|-- index.scss
│   └── js
│   └── css
├── index.cpp
├── index.scss
└── index.ts
Tạo nhiều file / folder

Đổi tên và xoá một file

Đổi tên và xoá một file

Di chuyển, sao chép file

bwrirlr41niyvut6vq7l

Tạo dự án với template

ynqfagzya8p9k1bsheru

Tóm tắt tính năng

Dyno File Utils features

Tạm kết

Hy vọng Dyno File Utils extension sẽ giúp ích cho bạn trong quá trình làm việc. Nếu có bất kỳ thắc mắc hoặc báo cáo bug gì về extension này thì bạn có thể đặt Issues qua Github Repo này.

Tải extension của mình tại:

  • Cài trực tiếp trên VSCode (Ctrl + Shift + x) -> Tìm “Dyno File Utils” -> Install

Cảm ơn mọi người đã đọc bài viết này ❤

Bạn có thể tham khảo thêm:

Để lại một bình luận nhé