hướng dẫn sử dụng Brackets

Hướng dẫn sử dụng Brackets toàn tập cho newbie11 phút đọc

Đối với những bạn mới bước chân vào con đường lập trình web thì việc chọn ra cho mình một công cụ viết code có cách sử dụng đơn giản, giao diện đẹp và đầy đủ chức năng là điều không hề dễ dàng.

Cùng với sự phát triển của công nghệ nhiều code editor ra đời như Brackets, Atom, Sublime Text…vv.Mỗi code editor đều có một ưu điểm và nhược điểm riêng.

Tuy nhiên sau khi sử dụng qua nhiều code editor thì mình nhận thấy Brackets là phần mềm hỗ trợ soạn thảo code số một cho lập trình viên web hiện nay.Để biết lý do tại sao thì chúng ta cùng tìm hiểu cách sử dụng brackets và những tính năng vượt trội của nó nhé.

Gợi ý : Sau serie hướng dẫn về cách sử dụng code editor Brackets này sẽ là serie hướng dẫn về HTML & CSS.Hai serie này có quan hệ mật thiết với nhau do đó bạn nên học cả hai nếu là newbie.Hãy tham khảo bài sau để biết nội dung của serie tự học HTML & CSS cơ bản.

Giới thiệu serie tự học HTML & CSS cơ bản cho newbie

Brackets là gì ? Tại sao nên sử dụng Brackets ?

Brackets là phần mềm mã nguồn mở được tạo nên bằng ba ngôn ngữ chủ yếu là HTML, CSS, và Javascript.Nó là phần mềm được tạo nên từ ngôn ngữ web và hỗ trợ làm web duy nhất trên thế giới.

Do là phần mềm mã nguồn mở và được tạo nên bằng ba ngôn ngữ phổ biến nhất trên thế giới nên cộng đồng tham gia phát triển những Extension và Theme cho nó ngày càng tăng.

Công ty đứng sau phát triển Brackets là gã khổng lồ Adobe nên bạn yên tâm về vấn đề bảo mật cũng như việc cập nhật phần mềm sẽ được diễn ra thường xuyên.

Thêm nữa dữ liệu của Brackets được quản lý bởi Github cái tên không còn xa lạ với dân lập trình chuyên nghiệp.Dữ liệu sẽ luôn an toàn và có thể download chỉnh sửa tùy ý nếu bạn biết về code.

Nói tóm lại thì Brackets có những ưu điểm sau đáng để chúng ta ít nhất phải sử dụng brackets thử một lần trong đời :

  • Phần mềm nhẹ nên cho tốc độ xử lý cao
  • Cách sử dụng đơn giản dễ thành thạo trong thời gian ngắn
  • Giao diện đẹp thân thiện với người dùng và dễ dàng thay đổi nếu muốn
  • Nhiều chức năng nổi bật mà những editor khác không có
  • Cộng đồng sử dụng đông đảo nên dễ tìm kiếm tài liệu tham khảo liên quan
  • Có số lượng extension rất lớn với vô số chức năng hữu ích
  • Phần mềm hoàn toàn miễn phí từ A đến Z

Download : Brackets

Chức năng nổi bật khi sử dụng Brackets

Live Preview

Một trong số những chức năng hay nhất chỉ có ở Brackets đó là chức năng live preview.

Với live preview bạn có thể vừa chỉnh sửa vừa xem luôn kết quả chỉnh sửa trên trình duyệt mà không cần phải tiến hành lưu lại tài liệu.

Chức năng này quá tuyệt vời giúp các lập trình viên web thay đổi code một cách nhanh chóng sao cho phù hợp với dự án đang làm một cách hiệu quả.

Để sử dụng chức năng này bạn chỉ việc nhấn vào icon hình tia sét ở góc màn hình.Một tab mới trên trình duyệt sẽ hiện ra để bạn quan sát trực tiếp những gì sẽ hiển thị với tài liệu hiện tại.

sử dụng brackets live preview

Cài đặt Extension và Theme

Giống như plugin/theme trong wordpress thì Brackets cũng có các Extension/Theme hỗ trợ chức năng cho editor.

Hiện tại số lượng Extension và theme có sẵn là rất lớn, chắc chắn bạn sẽ tìm thấy những chức năng hay giao diện đẹp cho editor của mình.

Để cài đặt Extension bạn nhấn vào icon hình acquy ngay bên cạnh icon hình tia sét để mở khung cài đặt Extension và Theme ra.

sử dụng Brackets cài đặt extension và theme

  • Available : nơi những Extension có sẵn để bạn tìm kiếm cài đặt
  • Themes : nơi những Theme có sẵn để bạn tìm kiếm và cài đặt
  • Installed : những extension và theme bạn đã cài đặt
  • Default : những chức năng mặc định của Brackets được lưu ở đây

Bạn tìm kiếm extension hoặc theme bạn cần tại khung search sau đó nhấn Install để cài đặt.Sau khi cài đặt là bạn dùng luôn chứ không phải tùy chỉnh phức tạp nếu đó là những extension có chức năng đơn giản.

Sau khi cài đặt Extension một số extension sẽ xuất hiện icon cùng vị trí với những icon mặc định của brackets.Khi sử dụng chức năng của extension đó bạn chỉ việc kích vào icon mà thôi.

Để gỡ hoặc xóa theme/extension nào không dùng nữa bạn chỉ việc chuyển qua tab Installed rồi nhấn nút Disable hoặc Remove là được.

sử dụng brackets cài đặt theme

Sau khi cài đặt theme bạn cần kích hoạt để có thể sử dụng được nó.Trên menu của Brackets bạn chọn View rồi chọn tiếp Theme…

Lúc này khung Themes Settings sẽ xuất hiện và tại menu Current Theme bạn chọn theme mà bạn vừa cài đặt là theme sẽ được kích hoạt.

Các bạn chú ý khi bạn download Brackets về và kích hoạt sử dụng nhưng thấy giao diện có khác so với trong hình của mình thì cũng không sao nhé.Nguyên nhân là do mình đã cài đặt Extension / Theme nên giao diện và màu sắc có khác khá nhiều so với phiên bản mặc định.

Thao tác cơ bản khi sử dụng Brackets

Một trong số những chức năng hay nhất của Brackets đó là Quick Editor.Có bốn loại Quick Editor chính đó là HTML Quick Editor, CSS Animetion Quick Editor, Color Quick Editor và Javascript Quick Editor.

Tất cả các Quick Editor này đều có thể sử dụng nhanh bằng cách chọn đối tượng mong muốn rồi nhấn nút shortcut như sau :  Ctrl + E (Window) hoặc Command + E (MAC).

Để tắt khung Quick Editor bạn nhấn nút dấu X ở góc trên cùng bên trái.

Quick Editor

HTML Quick Editor

Với HTML Quick Editor bạn phải thao tác trên tài liệu HTML và chọn class hoặc ID bạn muốn chỉnh sửa CSS.Sau đó nhấn nút shortcut.

Lúc này một khung soạn thảo CSS tương ứng sẽ hiện ra ngay bên dưới class hoặc ID bạn đã chọn để bạn có thể chỉnh sửa nhanh CSS mà không cần truy cập trực tiếp sửa trên chính file CSS.

sử dụng brackets html quick editor

Color Quick Editor

Với Color Quick Editor thì bạn chọn màu bạn muốn chỉnh sửa sau đó thao tác nhấn nút shortcut.

Tương tự như HTML Quick Editor thì khi bạn nhấn nút shortcut một khung mới hiện ra với bảng màu kèm theo để bạn tùy chỉnh.

Bạn chỉ việc nhấn Enter (Window) hoặc Return (Mac) để xác nhận là xong.

sử dụng brackets color quick editor

CSS Animetion Quick Editor

Tại CSS/LESS/SCSS khi chọn cubic-bezier() hoặc steps() thì một khung mới cũng sẽ hiện ra với đường cong biểu thị thời gian của hiệu ứng để bạn chỉnh sửa.

Đây là chức năng khá mới nên ít người sử dụng, bạn nên thử thực hành một lần cho nhớ biết đâu sau này có cơ hội dùng tới.

sử dụng brackets css animetion quick editor

Javascript Quick Editor

Khi bạn chọn tên hàm Javascript và nhấn shortcut thì khung quick editor sẽ xuất hiện kèm theo nội dung hàm đó để bạn chỉnh sửa nhanh.

Nếu ai thường xuyên làm việc với Javascript thì đây thực sự là chức năng quá tuyệt vời vì nó sẽ tiết kiệm rất nhiều thời gian khi soạn thảo.

sử dụng brackets javascript quick editor

Hover Quick View

Có hai loại hover quick view đó là Images Hover Quick View và Color Hover Quick View.Cả hai loại này sẽ giúp bạn xem nhanh màu sắc và hình ảnh khi bạn đặt con trỏ chuột lên đối tượng tương ứng ngay tại trang soạn thảo code.

Một popup vừa đủ sẽ xuất hiện để bạn kiểm tra màu sắc hay hình ảnh.Đặc biệt khi popup hình ảnh xuất hiện thì có kèm theo kích thước nên rất tiện cho việc chỉnh sửa nếu có.

Images Hover Quick View

Để xem nhanh hình ảnh ngay tại trang soạn thảo code bạn đặt con trỏ chuột lên tên hình ảnh, lập tức popup thu nhỏ của hình ảnh sẽ hiển thị kèm theo kích thước ở phía dưới.

Chức năng này rất hữu ích nếu như website của bạn sử dụng nhiều hình ảnh và bạn thường xuyên phải thay đổi hình ảnh.

sử dụng Brackets Images Hover Quick View

Color Hover Quick View

Tương tự như Images Hover Quick View thì với Color Hover Quick View bạn cũng chỉ cần đặt con trỏ chuột lên mã màu sắc tương ứng là popup color sẽ xuất hiện để bạn kiểm tra màu sắc hiện tại bạn đang dùng.

sử dụng Brackets Color Hover Quick View

Code Hint

Brackets mặc định hỗ trợ gợi ý code cho ngôn ngữ HTML, CSS và Javascript.

Cách hoạt động của nó thì bạn chỉ việc đánh một số từ đầu tiên của yếu tố bạn cần nó sẽ đưa ra gợi ý tương ứng để bạn lựa chọn.

Phần này đơn giản nên mình chỉ minh họa bằng hình ảnh thôi.

HTML Hint

sử dụng brackets html hint

CSS Hint

sử dụng brackets css hint

Color Hint

sử dụng brackets color hint

Javascript Hint

sử dụng brackets javascript hint

Quick document

Những bạn mới làm quen với một ngôn ngữ nào đó thường không hiểu ý nghĩa của các yếu tố, thuộc tính của đối tượng.

Brackets hỗ trợ giải thích trực tiếp ý nghĩa và cách sử dụng của yếu tố bất kì bằng tiếng Anh cho các bạn.Để tìm hiểu sâu hơn bạn có thể nhấn vào nút Read more ở góc dưới bên phải khung gợi ý để đến một website khác.

Để xem gợi ý bạn cần chọn vào yếu tố bạn muốn tìm hiểu sau đó nhấn nút Ctrl + K (Window) hoặc Command + K (MAC).

sử dụng brackets quick documents

Phân chia màn hình làm việc

Khi bạn phải làm việc song song hai tài liệu một lúc thì việc phân chia màn hình soạn thảo là điều không thể tránh khỏi.

Brackets hỗ trợ bạn phân chia màn hình theo cả hai chiều dọc và ngang.

sử dụng brackets phân chia màn hình dọc

Trong sidebar phía bên trái bạn nhấn vào icon hình cửa sổ để menu hiện ra.Bạn chọn kiểu phân chia màn hình phù hợp với nhu cầu của mình.

sử dụng brackets phân chia màn hình ngang

Brackets chỉ hỗ trợ phân chia hai màn hình mà thôi.Một số trình soạn thảo khác như Sublime Text hỗ trợ phân chia tới 3 hay 4 màn hình khác nhau.

Quản lý dự án theo thư mục

Giống như những trình soạn thảo code khác thì Brackets cũng hỗ trợ quản lý dự án theo thư mục.

Ví dụ dự án của bạn nằm trong thư mục du-an-X thì lúc này bạn chỉ việc kéo thư mục du-an-X này vào trong sidebar phía bên trái là toàn bộ các file trong trong thư mục du-an-X sẽ hiện ra.

Bạn chỉ việc kích chuột vào file bạn muốn chỉnh sửa rồi tiến hành chỉnh sửa mà thôi.

sử dụng brackets quản lý dự án theo thư mục

Bạn có thể chuyển đổi giữa các dự án một cách dễ dàng bằng cách nhấn vào nơi mình đã đánh dẫu mũi tên ở hình trên.

Một popup hiện ra để bạn chọn dự án bạn muốn làm việc.

Bạn nhấn chuột trái một lần vào file trong dự án thì nó chỉ hiện lên để bạn xem và khi bạn chuyển qua file khác nó sẽ biến mất.Áp dụng trong trường hợp sửa nhanh file bất kì.

Do đó để chỉnh sửa và làm việc lâu dài với file nào đó bạn nhấn chuột trái hai lần.

Tạm kết

Bạn thấy các chức năng của Brackets như thế nào và cách sử dụng Brackets có đơn giản không ? Trong bài viết có chỗ nào không hiểu hay bạn cần bổ sung thì có thể liên hệ với mình qua phần liên hệ nhé.

Bài viết hơi dài vì mình muốn hướng dẫn chi tiết nhất sao cho các bạn mới làm quen với Brackets đều có thể thành thạo những chức năng cơ bản chỉ sau một thời gian ngắn.

Hi vọng với bài viết này bạn sẽ lựa chọn được cho mình một Code Editor ưng ý nhất với bản thân mình.

Bài viết sau : 

Mình cũng có một series bài viết hướng dẫn sử dụng một trình soạn thảo tuyệt vời khác đó là Visual Studio Code.Bạn có thể tham khảo bài viết đầu tiên trong series này theo link dưới đây.

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x