Today I finally figured out how to show the current file in the Project view of Webstorm.
Alt+F1 or Navigate > Select In...
This displays the Select Target popup menu. Press 1 to select the Project View.
Really?!? That simple…
Webstorm
Fix Jest describe/it/expected not recognised in Webstorm
Don’t you just hate it when Webstorm underlines functions as unknown, because it doesn’t recognise them? It turns out it is pretty simple to fix if you know how and have a TypeScript (ts) file with definitions available.
UPDATE
It turns out there is a much easier way of adding the definitions.In File > Settings… > Languages & Frameworks > JavaScript > Libraries, click the button
Download..., select ‘jest’ from the list of available definitions, click the buttonDownload and Install. That’s it!Webstorm rules!
First we need to install the Jest TypeScript definitions.
npm install --save-dev @types/jest
Then we need to add them in Webstorm by adding it as JavaScript library in the Settings.
File > Settings... > Languages & Frameworks > JavaScript > Libraries
In the dialog click the Add.. button. The following dialog is opened.
In the dialog enter the following information.
Name: Jest Visibility: Project
Then click on the + button and select the option Attach files....
The Jest TypeScript definitions are installed in the node_modules directory under your project directory. The Jest TypeScript definitions are installed in @types\jest\index.d.ts. Select the file and click the OK button.
That’s it! Now Webstorm recognises Jest describe/it/expect. O yeah!
Webstorm not recognising Vuetify component html tags
Recently I moved from VS Code to Webstorm. What a brilliant IDE. It really improved my development flow. One thing that has been irritating me is that the Vuetify component html tags are not recognised, which results in a s**t load of warning messages of unrecognised html tags.
After Googling around I found an issue on the Vuetify GitHub Issues that provides a simple workaround. All you need to do is create a file somewhere in the project that describes the Vuetify components. You don’t need to import the file. It just has to be accessible to Webstorm so that it can be analysed.
There is a fix in the works for the Vuetify api-generator that provides this file out of the box. Just checkout the Javascript and Typescript files.
I placed the Javascript file in my plugin directory naming it vuetify-fake-components-for-webstorm.js. After that all the warnings of unrecognised html tags disappeared like magic. Wooho!
Adventures of a space monkey 