We Keep Coding

Cypress: Custom Commands Not Recognised By Webstorm

I am working with Cypress for writing automation tests for a website.
I'm facing a problem in that my custom commands, which I'm adding in the 'cypress/support/commands.js' file, are not recognised by Webstorm in the test bodies.
However, once I run the actual tests, everything works as needed, so for some reason it's just the webstorm that can't read it correctly.
I've read online and tried the common fix of adding "supportFile": "cypress/support/index.js" to the cypress.json, but it didn't work for me.
I'd like some input and help. Thanks in advance!
Visualization of the issue

A primary method to get your IDE to know about your custom command is to use TypeScript definitions. Refer to the Cypress docs for details.
For IntelliJ platform, there is a Cypress Support Pro paid plugin (I'm the author) that simplify managing TypeScript definitions for custom commands. See this overview:

How to use JavaScript Flow Version Language with WebStorm and React JSX?

I couldn't setup Flow in WebStorm using react-native.
I already tried to add libraries for types:
Also, I tried to install flow-typed. But still, the IDE cannot resolve symbols when I choose Flow as JS language.
Also tried to invalidate cache and restart the WebStorm.

I cleaned Flow package or executable
Invalidate cache and restart again.
Selected <myproject>/node_modules/flow-bin on Flow package or executable again.
Erased and re-typed #flow annotation.

How do I fix or get rid of ESLint definition requirement in ASP.NET Razor app?

I just upgraded an ASP.NET Core 2.0 Razor app to 2.1 to get the new functionality for EF Core 2.1. This is my first major project in ASP.NET coming from a WinForms & PHP background.
I'm trying to go through and clear out the error list, but I'm getting ESLint errors, and I've never used ESLint before so I don't know where to start. Google isn't too helpful on this issue either.
Here's the warnings:
Warning react/jsx-sort-prop-types (ESLint) Definition for rule 'react/jsx-sort-prop-types' was not found
Warning react/wrap-multilines (ESLint) Definition for rule 'react/wrap-multilines' was not found
Warning react/require-extension (ESLint) Definition for rule 'react/require-extension' was not found
I don't even know what these mean, googling them doesn't enlighten me, and they don't seem to point to a specific line of code.
What the hell are these warnings trying to tell me?

If you are using ESLint, and don't want to add code to all your files, then you can disable the three rules in your ESLint configuration file. There are actually two ways to do this.
The long way is to find the configuration file, which is at c:\Users{username}.eslintrc You can open it with a text editor, find the rule and set the value to 0 (zero), which means disabled. For example:
"react/jsx-sort-prop-types": 0,
The shorter way is to go to Tools/Options/Text Editor/'JavaScript/TypeScript'/Linting/General. On that page is a button 'Reset global .eslintrc'. If you click that you get a newer version of the .eslintrc configuration file that doesn't have these rules in at all, assuming you have a recent version of Visual Studio.
Whichever method you use you'll need to restart Visual Studio, and after that the errors should go away.
I think the problem is arising because you (and I) have an old version of this file (.eslintrc) with rules that aren't supported or no longer work for the React plugin that ships with ESLint for Visual Studio. I was getting these errors in projects that had no npm modules installed, and definitely no React. I think upgrades to Visual Studio probably don't overwrite this file in case you've changed it.
It's also possible to put a .eslintrc file into your project folder and it will override the settings in the default location. So for an enterprise project where you're seeing this issue on multiple machines you could just check in an .eslintrc that fixed it. However, if you do a clean install of Visual Studio on a new machine I don't think you'll see the problem, so I'm not sure that should be necessary.
I used Visual Studio 2017 15.8.1 to test this. ESLint got quite a big upgrade in 15.8.

If you want to keep using EsLint (which is good), You can disable and reenable EsLint at the start of the .js files to avoid those warnings and still have EsLint checks avaliable for the rest of the file:
/* eslint-disable */
/* eslint-enable */
And for files that you don't control like jquery.js, bootstrap.js, etc you can just disable completely with this line at the start of the file:
/* eslint-disable */
You just need to remember to add again this line after you have updated them.

If you're NOT using ESLint, and you are using Visual Studio, you can go to:
Tools -> Options -> Text Editor -> JavaScript/TypeScript -> Linting -> General.
From there you can uncheck the "Enable ESLint" checkbox, and check the global configuration file for that tool.
I am using Visual Studio 2017 (15.8.4), to find this menu.

A lot of incorrect JavaScript errors in the ASP.NET Core Template Pack for Angular 2

I found the ASPNETCoreTemplatePack by MadsKristensen a very good starting point for developing ASP.NET Core applications using Angular 2 as frontend. But as I started editing, I got 448 errors in the error-list dialog. Some of them are from the example Angular components, others actually generated by node.js modules. All came from TypeScript files. The project column says virtual TypeScript project and I opened some at random.
Example
Nr. 1: ClientApp/app/components/app/counter/counter.component.ts
#Component({
selector: 'counter',
template: require('./counter.component.html')
})
Here VS says The name "require" was not found.
Nr 2: node_modules/rxjs/add/operator/map.d.ts
import { MapSignature } from '../../operator/map';
declare module '../../Observable' {
interface Observable<T> {
map: MapSignature<T>;
}
}
Error: Invalid module name in augmentation, module '../../Observable' cannot be found.
And so on, as I said there are nearly 500 of them. Seems that Visual Studio misunderstand something here, as the app is compiling and all function work like expected. Also the counter-component, which couldn't work when the error was true, cause the require-function load its view. So I want to disable those errors - they make me missing real errors in my code, which had to be fixed.
Things I already tried:
Setting TypeScriptCompileBlocked to true in the project file like described here: http://rostacik.net/2015/08/14/how-to-disable-building-of-typescript-files-in-visual-studio-2015/
Added a tsconfig.json in the project-root with "exclude": [ "bin", "node_modules" ]

By doing some research I found out that the used functions like module or require and also some syntax-constructs are introcuted in the TypeScript 2.0 Version. First this was confusing me, since my package.jsonfile already refers to TypeScript in the 2.0.0 Version. Also an upgrade to 2.1.5 (latest version in time of writing) doesn't change anything.
After trying some other things I searched for the needle in the haystack as we said in Germany. And I learned that Visual Studio has a TypeScript for Visual Studio 2015 package. This seems to contain some sort of rules to validate TypeScript in the errorlist-window. Its version is the same as TypeScript: TypeScript 2.1.5 > TypeScript for Visual Studio (2015) 2.1.5.
So its very important to have the same version of TypeScript for Visual Studio installed as the TypeScript version you're using as compiler. In my case, I had TypeScript for Visual Studio in Version 1.8.36 since I'm new to it and never used it before. Seems like the default one installed by VS. But the ASPNETCoreTemplatePack refers to 2.0.0 which caused this problem.
Install a specific version
My solution above will cause a new problem. The download page from Microsoft lists multiple older versions like 2.1.4 or 2.0.6 with links for downloading. But all refers to TypeScript_Dev14Full.exe, which is the latest (so currently 2.1.5). You could get a wider range of versions in the Visual Studio Marketplace.
Please note: Some versions of the market contains warnings that installing the addon would break their VS or TypeScript. I don't had tried this, since the latest version 2.1.5 is fine for me. But its may a good hint for people who had problems with the latest version. Please take care, backup your data and better create some sort of restore point, so that you can easily get a working development-area in case of anything breaks.

How to get angular2 to work in eclipse with typescript

So I was starting researching about angular2 and since I saw so many references to typescript being prefered I am trying to switch to it from javascript. Problem is, I saw a nice little guide I could follow to install it all in eclipse (angular, javascript, everything needed to launch the 5 minute guide code on the main page of angular), so I did it and managed to get it to work.
Now I would like to do the same with typescript, but I find myself lost since it doesn't seem to be working, I can't launch code, it's like node.js isn't working anymore, but since I do not know what the expected result is, I am not sure what is missing.
For example, I re did the 5 minute guide and notice as a difference that I do not have the installation of the modules, nor any run-as configuration ready, in fact, I can't manage to run as any typescript code I try to do.

What I did was:
1- Install Eclipse Mars, other guys uses older versions
2- Install Node.js
3- Install WildFly Server
4- Install TypeScript plugin https://marketplace.eclipse.org/content/typescript
5- Import my project in eclipse, you may have to create a new static web project and add your files in there. The 5 minute quick start is not an eclipse web project so you may not be able to import this. Do not forget to copy and past the same structure with the node modules that you have
6- Right click on the project > Configure > Enable Typescript Builder
7- Right Click the project > Properties > TypeScript > Compiler and configure as follows:
I hope this will do it for you.
Remember, this plugin does not respect json configuration file, so you have to do this manually as in the screenshot. Also, if you are going to provide arguments to your component constructor, You will have errors. Let me know if you got those. Another thing to mention is that using some annotations like #Input will not work, you will have to use inputs:[] inside your #Component annotation.

You can try to add those plugins on top of Mars:
https://github.com/angelozerr/angular2-eclipse
https://github.com/angelozerr/typescript.java
Those 2 are incubating but already provide good features. There is another one, that I didn't try but which has some popularity:
https://github.com/palantir/eclipse-typescript

Eclipse >= Neon
sudo npm install -g angular-cli (ng help must work)
See: https://github.com/angelozerr/angular2-eclipse
Install it and restart Eclipse
Open a .ts file

Eclipse Oxygen
Default javascript installation, then added the default free plugin for angular 2 / typescript from here:
angular2.ide - http://oss.opensagres.fr/angular2-eclipse/1.3.0/
After installing I opened an existing Angular 4 / TS project, worked fine. I then installed support for .scss from http://www.liclipse.com/text/updates. All setup and configured with Typescript 2.4.1 / nodejs v6.9.4.
But within days it now fails to open .ts files at all. Re-installation of the ng plugin did not fix it, I uninstalled liclipse plugin and no change either. It basically leaves eclipse unusable for ng4 projects as is.
The logs show the following errors.
org.eclipse.core.runtime.CoreException: Plug-in "ts.eclipse.ide.jsdt.ui" was unable to instantiate class "ts.eclipse.ide.jsdt.internal.ui.editor.TypeScriptEditor".
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.throwException(RegistryStrategyOSGI.java:194)
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.createExecutableExtension(RegistryStrategyOSGI.java:188)
at org.eclipse.core.internal.registry.ExtensionRegistry.createExecutableExtension(ExtensionRegistry.java:905)
...
Caused by: java.lang.NoClassDefFoundError: org/eclipse/wst/jsdt/ui/text/JavaScriptSourceViewerConfiguration
at java.lang.Class.getDeclaredConstructors0(Native Method)
at java.lang.Class.privateGetDeclaredConstructors(Unknown Source)
...
Caused by: java.lang.ClassNotFoundException: An error occurred while automatically activating bundle org.eclipse.wst.jsdt.ui (441).
at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:112)
at org.eclipse.osgi.internal.loader.classpath.ClasspathManager.findLocalClass(ClasspathManager.java:529)
...
Caused by: java.lang.ClassFormatError: Name index 1 in LocalVariableTable has bad constant type in class file org/eclipse/wst/jsdt/internal/core/JavaModelManager

I found
TypeEcs plugin for Typescript
it provide below.
•Syntax highlighting
•Code Completion
•Code Outline
•Find References
•Rename / Refactor
•Open Type
•Code Compilation
•Format Code
•Comment Code
•Open Declaration
•Mark Occurences
•Type Script Debug