Giả sử bạn dự định xây dựng một trang web. Trước khi bắt đầu, bạn muốn thiết lập một vài công cụ để giúp cuộc sống của bạn dễ dàng hơn. Nhưng bạn nên có những công cụ nào?
Hệ sinh thái JavaScript đang thay đổi nhanh đến mức có thể quá sức để chọn ra những công cụ tốt nhất để sử dụng. Để giải quyết vấn đề này, trong bài viết này tôi sẽ hướng dẫn bạn cách thiết lập một dự án giao diện người dùng từ đầu
Chúng tôi sẽ đề cập đến những thứ như tiện ích mở rộng trình chỉnh sửa phải có, cách thêm thư viện JavaScript vào dự án của bạn, tại sao bạn nên sử dụng Node. js ngay cả khi bạn muốn phát triển giao diện người dùng và cách thiết lập gói ứng dụng sẽ tạo bản xem trước trực tiếp khi bạn viết mã trong trình duyệt của mình
Vì vậy, hãy đi sâu vào
Cách chọn Trình chỉnh sửa mã
Hãy bắt đầu với nền tảng. Là một nhà phát triển web, bạn chủ yếu chỉnh sửa văn bản, vì vậy bạn cần một trình soạn thảo tốt. Vậy bạn nên sử dụng cái nào?
Chọn một trình chỉnh sửa chủ yếu dựa trên sở thích cá nhân vì hầu hết các trình chỉnh sửa đều có các tính năng rất giống nhau
Nếu bạn không có sở thích cá nhân, tôi thực sự khuyên dùng Mã VS. Gần đây, VS Code đã trở thành trình soạn thảo tiêu chuẩn trên thực tế để phát triển web
Đây là biểu đồ từ phiên bản mới nhất của khảo sát State of JS. Trong cuộc khảo sát này, hơn 23.000 nhà phát triển đã được hỏi về sở thích của họ đối với việc phát triển web. Đại đa số chọn Mã VS
Nếu bạn chưa từng xem khảo sát State of JS trước đây, thì tôi thực sự khuyên bạn nên làm. Nó có thể cung cấp cho bạn một cái nhìn tổng quan tuyệt vời về các xu hướng mới nhất với JavaScript. Bạn có thể tìm hiểu những công cụ và thư viện nào mọi người thích sử dụng và những công cụ và thư viện nào họ sẽ sớm từ bỏ
Một trong những tính năng tuyệt vời nhất của tất cả các trình chỉnh sửa chính thống là bạn có thể thêm tiện ích mở rộng cho chúng. Hãy xem qua hai tiện ích mở rộng phải có
Cách tự động định dạng mã của bạn trong Mã VS
Prettier là một tiện ích mở rộng giúp mã của bạn dễ đọc hơn và nhất quán hơn
Giả sử bạn đã sao chép nội dung nào đó từ Stack Overflow và nó khó đọc. Việc lập bảng bị tắt, một dòng quá dài, v.v. Sau đó, bạn chỉ cần lưu tệp và thật kỳ diệu, mọi thứ sẽ như bình thường
Đây là những gì Prettier làm. Nó định dạng mã dựa trên các phương pháp hay nhất. Nó không chỉ sửa lỗi lập bảng và ngắt dòng. Nó cũng thêm dấu ngoặc đơn để cải thiện khả năng đọc mã, đảm bảo bạn nhất quán với dấu ngoặc kép, v.v.
Để làm cho nó hoạt động, trước tiên, bạn phải cài đặt tiện ích mở rộng Prettier. Trong Mã VS, hãy chuyển đến bảng Tiện ích mở rộng, tìm kiếm Prettier, sau đó cài đặt nó
Cài đặt tiện ích mở rộng không tự động định dạng tệp của bạn khi lưu theo mặc định. Hành vi mặc định là khi bạn đã cài đặt tiện ích mở rộng, bạn có thể nhấp chuột phải vào tệp, sau đó chọn Định dạng tài liệu. Hoặc chọn một phần của tệp rồi chọn Định dạng Lựa chọn
Lần đầu tiên bạn làm điều này, bạn cần chọn trình định dạng mặc định. Mã VS đã có một trình định dạng, nó không mạnh bằng Prettier. Vì vậy, bây giờ chúng tôi có hai trình định dạng, chúng tôi phải cho VS Code biết rằng trong tương lai, khi định dạng, chúng tôi muốn sử dụng Prettier
Nếu bạn muốn tự động định dạng tệp của mình trên Lưu, bạn cần thay đổi cài đặt
Chuyển đến Cài đặt trong Tùy chọn mã VS của bạn và tìm kiếm tùy chọn Định dạng khi lưu. Theo mặc định, điều này là sai, vì vậy hãy đảm bảo rằng bạn đánh dấu vào hộp kiểm. Sau đó, mỗi khi bạn lưu tệp, quá trình định dạng sẽ tự động diễn ra
Định dạng có thể gây tranh cãi, mặc dù. Trong hầu hết các trường hợp, đặc biệt là đối với người mới bắt đầu, tôi thực sự khuyên bạn nên cài đặt mặc định. Nhưng nếu bạn thích một phong cách khác, bạn có thể tùy chỉnh mọi thứ
Bạn có thể chỉ định bằng nhận xét để bỏ qua các dòng cụ thể và bạn có thể tạo tệp rc nơi bạn có thể liệt kê các tùy chọn của mình
Trong thư mục gốc của dự án, bạn có thể tạo một tệp có tên. prettierrc và thêm một số tùy chọn. Một tùy chọn điển hình có thể là nếu bạn thích dấu ngoặc đơn thay vì dấu ngoặc kép trong tệp của mình. Hoặc nếu bạn không muốn có dấu chấm phẩy ở cuối dòng
Với cấu hình này, khi bạn lưu tệp của mình, bạn sẽ thấy một kết quả khác
Có nhiều lựa chọn hơn tất nhiên. Nếu bạn muốn tìm hiểu sâu hơn, hãy xem tài liệu của Prettier
Tại sao bạn cần nút cho dự án giao diện người dùng?
Trước khi chuyển sang tiện ích mở rộng bắt buộc thứ hai, chúng tôi cần thiết lập một số thứ khác. Đầu tiên, chúng ta cần nói về Node. js. Node là gì và tại sao bạn cần nó ngay cả khi bạn là nhà phát triển giao diện người dùng?
Nút thường được liên kết với phát triển back-end, nhưng điều đó không hoàn toàn đúng.
Nếu bạn thấy mô tả công việc nơi họ đang tìm kiếm một nhà phát triển Node, thì có lẽ họ thực sự đang tìm kiếm một nhà phát triển back-end.
Tuy nhiên, bạn sẽ sử dụng nút ngay cả khi bạn phát triển giao diện người dùng
Vậy Node là gì, tại sao mọi người nghĩ rằng nó dành cho phát triển back end và tại sao bạn cần nó ngay cả với tư cách là nhà phát triển front end?
Nút là thời gian chạy JavaScript. Nó chạy các tệp JavaScript bên ngoài trình duyệt. Có hai cách để chạy mã JavaScript. Bạn có nó như một phần của trang web và chạy toàn bộ trang web trong trình duyệt hoặc bạn chỉ chạy tệp JavaScript với Node
Trong ví dụ này, chúng tôi có một tệp JavaScript rất đơn giản in Hello World ra bảng điều khiển
Nếu chúng ta đã cài đặt Node, chúng ta có thể vào terminal, điều hướng đến thư mục chứa tệp này rồi chạy nó với Node như thế này. Bạn có thể thấy rằng tệp đã được thực thi và kết quả nằm trong bảng điều khiển
Đó thực sự là Node, một công cụ tự chạy các tệp JavaScript
JavaScript chủ yếu hoạt động theo cùng một cách trong cả hai trường hợp. Nhưng cũng có những khác biệt về những gì JavaScript có thể làm trong trình duyệt và khi nó chạy với Node
Chẳng hạn, khi chạy trong trình duyệt, JavaScript có thể truy cập các phần tử HTML và nó có thể sửa đổi chúng. Đó là điểm chính của việc có JavaScript ngay từ đầu
Trong Node, không có tệp HTML xung quanh mà JavaScript có thể truy cập. JavaScript tự chạy
Mặt khác, trong Node, JavaScript có thể truy cập hệ thống tệp của bạn và đọc và ghi tệp của bạn
Chẳng hạn, bạn có thể chạy các tập lệnh trên máy của mình để tạo khung dự án cho bạn. Bạn có thể chạy kiểm tra các tệp của mình và tự động sửa lỗi. Hoặc bạn có thể chạy các tệp thử nghiệm của mình
Nói tóm lại, Node cho phép bạn chạy một số tập lệnh giúp cuộc sống của bạn dễ dàng hơn
Để cài đặt nút, hãy truy cập nodejs. org và cài đặt phiên bản ổn định mới nhất có nhãn là LTS. Nếu bạn không chắc mình đã có Node hay chưa, bạn cũng có thể vào terminal của mình và chạy node -v để kiểm tra. Nếu bạn nhận được số phiên bản, bạn có Node
Vì vậy, để trả lời câu hỏi, tại sao mọi người lại liên kết Node với phát triển phụ trợ? . Vì vậy, vâng, nếu bạn là nhà phát triển phụ trợ sử dụng JavaScript, bạn sẽ sử dụng Node. Nhưng Node còn hơn thế nữa
Cách chạy dự án của bạn
Bây giờ chúng tôi đã cài đặt Node, chúng tôi có thể cài đặt một gói. một gói là gì?
Tại sao bạn không thể chạy các tệp của mình trong trình duyệt? . Bạn thậm chí có thể không cần một gói
Nhưng các công cụ phát triển web đã phát triển và thời điểm bạn đang sử dụng bất kỳ thứ gì cao cấp hơn, trình duyệt của bạn sẽ không hiểu các tệp của bạn
Bạn có đang sử dụng React không? . Bạn cần một công cụ để biến nó thành JavaScript đơn giản. Nếu không, nó sẽ không chạy trong trình duyệt
Bạn có đang sử dụng SCSS hoặc một số phương ngữ CSS khác không?
Một lý do khác khiến bạn muốn sử dụng trình đóng gói là nó có thể tạo bản xem trước trực tiếp trang web của bạn khi bạn đang viết mã. Bất cứ khi nào bạn lưu tệp, bạn sẽ thấy ngay kết quả trong trình duyệt của mình
Vì vậy, làm thế nào để chọn một bundler? . Hiện nay, bundler được sử dụng nhiều nhất là webpack. Webpack là một công cụ rất mạnh với nhiều tùy chọn cấu hình. Nhưng nhiều lựa chọn này cũng là điểm yếu của nó. Thiết lập nó không phải là một điều dễ dàng nếu bạn chưa quen với nó
Một lựa chọn tuyệt vời khác gần đây đã trở nên phổ biến là Parcel. Bưu kiện có các tính năng tương tự như webpack. Trong một số cách, nó thậm chí còn tốt hơn
Điều tuyệt vời về nó là một khi bạn đã cài đặt nó, nó không cần cấu hình. Bưu kiện tự động tìm ra những gì bạn đang sử dụng và diễn giải các tệp của bạn
Bạn có đang sử dụng React không? . Bạn có đang sử dụng SCSS không? . Bưu kiện biết phải làm gì
Để cài đặt Parcel, bạn cần chạy một lệnh trong thiết bị đầu cuối của mình. Chúng tôi sẽ sử dụng npm, trình quản lý gói nút, để cài đặt nó. npm là một công cụ đi kèm với Node. Nếu bạn đã cài đặt Node, bạn cũng có npm
Với npm, bạn có thể cài đặt các thư viện JavaScript trên máy tính của mình trên toàn cầu hoặc cụ thể cho một dự án
Đi đến thiết bị đầu cuối của bạn và chạy lệnh sau. Thẻ -g ở đây có nghĩa là toàn cầu. Khi bạn đã cài đặt Parcel trên máy tính của mình, bạn sẽ có thể sử dụng nó để chạy bất kỳ dự án nào với nó. Bạn không phải cài đặt Parcel cho từng dự án bạn tạo, bạn chỉ cần thực hiện một lần
npm install -g parcel-bundlerGhi chú. Lệnh trên sẽ cài đặt Bưu kiện 1. Tại thời điểm viết bài, Parcel 2 đang ở giai đoạn thử nghiệm và bạn cũng có thể cài đặt nó với npm install -g bưu kiện
Sau khi cài đặt Parcel trên toàn cầu, hãy xem cách chúng tôi có thể sử dụng nó để chạy một dự án
Giả sử chúng ta có một trang web với các tệp HTML, CSS và JavaScript. Chúng tôi có thể sử dụng Bưu kiện để tạo bản xem trước trực tiếp cho chúng tôi
Mở terminal và đảm bảo rằng bạn đang ở trong thư mục chứa dự án của bạn. Nếu bạn đang sử dụng Mã VS, bạn có thể sử dụng thiết bị đầu cuối tích hợp sẽ tự động bắt đầu ở đúng thư mục
Khi chúng tôi đảm bảo rằng chúng tôi đang ở đúng thư mục, chúng tôi có thể chạy bưu kiện bằng lệnh sau. Điều này sẽ cung cấp cho bạn một URL nơi bạn có thể xem kết quả. Và bất cứ khi nào chúng tôi thay đổi một tệp, chúng tôi có thể thấy kết quả khi lưu trực tiếp trong trình duyệt
parcel index.htmlSau khi bạn bắt đầu tập lệnh này, tập lệnh sẽ chạy và tạo bản xem trước trực tiếp cho trang web của bạn cho đến khi bạn dừng tập lệnh hoặc đóng cửa sổ đầu cuối. Nói chung, bạn có thể giữ nó chạy trong khi bạn đang phát triển trang web của mình. Sau đó, khi bạn hoàn thành, bạn có thể nhấn Ctrl + C để dừng nó
Nếu nó không được đồng bộ hóa hoặc bạn ngắt nó do lỗi, thì bạn cũng có thể khởi động lại nó bằng cách nhấn Ctrl + C để dừng nó, sau đó chạy lại cùng một tập lệnh
Tất nhiên, Parcel còn hơn thế nữa. Bây giờ thay vì CSS đơn giản, bạn cũng có thể sử dụng SCSS chẳng hạn. Điều này cho phép bạn sử dụng nhiều tính năng thú vị như khai báo lồng nhau, sử dụng mixin hoặc gọi hàm, v.v. Nó giống như một CSS với siêu năng lực. Hoặc thậm chí bạn có thể thay thế HTML và sử dụng Pug để thay thế
Cách thêm thư viện vào dự án JavaScript của bạn
Bây giờ chúng tôi đã cài đặt Node và chúng tôi đã có bản xem trước lén lút của npm, hãy xem cách chúng tôi có thể thêm thư viện vào dự án của mình
Trước đây, các nhà phát triển đã sử dụng CDN để thêm thư viện. Bạn có thể nhập một thư viện bằng cách có một thẻ script trong HTML của bạn trỏ đến một URL
Điều đó tốt và nó vẫn hoạt động tốt, nhưng nhiều nhà phát triển ngày nay sử dụng npm hoặc trình quản lý gói nút để thêm thư viện vào dự án của họ. Vì vậy, làm thế nào nó hoạt động?
Trước tiên, bạn phải khởi tạo dự án bằng lệnh sau trong thiết bị đầu cuối của mình. Một lần nữa, bạn cần chạy lệnh này trong thư mục gốc của dự án của bạn [gợi ý. sử dụng thiết bị đầu cuối tích hợp của VS Code để bắt đầu vào đúng thư mục]
npm init —yesLệnh này đã khởi tạo một gói. json trong thư mục gốc của bạn với một số siêu dữ liệu. Nó có những thứ như tên dự án, mô tả, số phiên bản, v.v. Khi bạn thêm cờ có, tất cả các giá trị này sẽ có giá trị mặc định
Bây giờ chúng ta có thể thêm các thư viện vào gói của mình bằng lệnh cài đặt npm. Trong bài viết trước của tôi, chúng tôi đã sử dụng Ba. js để hiển thị hộp 3D trong trình duyệt
Vì vậy, như một ví dụ, hãy cài đặt Three. js. Đi đến thiết bị đầu cuối của bạn một lần nữa, đảm bảo rằng bạn đang ở đúng thư mục và chạy lệnh sau
npm install threeĐiều này sẽ cài đặt Ba. js. Làm sao bạn biết từ khóa là ba ở đây chứ không phải baj?
Khi bạn không biết tên gói, bạn có thể google npm và tên thư viện bạn cần. Hoặc trong trường hợp bạn thậm chí không biết tên thư viện, bạn cũng có thể tìm kiếm thư viện npm 3D và xem những gì Google nghĩ ra
Chúng ta có thể lần lượt xem qua các gói này và chọn một gói dựa trên khả năng của chúng và thông tin khác. Các gói này chủ yếu đi kèm với các mô tả và ví dụ nhanh để cung cấp cho bạn ý tưởng về những gì thư viện có thể làm cho bạn
Một chỉ báo khác mà bạn có thể muốn theo dõi là lượt tải xuống hàng tuần và thời gian cập nhật lần cuối để đảm bảo bạn chọn một thư viện được duy trì tích cực mà mọi người vẫn sử dụng
Khi bạn tìm thấy gói bạn đang tìm kiếm, bạn có thể thấy lệnh cài đặt nó ở góc trên cùng bên phải. npm tôi ba. Tôi ở đây chỉ là cách viết tắt của cài đặt
Khi chúng tôi chạy lệnh này, ba điều xảy ra
Đầu tiên, nó sẽ thêm phiên bản mới nhất của Three. js vào gói của bạn. json dưới dạng phụ thuộc dự án
Sau đó, nó cũng tạo ra một tệp khóa gói. Cả hai thứ này, phần phụ thuộc trong gói của bạn. json và tệp khóa gói, là những thứ mà bạn không bao giờ nên chỉnh sửa thủ công. Để thêm, xóa hoặc cập nhật các gói, bạn luôn sử dụng các lệnh như cài đặt npm, gỡ cài đặt npm, v.v.
Điều thứ ba sẽ xảy ra khi bạn chạy lệnh cài đặt npm là thư mục node_modules được tạo. Đây là thư mục chứa mã nguồn thực của Three. js sẽ là
Vì vậy, khi bạn nhập Three. js trong dự án của bạn, nó sẽ tra cứu nó trong thư mục này. Thư mục này lại là thứ mà bạn không bao giờ muốn thay đổi thủ công
Vì vậy, bây giờ chúng tôi đã cài đặt Three. js, chúng ta có thể tạo một trang web rất đơn giản hiển thị hộp 3D. Đó là một tệp HTML đơn giản và một tệp JavaScript có mã cho hộp 3D
Chìa khóa ở đây là trong tệp JavaScript của bạn, bạn nhập Ba. js với câu lệnh nhập. Và điều đó sẽ sử dụng gói mà bạn vừa cài đặt
Sau đó, chúng ta có thể chạy dự án với Parcel. Sử dụng nhập khẩu có nghĩa là chúng tôi sử dụng hệ thống mô-đun ngay bây giờ. Chạy một dự án với cú pháp mô-đun có thể hơi phức tạp, nhưng vì chúng tôi đang sử dụng Parcel để chạy dự án của mình nên nó hoạt động trơn tru mà không có bất kỳ câu hỏi nào. Đó là một trong những lý do chúng tôi sử dụng Parcel
Nếu bạn muốn tìm hiểu thêm về cách xây dựng game 3D với Three. js hãy xem bài viết trước của tôi về cách tạo một chiếc ô tô tối giản trong trình duyệt
Cách nhận các mẹo viết mã khi bạn viết mã
Tiện ích mở rộng phải có thứ hai cho Mã VS là ESLint. Trong khi Prettier đang định dạng mã, ESLint có thể cung cấp cho bạn các mẹo viết mã
Có một số mẫu trong JavaScript có thể gây ra lỗi hoặc có thể gây hiểu lầm khi bạn cố gắng hiểu mã
Trong ví dụ này, chúng tôi khai báo một biến, nhưng sau đó chúng tôi mắc lỗi đánh máy và chúng tôi cố gắng sử dụng một biến khác không tồn tại
ESLint sẽ làm nổi bật điều này cho bạn. Nó sẽ đưa ra cảnh báo cho bạn cả ở phần khai báo biến nói rằng bạn đã tạo một biến mà bạn không sử dụng và ở phần sử dụng nó sẽ nói rằng bạn cố gắng sử dụng một biến không được khai báo
Sau những cảnh báo này, thật dễ dàng để nhận ra rằng bạn đã mắc lỗi đánh máy. Tất nhiên, ESLint phức tạp hơn nhiều so với việc chỉ bắt lỗi đơn giản này. Ngoài ra còn có những cái ít rõ ràng hơn mà bạn có thể không hiểu trước tại sao nó lại phàn nàn
Tại thời điểm đó, bạn cũng có thể nhấp vào liên kết để xem giải thích chi tiết hơn về lý do tại sao mẫu này được coi là có hại và bạn có thể làm gì để tránh nó
Vậy làm thế nào bạn có thể sử dụng ESLint trong dự án của mình? . May mắn là hầu hết các bước này bạn chỉ phải thực hiện một lần
Đầu tiên, như bạn đã làm với Prettier, bạn phải cài đặt tiện ích mở rộng ESLint. Chuyển đến Tiện ích mở rộng, tìm kiếm ESLint và cài đặt nó
Sau đó, bạn cũng cần tạo cấu hình ESLint. Tuy nhiên, trước khi bạn làm điều đó, trước tiên bạn cần đảm bảo rằng dự án của bạn được khởi tạo với npm init
Nếu bạn chưa có gói. json thì trước tiên bạn phải chạy npm init —yes để khởi tạo dự án của bạn
Sau đó, bạn có thể tạo cấu hình ESLint bằng lệnh sau
npx eslint --initnpx là một công cụ khác đi kèm với Node. Nó có thể chạy các tập lệnh thậm chí không có trên máy tính của bạn
Trong trường hợp này, chúng tôi chạy tập lệnh ESlint nhưng chúng tôi chưa bao giờ thực sự cài đặt ESlint. Chúng tôi đã cài đặt tiện ích mở rộng ESLint, nhưng đó không phải là tập lệnh mà chúng tôi đang thực thi ở đây
Kịch bản này sẽ hỏi bạn một số câu hỏi. Hầu hết trong số này là rõ ràng ngoại trừ cái đầu tiên
- Bạn muốn sử dụng ESLint như thế nào?
Bạn có muốn ESLint chỉ kiểm tra các vấn đề về cú pháp hay bạn muốn nó cũng tìm các vấn đề có thể xảy ra hoặc thậm chí bạn muốn nó kiểm tra các vấn đề về văn phong?
Nếu bạn cũng sử dụng Prettier, bạn cần chọn tùy chọn thứ hai. Bởi vì nếu cả Prettier và ESLint đều cố gắng đề xuất một phong cách cho bạn, thì rất có thể họ sẽ xung đột
Vì vậy, nếu bạn sử dụng Prettier, bạn không muốn ESLint kiểm tra kiểu dáng, chỉ kiểm tra cú pháp và các sự cố có thể xảy ra
- Dự án của bạn sử dụng loại mô-đun nào?
Trong một dự án lối vào, bạn có thể sử dụng nhập và xuất để bạn chọn tùy chọn đầu tiên
- Dự án của bạn sử dụng framework nào?
Nếu bạn sử dụng React hoặc Vue. js chọn tùy chọn thích hợp, nếu không chọn không có
- Dự án của bạn có sử dụng Bản in không?
Nếu bạn dùng Typescript thì chọn yes, nếu không thì nhấn enter để tiếp tục
- Dự án của bạn chạy ở đâu?
Dự án của bạn phải chạy trong trình duyệt hay với Node?
- Bạn muốn tập tin cấu hình của mình ở định dạng nào?
Điều này không thực sự quan trọng, nhưng nếu sau này bạn muốn tùy chỉnh cấu hình, bạn có thể muốn chọn JavaScript hoặc JSON
Tập lệnh cuối cùng hỏi liệu nó có nên cài đặt ESlint như một phụ thuộc phát triển không. Ở đây bạn nên chọn có. Điều này sẽ cài đặt ESlint để nó có sẵn trong thư mục node_modules của bạn
Sau bước này, bạn sẽ có cấu hình của mình và bạn có thể tìm thấy ESlint trong gói của mình. json dưới dạng phụ thuộc phát triển
Phụ thuộc phát triển có nghĩa là ESlint không phải là một phần của mã nguồn trang web của bạn, nhưng công cụ yêu cầu nó. Trong trường hợp này, tiện ích mở rộng ESLint yêu cầu gói ESlint được cài đặt cho dự án của bạn
Bây giờ chúng tôi đã cài đặt tiện ích mở rộng ESLint, có cấu hình ESLint và chúng tôi đã cài đặt gói ESlint, chúng tôi cũng cần cấp quyền truy cập tiện ích mở rộng cho gói này
Đây là yêu cầu bảo mật bạn chỉ phải thực hiện một lần. Ở dưới cùng của trình chỉnh sửa, sau khi bạn đã cài đặt tiện ích mở rộng, bạn sẽ tìm thấy nút ESLint có hình tròn gạch chéo ở phía trước. Nhấp vào đó và chọn Cho phép ở mọi nơi. Điều này cho phép tiện ích mở rộng ESLint cũng hoạt động bình thường cho bất kỳ dự án nào trong tương lai
Sau tất cả các bước này, ESLint cuối cùng cũng hoạt động. Nếu chúng ta truy cập một tệp JavaScript và cố gắng sử dụng một biến không được khai báo, thì khi lưu, nó sẽ làm nổi bật vấn đề
ESLint cũng có thể cung cấp cho bạn lỗi ở những nơi mà mọi thứ thực sự ổn. Trớ trêu thay, nếu bạn chọn cấu hình ESlint phải ở trong tệp JavaScript, thì nó sẽ báo lỗi cho bạn trong chính cấu hình đó
Điều này là do chúng tôi đặt môi trường cho dự án của chúng tôi là trình duyệt và cấu hình này dựa trên một biến toàn cục không tồn tại trong trình duyệt
Tập tin này không chính xác là một phần của trang web của chúng tôi, mặc dù. Đó là tệp cấu hình sẽ không phải là một phần của mã nguồn cuối cùng và môi trường tự nhiên của nó không phải là trình duyệt mà là Node. js. Và trong Node, biến toàn cục này tồn tại. Vì vậy, tệp này thực sự chính xác và không nên có lỗi ở đây
Một cách để khắc phục điều này là thiết lập danh sách các tệp mà ESLint nên bỏ qua. Trong thư mục gốc của ứng dụng, bạn có thể tạo một tệp có tên. eslintigore và thêm. eslintrc. js với nó. Khi chúng tôi lưu ESLint này sẽ không chạy bất kỳ kiểm tra nào trên tệp cấu hình nữa
ESLint cũng có khả năng tùy biến cao. Để biết thêm chi tiết, hãy xem tài liệu của ESLint
Cách thiết lập dự án React hoặc Vue
Bạn có kế hoạch xây dựng một trang web với React hoặc Vue. js?
Khởi tạo một dự án với npm init, cài đặt các phụ thuộc, thiết lập ESLint rồi chạy dự án của bạn với Parcel
Hãy xem video của tôi trên YouTube nơi chúng tôi thực hiện các bước chúng tôi đã làm trước đây và một dự án ví dụ nhanh với React và Vue. js
Bước tiếp theo
Đó là những công cụ cơ bản bạn có thể sử dụng khi làm việc trên dự án JS giao diện người dùng. Thêm thư viện với npm, giữ cho mã của bạn gọn gàng hơn với Prettier, tránh những cơn đau đầu không cần thiết với ESLint và chạy dự án của bạn với Parcel
Bây giờ chúng tôi đã thiết lập một dự án giao diện người dùng, bạn đã sẵn sàng để bắt đầu xây dựng trang web của mình
Điều gì xảy ra sau khi bạn hoàn thành nó? . Nếu bạn sử dụng bưu kiện, bạn có thể tạo một gói cuối cùng bằng lệnh sau
parcel build index.html —public-url '.'Thao tác này sẽ tạo một gói trong thư mục dist mà bạn có thể chạy trên trình duyệt. Bạn có thể đơn giản chạy chỉ mục mới. html từ thư mục dist trong trình duyệt để xem kết quả cuối cùng của bạn
Và đó là nó. Cảm ơn bạn đã đọc. ]
Đăng ký để biết thêm hướng dẫn về Phát triển Web
Hunor Márton Borbély
Phát triển trò chơi với JavaScript, hướng dẫn mã hóa sáng tạo, canvas HTML, SVG, Three. js và một số React và Vue https. //twitter. com/HunorBorbelyhttps. // codepen. io/HunorMarton…
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nhà phát triển web toàn diện, huấn luyện viên, đăng các trò chơi và hướng dẫn mã hóa sáng tạo trên YouTube và CodePen
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu