Trình chỉnh sửa mã tốt nhất cho Vue.js

Với số lượng trình soạn thảo mã chất lượng ngày càng tăng để lựa chọn, bạn có thể tự hỏi không biết trình soạn thảo mã nào tốt nhất cho Vue.js. Một số nhà phát triển cam kết với các biên tập viên của họ như họ tin vào chính trị của họ, vì vậy bạn sẽ nhận được các câu trả lời khác nhau tùy thuộc vào người bạn hỏi.

Nhưng khi nói đến mã hóa trong Vue, một trong những người tốt nhất để hỏi là Evan You, người tạo ra Vue. Vậy anh ta dùng gì? Mã Studio trực quan.

Trong một cuộc phỏng vấn, anh được hỏi về chủ đề này và anh trả lời:

Tôi đã chuyển đổi qua lại cho đến gần đây tôi bắt đầu sử dụng TypeScript và vì VS Code TypeScript rất tốt, tôi đã chuyển (vĩnh viễn) sang Mã VS.

Mặc dù Vue doesn không yêu cầu bạn sử dụng TypeScript, mã nguồn của nó sẽ sớm được viết trong đó, như chúng tôi đã trình bày trong bài đăng này trên Vue 3.0.

Bạn có thể đang nghĩ đến nhưng Nhưng tôi không làm việc với mã nguồn và tôi không sử dụng mã Vue với TypeScript, liệu Mã VS có còn phù hợp với tôi không?

Điều đó đưa tôi đến chủ đề của Vetur, đây là một tiện ích mở rộng giàu tính năng cung cấp cho bạn những thứ như tô sáng cú pháp trong các tệp .vue, đoạn trích, kiểm tra lỗi và định dạng, cũng như tự động hoàn thành và gỡ lỗi. Tại thời điểm này, nó là phần mở rộng Vue tốt nhất cho trình soạn thảo mã. Và nó nên như vậy, bởi vì nó được phát triển bởi Pine Wu, một thành viên của nhóm nòng cốt Vue.

Vì vậy, nếu bạn quan tâm đến việc sử dụng Mã VS để phát triển Vue (hoặc đã có), bạn có thể làm theo bên dưới khi tôi chỉ cho bạn cách tối ưu hóa Mã VS.

Chúng ta sẽ học gì?

Chúng tôi sẽ học cách:

  • Nhận đánh dấu cú pháp trong các tệp .vue của chúng tôi
  • Sử dụng các đoạn mã để có một quy trình làm việc nhanh hơn
  • Định cấu hình trình chỉnh sửa của chúng tôi để tự động định dạng mã của chúng tôi
  • Và khám phá các tiện ích mở rộng hữu ích khác màllll cải thiện trải nghiệm phát triển của chúng tôi

Cài đặt Vetur

Có một số tính năng giúp VS Code trở thành môi trường tuyệt vời để phát triển Vue, bao gồm Vetur, một plugin được thiết kế bởi Pine Wu, thành viên cốt lõi của nhóm Vue.js.

Ở đây trong Mã VS, nếu chúng ta mở tệp .vue, chẳng hạn như tệp About.vue này, chúng ta sẽ thấy tất cả mã màu xám này. Điều đó bởi vì Mã VS đã thắng, tự động tô sáng cú pháp trong các tệp .vue.

Vetur có thể khắc phục điều này cho chúng tôi và cung cấp cho chúng tôi các tính năng khác được thiết kế để cải thiện trải nghiệm của nhà phát triển.

Vì vậy, hãy để cài đặt nó ngay bây giờ. Mở cửa hàng mở rộng.

Sau đó tìm kiếm Vetur, hãy chọn nó trong kết quả tìm kiếm và nhấp vào Cài đặt. Sau đó bấm Tải lại.

Các tính năng của Vetur

Bây giờ Vetur đã được cài đặt, hãy để Hãy xem các tính năng của nó.

Làm nổi bật cú pháp Bằng cách gõ lệnh + P và nhập tên của tệp .vue, chúng ta có thể mở tệp About.vue. Như bạn có thể thấy, bây giờ mã của chúng tôi đang làm nổi bật cú pháp thích hợp. Tuyệt vời - không còn mã màu xám.

Kiểm tra tệp Home.vue, chúng ta có thể thấy rằng JavaScript của chúng ta cũng đang được tô sáng chính xác.

Đoạn trích Một tính năng khác Vetur được đóng gói với đoạn mã của mình. Đây là những đoạn mã tiết kiệm thời gian, mã cho phép bạn nhanh chóng tạo ra các đoạn mã thường được sử dụng.

Hãy để cùng nhau tạo ra một thành phần mới để thấy điều này trong thực tế. Chúng tôi tên làllll là EventCard.vue. Bây giờ, nếu chúng ta nhập từ scaffold vào một tệp .vue và nhấn ENTER, điều này sẽ tự động điền vào tệp đó với bộ xương hoặc giàn giáo của một thành phần .vue duy nhất.

Emmet Vetur cũng được đóng gói với Emmet. Đây là một công cụ phổ biến cho phép bạn sử dụng các phím tắt để xây dựng mã của mình.

Ví dụ: chúng ta có thể nhập h1 và nhấn enter và điều này sẽ tạo ra một phần tử h1 mở và đóng.

Khi chúng ta gõ một cái gì đó phức tạp hơn, chẳng hạn như div> ul> li, nó sẽ tạo ra:

        
                
  •              

Nếu Emmet doesn dường như làm việc cho bạn, bạn có thể thêm phần này vào Cài đặt người dùng:

"emmet.includeLacular": {
          "vue": "html"
      },

Để tìm hiểu thêm về cách Emmet có thể tăng tốc độ phát triển của bạn, hãy truy cập vào đây.

Cài đặt ESLint & Prettier

Bây giờ, chúng tôi cần đảm bảo rằng chúng tôi đã cài đặt ESLint và Prettier. Trong cửa hàng tiện ích mở rộng, chúng tôi sẽ thực hiện tìm kiếm cho ESLint, sau đó tiếp tục và cài đặt nó. Và chúng tôi sẽ làm điều tương tự cho Prettier. Sau khi cài đặt, chúng tôi sẽ tải lại để tải lại Mã VS.

Cấu hình ESLint

Bây giờ chúng đã được cài đặt, chúng ta cần thêm một chút cấu hình bổ sung cho chúng.

Khi chúng tôi tạo dự án của mình từ thiết bị đầu cuối, chúng tôi đã chọn tạo dự án với các tệp cấu hình chuyên dụng, cung cấp cho chúng tôi tệp .eslintrc.js này, nơi chúng tôi có thể định cấu hình ESLint cho dự án này. Nếu chúng tôi không chọn các tệp chuyên dụng, chúng tôi sẽ tìm thấy các cấu hình ESLint trong gói.json của chúng tôi.

Vì vậy, trong tệp .eslintrc.js của chúng tôi, chúng tôi sẽ thêm:

'plugin: đẹp hơn / được đề xuất'

Điều này sẽ cho phép hỗ trợ Prettier trong ESLint với các cài đặt mặc định.

Vì vậy, tập tin của chúng tôi bây giờ trông như thế này:

module.exports = {
      gốc: đúng,
      env: {
        nút: đúng
      },
      'kéo dài': [
        'plugin: vue / Essential',
        'plugin: prettier / recommend', // chúng tôi đã thêm dòng này
        '@ vue / xinh hơn'
      ],
      quy tắc: {
        'không có bàn điều khiển': process.env.NODE_ENV === 'sản xuất'? 'lỗi': 'tắt',
        'không gỡ lỗi': process.env.NODE_ENV === 'sản xuất'? 'lỗi': 'tắt'
      },
      trình phân tích cú pháp: {
        trình phân tích cú pháp: 'babel-eslint'
      }
    }

Cấu hình đẹp hơn

Chúng tôi cũng có tùy chọn để tạo tệp cấu hình Prettier, để thêm một số cài đặt đặc biệt theo phong cách cá nhân hoặc tùy chọn nhóm của chúng tôi.

Chúng tôi sẽ tạo ra nó ở đây và đặt tên là .prettierrc.js.

Và bên trong, chúng tôi loại:

module.exports = {
        đơn số: đúng,
        bán: sai
    }

Điều này sẽ chuyển đổi dấu ngoặc kép thành dấu ngoặc đơn và đảm bảo rằng dấu chấm phẩy không được tự động chèn vào.

Thiết lập người dùng

Để tiếp tục tối ưu hóa Mã VS cho trải nghiệm phát triển tuyệt vời, chúng tôi sẽ thêm một số cấu hình vào Cài đặt người dùng. Để truy cập Cài đặt người dùng, nhấp vào Mã trong thanh điều hướng trên cùng, sau đó Tùy chọn, sau đó Cài đặt. Thao tác này sẽ hiển thị cửa sổ Cài đặt người dùng nơi bạn có thể thêm cài đặt trong json.

Đầu tiên, chúng tôi muốn thêm:

"vetur.validation.template": sai

Điều này sẽ tắt tính năng linting Vetur. Thay vào đó, chúng tôi sẽ dựa vào ESLint + Prettier.

Bây giờ chúng tôi muốn nói với ESLint những ngôn ngữ mà chúng tôi muốn nó xác thực (vue, html và javascript) và đặt autoFix thành đúng trên mỗi ngôn ngữ:

"eslint.validate": [
        {
            "ngôn ngữ": "vue",
            "autoFix": đúng
        },
        {
            "ngôn ngữ": "html",
            "autoFix": đúng
        },
        {
            "ngôn ngữ": "javascript",
            "autoFix": đúng
        }
    ],

Sau đó, để có biện pháp tốt, chúng tôi sẽ nói với ESLint về autoFixOnSave.

"eslint.autoFixOnSave": đúng,

Và nói với biên tập viên của chúng tôi để định dạngOnSave.

"Editor.formatOnSave": đúng,

Kiểm tra nó ra

Để kiểm tra xem điều này có hoạt động hay không, chúng tôi sẽ thêm một thuộc tính dữ liệu vào thành phần EventCard của chúng tôi ở đây và thêm một trích dẫn: Tôi muốn trở thành một người duy nhất sau đó chúng tôi cũng sẽ ném vào một dấu chấm phẩy ở đây. Khi chúng tôi nhấn lưu, dấu ngoặc kép của chúng tôi được chuyển đổi thành dấu ngoặc đơn và dấu chấm phẩy được xóa. Tuyệt vời - nó làm việc.

Công cụ bổ sung

Giờ thì hãy cùng xem một số công cụ bổ sung có thể giúp tăng tốc độ phát triển của bạn.

Sao chép đường dẫn tương đối Sao chép đường dẫn tương đối là một tiện ích mở rộng cho phép bạn sao chép vị trí của tệp, dựa trên mối quan hệ của nó với thư mục mà nó đang liên kết.

Hãy cùng tìm kiếm, cài đặt nó, sau đó xem nó hoạt động.

Trong tệp Home.vue của chúng tôi, chúng tôi thấy có một đường dẫn tương đối ở đây, nơi chúng tôi đang nhập thành phần HelloWorld.

Để có được đường dẫn tương đối của tệp mà chúng tôi muốn nhập, chúng tôi đã nhấp chuột phải vào tệp, sau đó chọn Sao chép đường dẫn tương đối. Bây giờ, khi chúng tôi dán những gì đã được sao chép, chúng tôi thấy chúng tôi có đường dẫn tương đối chính xác. Lưu ý src này. Nhận xét ở đây cho chúng tôi biết rằng do cách thiết lập dự án của chúng tôi, chúng tôi có thể sử dụng @ thay thế.

Thiết bị đầu cuối tích hợp Một tính năng tích hợp thuận tiện của trình soạn thảo Mã VS là thiết bị đầu cuối tích hợp của nó, bạn có thể sử dụng thay vì chuyển sang thiết bị đầu cuối riêng biệt. Bạn có thể mở nó, bằng phím tắt: `ctrl +` `

Thêm đoạn trích Nếu bạn muốn cài đặt một số đoạn mã tiện lợi bổ sung, bạn có thể tải xuống một bộ đầy đủ các đoạn mã Vue VSCode, được tạo bởi Thành viên nhóm Core Vue Sarah Drasner.

Hãy cùng tìm kiếm phần mở rộng với tên của cô ấy, sarah.drasner. Họ đây rồi Bây giờ chúng ta có thể cài đặt và tải lại.

Hãy cùng xem chúng trong hành động.

Nếu chúng ta gõ vif trên một phần tử trong mẫu của mình, thì đó sẽ cung cấp cho chúng ta câu lệnh v-if và gõ von sẽ cung cấp cho chúng ta một trình xử lý sự kiện đầy đủ. Thay vì nhập thủ công một thuộc tính dữ liệu, chúng ta có thể chỉ cần gõ vdata sẽ tạo một thuộc tính cho chúng ta. Chúng tôi có thể làm điều tương tự để thêm đạo cụ với vprops. Chúng tôi thậm chí có thể sử dụng nó để tạo mã để nhanh chóng nhập một libary, với vimport-lib. Như bạn có thể thấy, đây là những đoạn rất hữu ích và tiết kiệm thời gian.

Xin lưu ý rằng nếu bạn sử dụng tiện ích mở rộng Snippets này, bạn nên thêm một dòng vào Cài đặt người dùng:

vetur.completion.useScaffoldSnippets nên sai

Điều này sẽ đảm bảo những đoạn trích này xảy ra xung đột với Vetur,.

Chủ đề màu Cuối cùng, nếu bạn đang tự hỏi làm thế nào để thay đổi chủ đề của mình trong Mã VS hoặc nếu bạn đang tự hỏi tôi đang sử dụng cái nào ở đây, bạn có thể truy cập Mã> Tùy chọn> Chủ đề màu.

Như bạn có thể thấy, tôi đã sử dụng FlatUI Dark. Bạn có thể thay đổi màu chủ đề của mình thành bất kỳ tùy chọn nào trong số này ở đây hoặc bạn có thể tìm kiếm các chủ đề khác trong cửa hàng tiện ích mở rộng.

Nếu bạn không thấy một người bạn muốn, bạn cũng có thể truy cập Visual Studio Marketplace trực tuyến. Tại đây, bạn có thể xem trước hàng tấn plugin và chủ đề khác nhau, chẳng hạn như Night Owl của người bạn Sarah Drasner của chúng tôi. Bạn có thể cài đặt nó trực tiếp từ trình duyệt, sau đó tìm thấy nó trong Tùy chọn chủ đề màu của bạn.

Tiếp tục học

Để tiếp tục học hỏi với tôi, bạn có thể tham gia khóa học Real World Vue đầy đủ, tại VueM Abbey.com.