Editor ở đây chúng ta hướng tới là vscode hoặc vscode-insiders
hoặc vscodium.
Giúp tự động sửa code bẩn (không đúng coding rules) thành đẹp.
Đỡ bực mình khi cả nghìn dòng code bẩn khó sửa chẳng hạn.
Config hữu ích tại settings (ctrl + shift + P + Open Settings JSON
):
Vì khi dùng Angular CLI
để tự động tạo ra 1 base project thì đã có sẵn .editorconfig
rồi.
Tùy theo coding rules mà sửa .editorconfig
thôi.
Quan trọng gần nhất, check chính tả, định nghĩa thế nào là cách viết code tệ.
Do TSLint
đã không còn được support (update) nữa từ năm 2019, ta nên dùng ESLint
.
Tới Angular 11
, Angular sẽ warning nên dùng angular-eslint thay thế cho TSLint
.
Với các tính năng:
Thì nó là thằng quan trọng nhất.
Config hữu ích:
Check chính tả cho CSS/SCSS/Less
, kiểu như eslint
nhưng cho style.
Ngoài ra, mình cũng có bài viết Must-have style-lint basic rules
Check chính tả tiếng Anh. Để thằng sau đọc code nó không cười vì đặt tên biến, hàm ngu.
Tạo ra cả 1 component full đồ khi chỉ cần gõ ng-component
vào file trống chẳng hạn.
Extension cho những ai lười gõ command khởi tạo component
, service
… hoặc không nhớ command.
Tự động chia màn hình thành 3 phần của Component:
Thằng này thì cái tên đã nói lên tất cả rồi. :v
Khi mà bạn bị bắt không được code kiểu inline (kiểu chung html
và ts
1 file) hay là bạn thích tách riêng các file ra, thì việc chuyển qua lại giữa các file của 1 component là chuyện thường xuyên.
Đã có angular2-switcher
, switch giữa các kiểu file: typescript(.ts)|template(.html)|style(.scss/.sass/.less/.css) trong cùng 1 component với 1 loạt phím tắt nhanh và tiện.
@Input()
cho component đó.Chuyển file JSON
sang Typescript
và các ngôn ngữ khác.
Tạo console.log
siêu nhanh bằng cách bôi đen biến cần log và ấn ctrl + alt + L
.
Dành cho tín đồ thích code 1 file chung có hết typescript, style (css, scss..), html - kiểu như react-native.
Và tôi cũng thích kiểu này.
Syntax highlighting for angular HTML template files.
Tăng trình viết tài liệu dự án (README.md).
Thêm cả thằng markdown lint nữa cho bá.
Rất hữu dụng khi design + test + mock API theo chuẩn openapi
hay swagger
.
Nếu file yaml
quá dài ảnh hưởng tới hiệu năng đọc file thì giới hạn:
Xem ảnh SVG từ mớ bùng nhùng svg-tag
.
Cùng với settings (ctrl + shift + P + Open Settings JSON
):
Giúp bạn dễ phân biệt các loại file trong Angular như Component, Service, …
Thì đây là theme ưu thích của mình.
Bắt lỗi ngay trên vscode thay vì trên browser.
Tự động tạo ra mock
service
cho TestBed
và never have to worry about hitting the real services
.
Nếu các bạn lười install hay quản lý đống extentions riêng cho Angular, bạn có thể dùng cái này. Hay tìm hiểu thêm extentions khác hữu ích mà mình chưa biết.
settings.json
Để mở settings.json
thì ta ấn: Ctrl
+ Shift
+ P
-> gõ settings
-> tìm lựa chọn settings bằng JSON
.
Edit settings.json
để default UI/UX xịn hơn:
Nếu máy bạn đang cài Fira Code
font thì setting:
Ngoài ra còn các extentions cơ bản khác mà dùng chung cho nhiều ngôn ngữ hay Framework là mình chưa cho vào đây. Mình sẽ update về các extentions đó vào bài viết khác.
Đây là bài viết của tôi trên blog cá nhân.
Quick Links
Social Media