Cấu hình mã VS để phát triển Vue

Visual Studio Code là một trong những trình soạn thảo mã được sử dụng nhiều nhất trên thế giới ngay bây giờ. Khi bạn là một trình soạn thảo phổ biến, mọi người sẽ xây dựng các plugin đẹp. Một trong những plugin như vậy là một công cụ tuyệt vời có thể giúp chúng tôi các nhà phát triển Vue.js.


Visual Studio Code là một trong những trình soạn thảo mã được sử dụng nhiều nhất trên thế giới ngay bây giờ. Giống như nhiều sản phẩm phần mềm, các biên tập viên có một chu kỳ. Một khi TextMate được các nhà phát triển yêu thích, sau đó nó là Sublime Text, bây giờ là VS Code.

Điều thú vị khi trở nên phổ biến là mọi người dành rất nhiều thời gian để xây dựng các plugin cho mọi thứ họ tưởng tượng.

Một trong những plugin như vậy là một công cụ tuyệt vời có thể giúp chúng tôi các nhà phát triển Vue.js.

Vetur

Nó được gọi làVetur, nó cực kỳ phổ biến, với hơn 3 triệu lượt tải xuống và bạn có thể tìm thấy nótrên Visual Studio Marketplace.

Vetur marketplace page

Cài đặt Vetur

Nhấp vào nút Cài đặt sẽ kích hoạt bảng cài đặt trong Mã VS:

Install Vetur in VS Code

Bạn cũng có thể mở Tiện ích mở rộng trong Mã VS và tìm kiếm “bác sĩ thú y”:

Search vetur in extensions

Tiện ích mở rộng này cung cấp những gì?

Đánh dấu cú pháp

Vetur cung cấp đánh dấu cú pháp cho tất cả các tệp mã nguồn Vue của bạn.

Nếu không có Vetur, tệp .vue sẽ được hiển thị theo cách này bởi VS Code:

Vue file without Vetur

với Vetur được cài đặt:

Vue file with Vetur

VS Code có thể nhận dạng loại mã có trong tệp từ phần mở rộng của nó.

Sử dụng Thành phần tệp đơn, bạn kết hợp các loại mã khác nhau bên trong cùng một tệp, từ CSS đến JavaScript đến HTML.

VS Code theo mặc định không thể nhận dạng tình huống này và Vetur cho phép cung cấp đánh dấu cú pháp cho từng loại mã bạn sử dụng.

Vetur cho phép hỗ trợ, trong số những người khác, cho

  • HTML
  • CSS
  • JavaScript
  • Pug
  • Haml
  • SCSS
  • PostCSS
  • Sass
  • Bút cảm ứng
  • TypeScript

Đoạn mã

Cũng như tô sáng cú pháp, vì VS Code không thể xác định loại mã có trong một phần của tệp .vue nên nó không thể cung cấp các đoạn mã mà chúng ta đều yêu thích: các đoạn mã chúng ta có thể thêm vào tệp, được cung cấp bởi các plugin chuyên dụng.

Vetur cung cấp cho VS Code khả năng sử dụng các đoạn mã yêu thích của bạn trong các thành phần tệp đơn.

IntelliSense

IntelliSense cũng được kích hoạt tạm biệt Vetur, cho mỗi ngôn ngữ khác nhau, với tính năng tự động hoàn thành:

Autocomplete

Đoạn đầu đài

Ngoài việc bật các đoạn mã tùy chỉnh, Vetur còn cung cấp bộ đoạn mã của riêng mình. Mỗi thẻ tạo một thẻ cụ thể (mẫu, tập lệnh hoặc kiểu) với ngôn ngữ riêng của nó:

  • vue
  • template with html
  • template with pug
  • script with JavaScript
  • script with TypeScript
  • style with CSS
  • style with CSS (scoped)
  • style with scss
  • style with scss (scoped)
  • style with less
  • style with less (scoped)
  • style with sass
  • style with sass (scoped)
  • style with postcss
  • style with postcss (scoped)
  • style with stylus
  • style with stylus (scoped)

Nếu bạn gõvue, bạn sẽ nhận được gói khởi động cho một thành phần tệp đơn:

<template>

</template>

<script> export default {

} </script>

<style>

</style>

những cái khác cụ thể và tạo ra một khối mã duy nhất.

Lưu ý: (phạm vi) có nghĩa là nó chỉ áp dụng cho thành phần hiện tại

Emmet

Emmet, công cụ viết tắt HTML / CSS phổ biến, được hỗ trợ theo mặc định. Bạn có thể nhập một trong các từ viết tắt Emmet và bằng cách nhấntabVS Code sẽ tự động mở rộng nó thành HTML tương đương:

Emmet support

Linting và kiểm tra lỗi

Vetur tích hợp vớiESLint, thông quaVS Code ESLint plugin.

ESLint configuration

ESLint at work

Định dạng mã

Vetur cung cấp hỗ trợ tự động cho định dạng mã, để định dạng toàn bộ tệp khi lưu (kết hợp với"editor.formatOnSave"VS Thiết lập mã.

Bạn có thể chọn tắt định dạng tự động cho một số ngôn ngữ cụ thể bằng cách đặtvetur.format.defaultFormatter.XXXXXđếnnonetrong cài đặt Mã VS. Để thay đổi một trong những cài đặt đó, chỉ cần bắt đầu tìm kiếm chuỗi và ghi đè những gì bạn muốn trong cài đặt người dùng (bảng điều khiển bên phải).

Hầu hết các ngôn ngữ được hỗ trợ đều sử dụngĐẹp hơnđể định dạng tự động, một công cụ đang trở thành tiêu chuẩn của ngành.

Sử dụng cấu hình Prettier của bạn để xác định tùy chọn của bạn.

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác: