Setting up VS Code IntelliSense

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

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 blocksCopy
{
  "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
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>.

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 blocksCopy
<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 blocksCopy
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.