Editor ở đây chúng ta hướng tới là vscode hoặc vscode-insiders hoặc vscodium.

Code Linter - refactor - formatter

Prettier - Code formatter

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):

EditorConfig for VS Code - must be installed!

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.

ESLint

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.

TSLint (deprecated)

Tới Angular 11, Angular sẽ warning nên dùng angular-eslint thay thế cho TSLint.

Angular Language Service

Với các tính năng:

• Completions lists
• AOT Diagnostic messages: giúp xác định lỗi từ editor thay vì đợi tới lúc compile.
• Quick info
• Go to definition

Thì nó là thằng quan trọng nhất.

Config hữu ích:

style lint

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

code-spell-checker

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.

Lối tắt

Angular 10 Snippets

Tạo ra cả 1 component full đồ khi chỉ cần gõ ng-component vào file trống chẳng hạn.

angular-schematics

Extension cho những ai lười gõ command khởi tạo component, service… hoặc không nhớ command.

• Thay thế cho Angular CLI (command line) bằng UI.
• Không còn nhưng lỗi typo - gõ sai chính tả ngớ ngẩn.
• Support nhiều option cho từng loại:

Angular Zen Mode

Tự động chia màn hình thành 3 phần của Component:

• Code (.ts) chiếm 2/4 màn hình
• Template (.html) chiếm 1/4 màn hình
• Style (.css/.scss/.sass/.less) chiếm 1/4 màn hình

auto-rename-tag

Thằng này thì cái tên đã nói lên tất cả rồi. :v

angular2-switcher

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.

arrr

• Gom HTML được bôi dên thành 1 component mới.
• Tự động nhận biết và tạo @Input() cho component đó.
• Generates HTML, CSS, TS và spec files.

Paste JSON as Code

Chuyển file JSON sang Typescript và các ngôn ngữ khác.

turbo-console-log

Tạo console.log siêu nhanh bằng cách bôi đen biến cần log và ấn ctrl + alt + L.

Syntax highlighting

angular2-inline

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.

vscode-angular-html

Syntax highlighting for angular HTML template files.

markdown-preview-enhanced

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á.

swagger-viewer

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:

svg-preview

Xem ảnh SVG từ mớ bùng nhùng svg-tag.

deepdark-material theme

Cùng với settings (ctrl + shift + P + Open Settings JSON):

Material Icon Theme

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.

Unit test

Karma Problem Matcher

Bắt lỗi ngay trên vscode thay vì trên browser.

SimonTest

Tự động tạo ra mock service cho TestBed và never have to worry about hitting the real services.

angular-karma-test-explorer

• Run và Reload tests bằng run, reload button ngay trên UI vscode.
• Xem results ngay trên UI.
• Debug tests, shows log của test thất bại ngay trên dòng source code mà nó failed.

Angular Extension Pack

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.

Other 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.