A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developers.arcgis.com/javascript/latest/intellisense/ below:

Setting up VS Code IntelliSense | Overview | ArcGIS Maps SDK for JavaScript 4.33

This guide topic describes how to set up IntelliSense in Visual Studio Code (VS Code) when working with ArcGIS Maps SDK for JavaScript packages.

Note

JetBrains IDEs like IntelliJ IDEA don't require these setup instructions as they will find Web-Types automatically.

HTML

For IntelliSense in HTML, add the following .vscode/settings.json file as part of the @arcgis/map-components Vite sample project:

Use dark colors for code blocks Copy

1
2
3
4
5
{
  "html.customData": [
    "./node_modules/@arcgis/map-components/dist/docs/vscode.html-custom-data.json"
  ],
}

vscode.html-custom-data.json provides a list of components and their attributes.

This will be the resulting folder structure:

Use dark colors for code blocks

1
2
3
4
5
6
7
8
9
10
map-components-vite-sample/
├── .gitignore
├── index.html
├── main.js
├── package.json
├── README.md
├── styles.css
├── vite.config.js
└── .vscode/
    └── settings.json

In the case of component packages other than @arcgis/map-components, replace map-components with your <package-name>.

Tip

These instructions are for a "per project" basis and are not available globally in VS Code. Restart VS Code after making changes to .vscode/settings.json. Similar logic for these instructions can be applied when using @esri/calcite-components.

JavaScript and TypeScript Load the SDK via the ArcGIS CDN

In a project that loads components via the ArcGIS CDN, JavaScript Intellisense will only be available for the components if your JavaScript is in a separate file from your HTML.

Example:

index.html

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
9
10
11
<body>
  <!-- IntelliSense available for the components and their attributes -->
  <arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9">
    <arcgis-expand position="top-right">
      <arcgis-search></arcgis-search>
    </arcgis-expand>
    <arcgis-legend position="bottom-left"></arcgis-legend>
  </arcgis-map>
  <!-- Go to main.js for JavaScript IntelliSense -->
  <script type="module" src="/main.js"></script>
</body>

main.js

Use dark colors for code blocks Copy

1
2
const mapElement = document.querySelector("arcgis-map");
// Try typing mapElement.map below and see IntelliSense in action
Load the SDK via npm

In a project that loads components via npm, you will get IntelliSense in your JavaScript or TypeScript file as soon as you import a module or component.

Example:

main.ts

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
9
10
11
import "@arcgis/map-components/components/arcgis-map";
import WebMap from "@arcgis/core/WebMap.js";

const mapElement = document.querySelector("arcgis-map");
// Try typing mapElement.map below and see IntelliSense in action

const webmap = new WebMap({
  portalItem: { // autocasts as new PortalItem()
    id: "d5dda743788a4b0688fe48f43ae7beb9"
  }
});

Even if a project is written entirely using plain JavaScript, your VS Code may be already running a TypeScript language server, allowing you to benefit from component package TypeScript typings. VS Code has robust TypeScript integration that can assist with building your application.

Additional resources

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4