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 and CSS
For IntelliSense in HTML and CSS, create the following .vscode/settings.json file as part of the @arcgis/map-components and @arcgis/charts-components Vite sample project:
{
"html.customData": [
"./node_modules/@arcgis/map-components/dist/docs/vscode.html-custom-data.json",
"./node_modules/@arcgis/charts-components/dist/docs/vscode.html-custom-data.json",
"./node_modules/@esri/calcite-components/dist/docs/vscode.html-custom-data.json"
],
"css.customData": [
"./node_modules/@arcgis/map-components/dist/docs/vscode.css-custom-data.json",
"./node_modules/@esri/calcite-components/dist/docs/vscode.css-custom-data.json"
]
}vscode.html-custom-data.json provides a list of components and their attributes.
vscode.css-custom-data.json provides IntelliSense for available custom CSS variables, so you get suggestions while styling components.
This will be the resulting folder structure:
map-and-charts-components-vite/
├── .gitignore
├── .vscode/
│ └── settings.json
├── index.html
├── main.js
├── package.json
├── node_modules/
├── README.md
├── styles.css
└── vite.config.jsThe SDK's components are made with the help of @esri/calcite-components.
If you don't plan to build custom UI or themes with Calcite (see design tokens) in your project, you can omit the Calcite custom data entries shown above in .vscode/settings.json.
If any additional SDK component packages are necessary for your project, you can add another node into .vscode/settings.json.
Some component packages do not need to include CSS custom data in .vscode/settings.json.
The availability of CSS variables varies between component packages and their components.
For example, the Scene component from the Map components package includes a styles section for its CSS variables, but the Zoom component does not have any customizable styles.
The Coding components' Arcade editor also does not have a styles section.
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:
<body>
<!-- IntelliSense available for the components and their attributes -->
<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9">
<arcgis-expand slot="top-right">
<arcgis-search></arcgis-search>
</arcgis-expand>
<arcgis-legend slot="bottom-left"></arcgis-legend>
</arcgis-map>
<!-- Go to main.js for JavaScript IntelliSense -->
<script type="module" src="/main.js"></script>
</body>const mapElement = document.querySelector("arcgis-map");
// Try typing mapElement.map below and see IntelliSense in actionLoad 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:
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.