Hướng dẫn is there javascript in visual studio? - có javascript trong studio trực quan không?

Chủ đề này mô tả một số tính năng JavaScript nâng cao được hỗ trợ bởi Visual Studio Code. Sử dụng dịch vụ ngôn ngữ TypeScript, mã VS có thể cung cấp hoàn thành thông minh (IntelliSense) cũng như kiểm tra loại JavaScript.

IntelliSense

JavaScript Intellisense của Visual Studio Code cung cấp hoàn thành mã thông minh, thông tin tham số, tìm kiếm tài liệu tham khảo và nhiều tính năng ngôn ngữ nâng cao khác. JavaScript Intellisense của chúng tôi được cung cấp bởi Dịch vụ Ngôn ngữ JavaScript được phát triển bởi nhóm TypeScript. Mặc dù Intellisense chỉ nên hoạt động cho hầu hết các dự án JavaScript mà không có cấu hình nào, bạn có thể làm cho Intellisense trở nên hữu ích hơn với JSDOC hoặc bằng cách định cấu hình dự án

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4.

Để biết chi tiết về cách thức hoạt động của JavaScript Intellisense, bao gồm dựa trên suy luận loại, chú thích JSDOC, khai báo bản thảo và trộn các dự án JavaScript và TypeScript, hãy xem tài liệu dịch vụ ngôn ngữ JavaScript.

Khi suy luận loại không cung cấp thông tin mong muốn, thông tin loại có thể được cung cấp rõ ràng với các chú thích JSDOC. Tài liệu này mô tả các chú thích JSDOC hiện được hỗ trợ.

Ngoài các đối tượng, phương thức và thuộc tính, cửa sổ JavaScript IntelliSense cũng cung cấp hoàn thành từ cơ bản cho các ký hiệu trong tệp của bạn.

Đánh máy và mua lại loại tự động

IntelliSense cho các thư viện và khung JavaScript được cung cấp bởi các tệp khai báo loại TypeScript (typing). Các tệp khai báo loại được viết bằng TypeScript để chúng có thể diễn đạt các loại dữ liệu của các tham số và hàm, cho phép mã VS cung cấp trải nghiệm Intellisense phong phú một cách hiệu suất.

Nhiều thư viện phổ biến giao hàng với các tệp đánh máy để bạn tự động nhận được IntelliSense cho chúng. Đối với các thư viện không bao gồm các bản đánh máy,

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

5 của mã sẽ tự động cài đặt tệp đánh máy được duy trì cộng đồng cho bạn.

Loại thu nhận tự động yêu cầu NPMJS, Trình quản lý gói Node.js, được bao gồm trong thời gian chạy Node.js. Trong hình ảnh này, bạn có thể thấy IntelliSense, bao gồm Chữ ký phương thức, Thông tin tham số và Tài liệu của Phương thức cho Thư viện Lodash phổ biến.

Loại tệp khai báo được tự động tải xuống và quản lý bởi Visual Studio Code cho các gói được liệt kê trong

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

6 của dự án hoặc bạn nhập vào tệp JavaScript.

{
  "dependencies": {
    "lodash": "^4.17.0"
  }
}

Bạn có thể thay thế liệt kê các gói một cách rõ ràng để có được các tệp khai báo loại trong một jsconfig.json.

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

Hầu hết các thư viện JavaScript phổ biến giao hàng với các tệp khai báo hoặc có sẵn các tệp khai báo. Bạn có thể tìm kiếm gói tệp khai báo loại của thư viện bằng trang web Kindearch.

Khắc phục NPM không được cài đặt cảnh báo để thu nhận loại tự động

Tự động mua loại sử dụng NPM, Trình quản lý gói Node.js, để cài đặt và quản lý các tệp khai báo loại (đánh máy). Để đảm bảo rằng việc thu nhận loại tự động hoạt động đúng, trước tiên hãy đảm bảo rằng bạn đã cài đặt NPM trên máy của mình.

Chạy

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

7 từ một thiết bị đầu cuối hoặc dấu nhắc lệnh để nhanh chóng kiểm tra xem NPM có được cài đặt và có sẵn không.

NPM được cài đặt với thời gian chạy Node.js, có sẵn để tải xuống từ Nodejs.org. Cài đặt phiên bản LTS (Hỗ trợ dài hạn) hiện tại và thực thi NPM sẽ được thêm theo mặc định vào đường dẫn hệ thống của bạn.

Nếu bạn đã cài đặt NPM nhưng vẫn thấy thông báo cảnh báo, bạn có thể nói rõ ràng với mã VS trong đó NPM được cài đặt với cài đặt

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

8. Điều này phải được đặt thành đường dẫn đầy đủ của NPM có thể thực thi trên máy của bạn và điều này không phải khớp với phiên bản NPM bạn đang sử dụng để quản lý các gói trong không gian làm việc của bạn.

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

8 yêu cầu TypeScript 2.3.4+.

Ví dụ: trên Windows, bạn sẽ thêm một đường dẫn như thế này vào tệp

{
  "typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}

0 của mình:

{
  "typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}

Các dự án JavaScript (jsconfig.json)

Sự hiện diện của tệp jsconfig.json trong thư mục chỉ ra rằng thư mục là gốc của dự án JavaScript.

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 Chỉ định các tệp gốc và các tùy chọn cho các tính năng ngôn ngữ được cung cấp bởi dịch vụ ngôn ngữ JavaScript. Đối với các thiết lập phổ biến, không cần phải có tệp

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4, có những tình huống khi bạn muốn thêm

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4.

• Không phải tất cả các tệp nên nằm trong dự án JavaScript của bạn (ví dụ: bạn muốn loại trừ một số tệp hiển thị IntelliSense). Tình huống này là phổ biến với mã mặt trước và mã back-end.
• Không gian làm việc của bạn chứa nhiều hơn một bối cảnh dự án. Trong tình huống này, bạn nên thêm một tệp

  {
    "typeAcquisition": {
      "include": ["jquery"]
    }
  }
  

  4 tại thư mục gốc cho mỗi dự án.
• Bạn đang sử dụng trình biên dịch TypeScript để biên dịch cấp độ JavaScript Cấp độ xuống.

Vị trí của jsconfig.json

Để xác định mã của chúng tôi là một dự án JavaScript, hãy tạo

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 tại gốc của mã JavaScript của bạn như được hiển thị bên dưới. Một dự án JavaScript là các tệp nguồn của dự án và không nên bao gồm các tệp dẫn xuất hoặc đóng gói (chẳng hạn như thư mục

{
  "typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}

6).

Trong các dự án phức tạp hơn, bạn có thể có nhiều hơn một tệp

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 được xác định bên trong không gian làm việc. Bạn sẽ muốn làm điều này để mã nguồn trong một dự án không xuất hiện trong IntelliSense của một dự án khác.

Được minh họa dưới đây là một dự án với thư mục

{
  "typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}

8 và

{
  "typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}

9, hiển thị hai dự án JavaScript riêng biệt:

Viết jsconfig.json

Dưới đây là một mẫu đơn giản cho tệp

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4, xác định JavaScript

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

1 là

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

2 và thuộc tính

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

3 không bao gồm thư mục

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

4. Bạn có thể sao chép và dán mã này vào tệp

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 của bạn.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Thuộc tính

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

3 cho dịch vụ ngôn ngữ không phải là một phần của mã nguồn của bạn. Nếu IntelliSense chậm, hãy thêm các thư mục vào danh sách

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

3 của bạn (mã VS sẽ nhắc bạn thực hiện việc này nếu phát hiện hoàn thành chậm). Bạn sẽ muốn các tệp

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

3 được tạo bởi một quy trình xây dựng (chẳng hạn như thư mục

{
  "typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}

6). Những tập tin này sẽ khiến các đề xuất hiển thị hai lần và sẽ làm chậm IntelliSense.

Bạn có thể đặt rõ ràng các tệp trong dự án của mình bằng thuộc tính

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

0. Nếu không có thuộc tính

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

0, thì điều này mặc định bao gồm tất cả các tệp trong thư mục và thư mục con chứa. Khi thuộc tính

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

0 được chỉ định, chỉ có các tệp đó được bao gồm.

Dưới đây là một ví dụ với thuộc tính

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

0 rõ ràng:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

Thực tiễn tốt nhất và tuyến đường dễ bị lỗi ít nhất là sử dụng thuộc tính

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

0 với một thư mục

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

5 duy nhất. Lưu ý rằng các đường dẫn tệp trong

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

3 và

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

0 có liên quan đến vị trí của

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4.

Để biết thêm thông tin, hãy xem tài liệu JSConfig.json đầy đủ.

Di chuyển sang TypeScript

Có thể có các dự án TypeScript và JavaScript hỗn hợp. Để bắt đầu chuyển sang TypeScript, hãy đổi tên tệp

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 của bạn thành

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

0 và đặt thuộc tính

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

1 thành

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

2. Để biết thêm thông tin, xem di chuyển từ JavaScript.

Lưu ý:

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 giống như tệp

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

0, chỉ với

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

1 được đặt thành true. Xem tài liệu cho

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

0 ở đây để xem các tùy chọn có sẵn khác.

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 is the same as a

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

0 file, only with

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

1 set to true. See the documentation for

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

0 here to see other available options.

Loại kiểm tra JavaScript

Mã VS cho phép bạn tận dụng một số chức năng kiểm tra và báo cáo lỗi loại nâng cao của TypeScript trong các tệp JavaScript thông thường. Đây là một cách tuyệt vời để bắt những sai lầm lập trình phổ biến. Các kiểm tra loại này cũng cho phép một số bản sửa lỗi nhanh thú vị cho JavaScript, bao gồm thêm Nhập bị thiếu và thêm thuộc tính bị thiếu.Add missing import and Add missing property.

TypeScript có thể suy ra các loại trong các tệp

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

7 giống như trong các tệp

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

8. Khi các loại không thể được suy ra, chúng có thể được chỉ định bằng cách sử dụng nhận xét của JSDOC. Bạn có thể đọc thêm về cách TypeScript sử dụng JSDOC để kiểm tra loại JavaScript trong loại kiểm tra các tệp JavaScript.

Kiểu kiểm tra JavaScript là tùy chọn và chọn tham gia. Các công cụ xác thực JavaScript hiện tại như Eslint có thể được sử dụng cùng với chức năng kiểm tra loại tích hợp mới.

Bạn có thể bắt đầu với việc kiểm tra loại một vài cách khác nhau tùy thuộc vào nhu cầu của bạn.

Mỗi tập tin

Cách dễ nhất để kích hoạt kiểm tra loại trong tệp JavaScript là thêm

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

9 vào đầu tệp.

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

Sử dụng

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

9 là một cách tiếp cận tốt nếu bạn chỉ muốn thử kiểm tra xem một vài tệp nhưng chưa cho phép nó cho toàn bộ cơ sở mã.

Sử dụng một cài đặt

Để kích hoạt kiểm tra loại cho tất cả các tệp JavaScript mà không cần thay đổi bất kỳ mã nào, chỉ cần thêm

// @ts-nocheck
let easy = 'abc';
easy = 123; // no error

1 vào cài đặt không gian làm việc hoặc cài đặt người dùng của bạn. Điều này cho phép kiểm tra loại cho bất kỳ tệp JavaScript nào không phải là một phần của dự án

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 hoặc

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

0.

Bạn có thể chọn các tệp riêng lẻ ngoài kiểm tra loại với nhận xét

// @ts-nocheck
let easy = 'abc';
easy = 123; // no error

4 ở đầu tệp:

// @ts-nocheck
let easy = 'abc';
easy = 123; // no error

Bạn cũng có thể vô hiệu hóa các lỗi riêng lẻ trong tệp JavaScript bằng nhận xét

// @ts-nocheck
let easy = 'abc';
easy = 123; // no error

5 trên dòng trước lỗi:

let easy = 'abc';
// @ts-ignore
easy = 123; // no error

Sử dụng JSConfig hoặc TSConfig

Để cho phép kiểm tra loại cho các tệp JavaScript là một phần của

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 hoặc

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

0, hãy thêm

// @ts-nocheck
let easy = 'abc';
easy = 123; // no error

8 vào các tùy chọn trình biên dịch của dự án:

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4:

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

0:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Điều này cho phép kiểm tra loại cho tất cả các tệp JavaScript trong dự án. Bạn có thể sử dụng

// @ts-nocheck
let easy = 'abc';
easy = 123; // no error

4 để vô hiệu hóa kiểm tra loại mỗi tệp.

Kiểm tra loại JavaScript Yêu cầu TypeScript 2.3. Nếu bạn không chắc chắn phiên bản nào của TypeScript hiện đang hoạt động trong không gian làm việc của bạn, hãy chạy lệnh TypeScript: Chọn phiên bản phiên bản TypeScript để kiểm tra. Bạn phải có một tệp

let easy = 'abc';
// @ts-ignore
easy = 123; // no error

2 mở trong trình chỉnh sửa để chạy lệnh này. Nếu bạn mở một tệp TypeScript, phiên bản sẽ xuất hiện ở góc dưới bên phải.TypeScript: Select TypeScript Version command to check. You must have a

let easy = 'abc';
// @ts-ignore
easy = 123; // no error

2 file open in the editor to run this command. If you open a TypeScript file, the version appears in the lower right corner.

Biến toàn cầu và kiểm tra loại

Giả sử rằng bạn đang làm việc trong mã JavaScript Legacy sử dụng các biến toàn cầu hoặc API DOM không tiêu chuẩn:

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

0

Nếu bạn cố gắng sử dụng

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

9 với mã trên, bạn sẽ thấy một số lỗi về việc sử dụng các biến toàn cầu:

1. let easy = 'abc';
   // @ts-ignore
   easy = 123; // no error
   

   4 -

   let easy = 'abc';
   // @ts-ignore
   easy = 123; // no error
   

   5

2. let easy = 'abc';
   // @ts-ignore
   easy = 123; // no error
   

   4 -

   let easy = 'abc';
   // @ts-ignore
   easy = 123; // no error
   

   7

3. let easy = 'abc';
   // @ts-ignore
   easy = 123; // no error
   

   8 -

   let easy = 'abc';
   // @ts-ignore
   easy = 123; // no error
   

   5

Nếu bạn muốn tiếp tục sử dụng

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

9 nhưng tự tin rằng đây không phải là vấn đề thực tế với ứng dụng của bạn, bạn phải cho TypeScript biết về các biến toàn cầu này.

Để bắt đầu, hãy tạo

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 tại gốc của dự án của bạn:

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

1

Sau đó tải lại mã vs để đảm bảo thay đổi được áp dụng. Sự hiện diện của

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 cho phép TypeScript biết rằng các tệp JavaScript của bạn là một phần của dự án lớn hơn.

Bây giờ hãy tạo tệp

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

3 ở đâu đó không gian làm việc của bạn:

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

2

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

4 Tệp là khai báo loại. Trong trường hợp này,

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

3 cho phép TypeScript biết rằng toàn cầu

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

6 tồn tại và một tài sản

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

7 tồn tại trên

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

8. Bạn có thể đọc thêm về việc viết

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

4 trong tài liệu TypeScript.

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

4 Các tệp không thay đổi cách đánh giá JavaScript, chúng chỉ được sử dụng để cung cấp hỗ trợ ngôn ngữ JavaScript tốt hơn.

Sử dụng các nhiệm vụ

Sử dụng trình biên dịch TypeScript

Một trong những tính năng chính của TypeScript là khả năng sử dụng các tính năng ngôn ngữ JavaScript mới nhất và phát ra mã có thể thực thi trong JavaScript Runtimes chưa hiểu các tính năng mới hơn đó. Với JavaScript sử dụng cùng một dịch vụ ngôn ngữ, giờ đây nó cũng có thể tận dụng cùng một tính năng này.

Trình biên dịch TypeScript

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

1 có thể biên dịch các tệp JavaScript cấp độ xuống từ ES6 sang cấp độ ngôn ngữ khác. Định cấu hình

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 với các tùy chọn mong muốn và sau đó sử dụng đối số củaPP để tạo

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

1 Sử dụng tệp

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

4 của bạn, ví dụ

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

5 để biên dịch cấp độ xuống.

Đọc thêm về các tùy chọn trình biên dịch để biên dịch cấp độ xuống trong tài liệu JSConfig.

Chạy Babel

Bộ chuyển đổi Babel biến các tệp ES6 thành ES5 JavaScript có thể đọc được với các bản đồ nguồn. Bạn có thể dễ dàng tích hợp Babel vào quy trình làm việc của mình bằng cách thêm cấu hình bên dưới vào tệp

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

6 của bạn (nằm trong thư mục ____97 của Workspace). Cài đặt

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

8 làm cho nhiệm vụ này là tác vụ mặc định: Chạy cử chỉ tác vụ xây dựng.

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

9 nói với mã VS để tiếp tục chạy tác vụ này trong nền. Để tìm hiểu thêm, đi đến các nhiệm vụ.Babel into your workflow by adding the configuration below to your

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

6 file (located under the workspace's

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

7 folder). The

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

8 setting makes this task the default Task: Run Build Task gesture.

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

9 tells VS Code to keep running this task in the background. To learn more, go to Tasks.

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

3

Khi bạn đã thêm điều này, bạn có thể bắt đầu Babel với lệnh ⇧⌘B (Windows, Linux Ctrl+Shift+B) (Nhiệm vụ xây dựng) và nó sẽ biên dịch tất cả các tệp từ thư mục

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

5 vào thư mục

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

01.Babel with the ⇧⌘B (Windows, Linux Ctrl+Shift+B) (Run Build Task) command and it will compile all files from the

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

5 directory into the

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

01 directory.

Mẹo: Để được giúp đỡ với Babel CLI, hãy xem hướng dẫn sử dụng Babel. Ví dụ trên sử dụng tùy chọn CLI. For help with Babel CLI, see the instructions in Using Babel. The example above uses the CLI option.

Tắt hỗ trợ JavaScript

Nếu bạn thích sử dụng các tính năng ngôn ngữ JavaScript được hỗ trợ bởi các công cụ ngôn ngữ JavaScript khác như Flow, bạn có thể vô hiệu hóa hỗ trợ JavaScript tích hợp của mã vs. Bạn làm điều này bằng cách vô hiệu hóa TypeScript Language Extension TypeScript và các tính năng ngôn ngữ JavaScript (VSCode.Typescript-Language-Feates) cũng cung cấp hỗ trợ ngôn ngữ JavaScript.TypeScript and JavaScript Language Features (vscode.typescript-language-features) which also provides the JavaScript language support.

Để vô hiệu hóa hỗ trợ JavaScript/TypeScript, hãy chuyển đến chế độ xem phần mở rộng (⇧⌘x (Windows, Linux Ctrl+Shift+X)) và lọc trên các tiện ích mở rộng tích hợp (hiển thị các tiện ích mở rộng tích hợp trong ... nhiều hành động thả xuống), Sau đó nhập 'TypeScript'. Chọn phần mở rộng tính năng ngôn ngữ TypeScript và JavaScript và nhấn nút Tắt. VS mã tiện ích mở rộng tích hợp không thể được gỡ cài đặt, chỉ bị vô hiệu hóa và có thể được kích hoạt lại bất cứ lúc nào.⇧⌘X (Windows, Linux Ctrl+Shift+X)) and filter on built-in extensions (Show Built-in Extensions in the ... More Actions dropdown), then type 'typescript'. Select the TypeScript and JavaScript Language Features extension and press the Disable button. VS Code built-in extensions cannot be uninstalled, only disabled, and can be re-enabled at any time.

Chế độ Intellisense một phần

VS Code cố gắng cung cấp Intellisense toàn dự án cho JavaScript và TypeScript, đó là những gì tạo ra các tính năng như tự động miễn phí và đi đến định nghĩa có thể. Tuy nhiên, có một số trường hợp mã VS chỉ giới hạn khi làm việc với các tệp hiện đang mở của bạn và không thể tải các tệp khác tạo nên dự án JavaScript hoặc TypeScript của bạn.Go to Definition possible. However, there are some cases where VS Code is limited to working only with your currently opened files and is unable to load the other files that make up your JavaScript or TypeScript project.

Điều này có thể xảy ra trong một vài trường hợp:

• Bạn đang làm việc với mã JavaScript hoặc TypeScript trên VSCode.Dev hoặc GitHub.Dev và Vs Code đang chạy trong trình duyệt.
• Bạn mở một tệp từ một hệ thống tệp ảo (chẳng hạn như khi sử dụng tiện ích mở rộng kho lưu trữ GitHub).
• Dự án hiện đang tải. Sau khi tải hoàn thành, bạn sẽ bắt đầu nhận được Intellisense toàn dự án cho nó.

Trong những trường hợp này, Intellisense của VS sẽ hoạt động ở chế độ một phần. Chế độ một phần cố gắng hết sức để cung cấp IntelliSense cho bất kỳ tệp JavaScript hoặc Typecript nào bạn mở, nhưng bị hạn chế và không thể cung cấp bất kỳ tính năng Intellisense file nào.partial mode. Partial mode tries its best to provide IntelliSense for any JavaScript or TypeScript files you have open, but is limited and is not able to offer any cross-file IntelliSense features.

Những tính năng nào bị ảnh hưởng?

Dưới đây là danh sách không đầy đủ các tính năng bị vô hiệu hóa hoặc có chức năng hạn chế hơn ở chế độ một phần:

• Tất cả các tập tin đã mở được coi là một phần của một dự án duy nhất.
• Tùy chọn cấu hình từ

  {
    "typeAcquisition": {
      "include": ["jquery"]
    }
  }
  

  02 hoặc

  {
    "typeAcquisition": {
      "include": ["jquery"]
    }
  }
  

  03 của bạn (chẳng hạn như

  {
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6"
    },
    "exclude": ["node_modules", "**/node_modules/*"]
  }
  

  1) không được tôn trọng.
• Chỉ có lỗi cú pháp được báo cáo. Lỗi ngữ nghĩa - chẳng hạn như truy cập vào một thuộc tính không xác định hoặc chuyển sai loại cho một hàm - & nbsp; không được báo cáo.
• Sửa lỗi nhanh cho các lỗi ngữ nghĩa bị vô hiệu hóa.
• Biểu tượng chỉ có thể được giải quyết trong tệp hiện tại. Bất kỳ biểu tượng nào được nhập từ các tệp khác sẽ được coi là thuộc loại ____105.
• Các lệnh như đi đến định nghĩa và tìm tất cả các tài liệu tham khảo sẽ chỉ hoạt động cho các tệp đã mở thay vì trên toàn bộ dự án. Điều này cũng có nghĩa là biểu tượng từ bất kỳ gói nào bạn cài đặt theo

  {
    "typeAcquisition": {
      "include": ["jquery"]
    }
  }
  

  06 sẽ không được giải quyết.Go to Definition and Find All References will only work for opened files instead of across the entire project. This also means that symbol from any packages you install under

  {
    "typeAcquisition": {
      "include": ["jquery"]
    }
  }
  

  06 will not be resolved.
• Tìm kiếm biểu tượng không gian làm việc sẽ chỉ bao gồm các ký hiệu từ các tệp hiện đang mở.
• Nhập khẩu tự động bị vô hiệu hóa.
• Đổi tên bị vô hiệu hóa.
• Nhiều chất tái cấu trúc bị vô hiệu hóa.

Một số tính năng bổ sung bị vô hiệu hóa trên

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

07 và

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

08:

• Việc mua lại loại tự động hiện không được hỗ trợ.

Kiểm tra xem bạn có ở chế độ một phần không

Để kiểm tra xem tệp hiện tại có sử dụng Intellisense chế độ một phần thay vì Intellisense toàn dự án không, hãy di chuột qua mục trạng thái ngôn ngữ

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

09 hoặc

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

10 trong thanh trạng thái:

Mục trạng thái sẽ hiển thị

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

11 nếu tệp hiện tại ở chế độ một phần.

10/6/2022

Visual Studio có JavaScript?

Làm cách nào để có được JavaScript trong Visual Studio?