Vỏ mysql cho vscode
|
Bài viết này sẽ hướng dẫn bạn lập trình Angular 7 với trình soạn thảo Visual Studio Code và cài đặt các plugin hữu ích trong Visual Studio Code. Visual Studio Code là một công cụ rất hữu ích để phát triển ứng dụng Angular Show Nội dung chính
Cài đặt Visual Studio CodeBạn có thể tải về và cài đặt trình soạn thảo Visual Studio Code tại đây. Tải xuống mã Visual Studio Phiên bản cài đặt phù hợp với hệ điều hành của bạn Sau khi cài đặt giao diện ban đầu của Visual Studio Code như sau Tạo dự án AngularBạn đã xem lại hướng dẫn Tạo dự án đầu tiên trong Angular7 Hoặc, làm theo hướng dẫn sau Chúng ta sẽ sử dụng Angular CLI để tạo dự án Angular. Để cài đặt và sử dụng dòng lệnh giao diện cũng như chạy máy chủ ứng dụng Angular, bạn cần cài đặt Node. js JavaScript runtime và npm (trình quản lý gói Node. js). Bạn chỉ cần cài đặt Node. js and it will include npm Để kiểm tra xem bạn đã cài đặt nút chính xác chưa. js và npm trên máy của mình chưa, bạn có thể sử dụng lệnh ng new my-app0 và ng new my-app1 Cài đặt góc mới nhất. nó sẽ mất vài phút để cài đặt Angular npm install -g @angular/cli Bây giờ bạn có thể tạo dự án Angular mới bằng cách nhập ng new my-app ng new my-app2 is name of your directory for your application. Có thể mất vài phút để tạo ứng dụng Angular trong TypeScript và cài đặt các phụ thuộc của nó Chạy ứng dụng Angular cd my-app ng serve Default angle sẽ lắng nghe cổng 4200. Mở trình duyệt lên và nhập http. //máy chủ cục bộ. 4200 to view results Open project Angular bằng Visual Studio CodeĐầu tiên bạn cần phải mở trình soạn thảo Visual Studio Code Tiếp theo, chọn File -> Open Folder Tìm đến mục chứa dự án Angular của bạn Chọn Chọn thư mục Bây giờ mở rộng thư mục ng new my-app3 và chọn mở tệp ng new my-app4. Bạn sẽ thấy rằng mã được tô các màu khác nhau, nếu bạn đặt con trỏ trên dấu trích đơn, hoặc dấu trích đoạn, phần đóng/mở sẽ được tô sáng Dự án chỉnh sửa dự án AngularBây giờ chúng ta sẽ chỉnh sửa ứng dụng thành "Xin chào thế giới". Quay lại tệp ng new my-app4 và thay đổi giá trị của ng new my-app1 thành "Xin chào thế giới" import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Hello World';
}
Khi bạn lưu tệp ng new my-app4, ứng dụng đang chạy sẽ cập nhật trang web và bạn sẽ thấy "Welcome to Hello World. " Run project AngularChọn Terminal -> New Terminal Thay đổi mặc định Shell, bằng cách chọn Select Default Shell Select default cmd. người cũ Chọn Terminal -> New Terminal Thực thi lệnh ng new my-app3 để chạy ứng dụng Angular Chạy ứng dụng Angular thành công Dự án gỡ lỗi dự án AngularCài đặt phần mở rộng trình gỡ lỗiĐể gỡ lỗi mã Angular, bạn cần cài đặt plugin cho tiện ích mở rộng VS Code Debugger for Chrome Chú thích. Bạn cũng có thể cài đặt trình sửa lỗi plugin cho trình duyệt Edge và Firefox Hoặc bạn cũng có thể cài đặt plugin trực tiếp trên Mã VS bằng cách nhấn tổ hợp phím Ctrl+Shift+X và nhập "chrome" vào hộp tìm kiếm Sau đó nhấp vào cài đặt để cài đặt plugin cho Trình gỡ lỗi cho Chrome Cài đặt breakpointTo set breakpoint, click to the left side of the lines lines. Ví dụ đặt điểm dừng tại dòng số 9 của tệp ng new my-app4, điểm dừng được biểu diễn dưới dạng một hình tròn màu đỏ Cấu hình trình gỡ lỗi ChromeChúng ta cần cấu hình cho debugger. Để làm như vậy, hãy chuyển đến chế độ xem Run (nhấn tổ hợp phím Ctrl + Shift + D) và nhấp vào nút Bánh răng để tạo tệp cấu hình ng new my-app5. Chọn Chrome từ Chọn Môi trường. Điều này sẽ tạo một tệp ________ 15 trong thư mục. vscode mới trong dự án của bạn, bao gồm một cấu hình để khởi động trang web Chúng ta cần thay đổi url cổng từ 8080 sang 4200. Tệp ng new my-app5 trông giống như thế này {
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
Nhấn F5 hoặc mũi tên xanh để bắt đầu gỡ lỗi và duyệt trình mới Click F10 to jump di chuyển đến dòng code next Các plugin hữu ích cho Visual Studio CodeBạn có thể cài đặt 2 plugin hữu ích sau 1. npm Intellisense 2. đường dẫn Intellisense Để cài đặt, nhấn tổ hợp phím Ctrl + Shift + X , sau đó tìm plugin -> select plugin -> click intall để cài đặt Sau khi cài đặt 2 plugin trên, bạn sẽ có một công cụ hữu ích như sau. Vui lòng xóa nội dung của StyleUrl và nhập ". /", bạn sẽ thấy một danh sách sổ xuống chứa các tệp của dự án |
