nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

vs code intelligence

LefterisKoumis

According to the calcite design website we can add intelligence to the vs code for calcite by entering

"html.customData": [ "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json" ]

in the .vscode/settings.json

I did just that, but it didn't work. Did I miss something?

@BenElan @KittyHurley Suggestions? Thank you.

Najděte více příspěvků označených jako

Accepted answers

All comments

BenElan

I installed VSCode to test this and adding the customData to your User settings.json does work when your package.json is in the root directory of the workspace. See my comment above for more details, I added some edits.

To clarify, this is for completion within HTML files. It's really nice for making quick mock ups or samples, but won't work in framework files like react, vue or svelte. The types bundled with the npm package will provided completion in those cases, as Cory mentioned earlier.

BenElan

Oh I think I understand. I don't use VSCode anymore so I can't easily check right now. But if you are able to setup the customData globally it would be in your "User settings" (vs the "Workspace settings" used in the Vite example). Here is VSCode's documentation about User vs Workspace settings.

So if it is possible, you would add the snippet below to the settings.json file mentioned in this doc section.

"html.customData": [
    "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json"
],

Edit:

VSCode would need to be smart enough to set the current directory in the relative path above to the current workspace's root directory. Otherwise the path to the vscode-data.json file won't resolve correctly. And I'm not sure what would happen if it doesn't resolve. But let me know, now I'm curious!

Make sure to initially open your projects to the folder containing package.json instead of a subdirectory. That should hopefully ensure the Workspace is created in the right place for the relative path.

Here is some additional documentation about customData if anyone is curious how it works.

LefterisKoumis

Thank you. I want to setup the vscode the same way I did for other libraries.

BenElan

Sorry I'm not sure what you mean. Are you referring to the instructions in the release notes? That's how I got it to work in the vite example - right here.

LefterisKoumis

THank you Ben. Does it means that I have to include the import statements for every project I work on?

So, I cannot get the intelligence work for all projects by setting up the vscode per ESRI instructions?

BenElan

Hi @LefterisKoumis,

The examples repo has VSCode IntelliSense setup, try this one:

https://github.com/Esri/calcite-components-examples/tree/master/vite

Make sure to run `npm install` first and then add a component to `index.html`

coryeicher

Hello,

I am using React + Calcite + Visual Studio Code. The editor is picking up the Calcite types just fine.

I'm importing like this...

import { CalciteBlock, CalciteNotice } from "@esri/calcite-components-react";

... Perhaps this helps you or someone else working with this setup.

-Cory

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.