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.

[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

[LefterisKoumis]

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

[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`

[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]

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.

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

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

[LefterisKoumis]

Thank you for your response @BenElan .

So far, all the intelligence for the vs code (js, html, python...) were installed, after I imported the extensions from the vs code listing of extensions. This time is different. I am asked to modify the settings.json by adding the "html.customData" to enable intelligence for the calcite. 

The issue that I have is the access to the node_modules.  As you said,  it works when the "package.json is in the root directory of the workspace". That's the issue. I don't have the package.json in my workspace. All my calcite projects are under a master calcite folder.

It does work fine for my experience builder projects since there is the node_modules and package.json folder. 

[BenElan]

If you use the same version of Calcite for all your projects, you could probably use an absolute path to the vscode-data.json file, where ever it is on your machine. You'll have to play around with it and figure out what works, since I don't know anything about your environment.