CSS Tailwind có đáng không Reddit

Học css tailwind có hữu ích không? Tôi đã xem một hướng dẫn và tôi thích bất cứ điều gì anh ấy làm, tôi có thể làm điều đó trong css mà không cần phải cài đặt thư viện. từ css

Trình chỉnh sửa mã cơ bản như Visual Studio Code (VS Code) giúp bạn phát triển xa hơn. Nhưng nếu bạn muốn viết mã nhanh hơn và mắc ít lỗi hơn, thì bạn cần tận dụng thư viện tiện ích mở rộng khổng lồ có sẵn trên thị trường của nó

Có hàng ngàn tiện ích mở rộng Mã VS khác nhau có sẵn cho ngôn ngữ bạn chọn e. g. JavaScript, TypeScript hoặc Python. Vì vậy, thật khó để tìm được tiện ích mở rộng phù hợp nếu không thử tất cả

Tôi đã thử nghiệm hơn hàng trăm tiện ích mở rộng cho TypeScript cho bài đăng trên blog này và sắp xếp những phát hiện của tôi vào danh sách chứa 10 tiện ích mở rộng Mã VS tốt nhất cho TypeScript để tiết kiệm thời gian của bạn

Dưới đây là 10 tiện ích mở rộng Mã VS tốt nhất cho TypeScript

Mục lục

1

Tiện ích mở rộng Mã VS tốt nhất cho TypeScript là gì?

Dưới đây là những lựa chọn hàng đầu của tôi về các tiện ích mở rộng so với mã tốt nhất cho TypeScript mà bạn nên dùng thử trong trình chỉnh sửa mã của mình

1. ESLint

ESLint là một kẻ nói dối phân tích tĩnh mã của bạn để tìm ra các vấn đề dựa trên một bộ quy tắc được định cấu hình trước. Thông thường, bạn chạy ESLint thông qua thiết bị đầu cuối để kiểm tra mã của mình, nhưng giờ đây bạn sẽ nhận được phản hồi ngay lập tức bằng cách chạy ESLint dưới dạng tiện ích mở rộng Mã VS

Tiện ích mở rộng VS Code ESLint hiển thị bản trình diễn trên thông báo lỗi

Bạn có thể định cấu hình tiện ích mở rộng để tự động khắc phục sự cố khi bạn nhấn lưu trong trình chỉnh sửa Mã VS. Đây là các cài đặt mà tôi đang sử dụng cho tiện ích mở rộng này, vì vậy tiện ích này sẽ tự động khắc phục các phát hiện của ESLint

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.run": "onSave",
  "eslint.validate": [
    "typescript"
  ],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],

2. DotEnv

Tiện ích mở rộng DotEnv VS Code thêm đánh dấu cú pháp vào. biến env. Trong các dự án của tôi, tôi sử dụng rất nhiều. biến env. Vì vậy, việc đánh dấu cú pháp trên các tệp này giúp tôi ít mắc lỗi hơn và cho phép tôi đọc các biến môi trường nhanh hơn rất nhiều so với một tệp chỉ có văn bản màu xám

phần mở rộng dotenv vscode hiển thị đánh dấu cú pháp trên một. env. tập tin ví dụ

3. xinh hơn

Prettier là trình định dạng mã và thực thi một kiểu nhất quán mà bạn đã định cấu hình sẵn trong dự án của mình. Có một phong cách nhất quán có thể mang lại lợi ích lớn cho năng suất của nhóm vì PR có thể tập trung vào chính mã thay vì thảo luận xung quanh phong cách mã

Để sử dụng Prettier để định dạng mã của bạn, bạn có thể chạy các lệnh sau

1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

Bạn cũng có thể quyết định sử dụng Prettier làm trình định dạng mặc định cho một ngôn ngữ cụ thể. Điều đó có nghĩa là khi bạn chạy lệnh format trong VS Code, nó sẽ tự động sử dụng Prettier. Để kích hoạt nó, hãy thêm phần sau vào cài đặt Mã VS của bạn

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Ghi chú. Bạn có biết bạn có thể kết hợp Prettier với ESLint không?

4. Visual Studio IntelliCode

Visual Studio IntelliCode là tiện ích mở rộng cung cấp khả năng hoàn thành mã do AI hỗ trợ. Theo tôi, điều này sẽ trở thành một phần của Mã VS vì mọi nhà phát triển đều được hưởng lợi từ việc hoàn thành mã

Ví dụ về tự động hoàn thành tiện ích mở rộng Visual Studio IntelliCode

Như bạn có thể thấy trong bản trình diễn ví dụ, nếu một phương thức hoặc lớp chứa các giao diện thì IntelliCode sẽ có thể chọn các tham chiếu và sẽ cố gắng tự động hoàn thành nó cho người dùng khi họ nhập mã

5. Tailwind CSS IntelliSense

Một tiện ích mở rộng tuyệt vời khác bổ sung tính năng tự động hoàn tất, nhưng lần này là dành cho Tailwind CSS. Nếu bạn đang phát triển front-end, có khả năng cao là bạn đang sử dụng CSS. Tailwind là một khung phổ biến giữa các nhà phát triển CSS và việc bật tiện ích mở rộng này sẽ cải thiện trải nghiệm của bạn bằng cách thêm các tính năng tuyệt vời như tự động hoàn thành, tô sáng cú pháp và linting

Ví dụ về phần mở rộng Tailwind CSS IntelliSense VS Code

Như bạn có thể thấy trong bản minh họa, tiện ích này sẽ tự động cố gắng tự động hoàn thành các lớp tiện ích Tailwind cho bạn

6. Sắp xếp dòng

Tiện ích mở rộng Mã VS. các dòng sắp xếp thực hiện những gì tên gợi ý đó là sắp xếp các dòng trong tệp của bạn. Chẳng hạn, khi tạo danh sách trong TypeScript, nó có thể tiết kiệm thời gian thực nếu bạn có thể tự động sắp xếp các mục theo thứ tự abc chẳng hạn. Bạn có thể sắp xếp mã của mình theo các cách sau

CommandSort lines functionalitysortLinesAscending, case-sensitive (default)sortLinesCaseInsensitiveAscending, case-sensitivesortLinesCaseInsensitiveUniqueUnique ascending, case-sensitivesortLinesReverseDescending, case-sensitivesortLinesLineLengthLine length ascendingsortLinesLineLengthReverseLine length descendingsortLinesVariableLengthVariable-length ascendingsortLinesVariableLengthReverseVariable-length descendingsortLinesNaturalSorts alphabetically except groups with multi-digit numberssortLinesUniqueRegular character code keeping only unique itemssortLinesShuffleShuffles outputremoveDuplicateLinesRemoves duplicate

Để gọi chức năng Sort lines gõ lệnh sau

CMD + Shift + P -> Sort Lines

Điều này sẽ tự động liệt kê các tùy chọn để sắp xếp các dòng của bạn. Hàm sắp xếp được tôi sử dụng nhiều nhất khi viết mã trong TypeScript là Natural Sắp xếp theo thứ tự bảng chữ cái nhưng nhóm các số có nhiều chữ số

7. bình luận tốt hơn

Phần mở rộng Better comments VS Code tạo nhận xét thân thiện với con người trong mã TypeScript của bạn. Bằng cách thêm các màu khác nhau cho các chú thích khác nhau, việc phân biệt các cảnh báo với các thông báo quan trọng sẽ trở nên dễ dàng hơn như bạn có thể thấy trong ví dụ bên dưới

Nhận xét tốt hơn Ví dụ mở rộng mã VS về đánh dấu nhận xét

8. GitLens

Nếu bạn đang phát triển các dự án TypeScript, thì có khả năng lớn là bạn đang sử dụng git. Phần mở rộng. GitLens cải thiện chức năng git trong Mã VS. Một vài tính năng đáng chú ý đáng được đề cập là

• git đổ lỗi – hiển thị ai đã sửa đổi từng dòng trong một tệp
• thay đổi git – làm nổi bật mọi thay đổi cục bộ (chưa xuất bản) hoặc các dòng được thay đổi bởi lần xác nhận gần đây nhất
• điều hướng sửa đổi git – hiển thị lịch sử git của một tệp và cho phép bạn dễ dàng điều hướng nó

Ví dụ mở rộng Gitlens VS Code của git pour

9. Đồ thị Git

Không thể sử dụng tiện ích mở rộng Git Graph VS Code nếu bạn là người dùng git nhiều. Tiện ích mở rộng cho phép bạn xem lịch sử cam kết git của mình dưới dạng biểu đồ. Bạn sẽ nhận được tổng quan tức thì về tất cả các lần xác nhận, nhánh, thẻ và người dùng đã thực hiện các thay đổi trước đó

Ví dụ tiện ích mở rộng Git Graph VS Code của chế độ xem biểu đồ

Ngoài ra, nó cấp cho người dùng khả năng thực hiện các hành động git như cam kết, hợp nhất, hoàn nguyên, thanh toán, rebase, đổi tên và đặt lại các nhánh. Khả năng thực hiện điều này từ một tổng quan duy nhất trong Mã VS giúp cải thiện năng suất rất nhiều và không khiến bạn bị lạc khỏi dòng chảy của mình

10. Trợ lý GitHub

Không thể bỏ qua phần mở rộng GitHub Copilot VS Code trong danh sách này. Đây thực chất là một lập trình viên ghép nối AI đưa ra gợi ý về những gì nó nghĩ bạn sẽ viết trong mã của mình. Nó thậm chí có thể viết các phương thức và lớp hoàn chỉnh cho bạn

Nhưng làm thế nào AI có thể làm được điều đó? . Vì vậy, nó đã được đào tạo để nhận ra các mẫu và với kiến ​​thức đó, nó có thể xác định những gì nhà phát triển sẽ tạo ra trong mã

Theo kinh nghiệm của tôi, tôi nhận thấy rằng khi các dự án TypeScript phát triển lớn hơn theo thời gian, thì GitHub copilot càng trở nên tốt hơn trong việc dự đoán loại mã tôi muốn viết. Xem ví dụ sau để hiểu về lập trình cặp AI mạnh mẽ như thế nào

Ví dụ mở rộng GitHub Copilot VS Code về dự đoán chức năng

Phần kết luận

Tóm lại, với tư cách là nhà phát triển TypeScript, việc tìm các tiện ích mở rộng Mã VS phù hợp để cải thiện quy trình làm việc và năng suất của bạn có thể là một nhiệm vụ khó khăn

Do đó, tôi đã tạo danh sách này chứa 10 tiện ích mở rộng VS Code tốt nhất cho TypeScript bao gồm EsLint, DotEnv, Prettier, Visual Studio IntelliCode, Tailwind CSS IntelliSense, Sort lines, Better comments, Git Lens, Git Graph và GitHub Copilot

Năng suất và sự tập trung hàng ngày của bạn sẽ được cải thiện và bên cạnh đó, mã của bạn ít bị lỗi hơn nhờ các biện pháp bảo vệ và điểm nổi bật có trong các tiện ích mở rộng Mã VS này

Có đáng để học Tailwind CSS không?

Tailwind có được sử dụng trong công nghiệp không?

Học Tailwind có khó không?

Tôi nên sử dụng Tailwind hay Bootstrap?