How do I get WebdriverIO autocomplete on VS Code - webdriver-io

Is there a way I can get autocomplete on VS Code for webdriverio?
Other code editors like Intellij provide something like Settings -> Preferences -> Languages & Frameworks -> JavaScript -> Libraries
From there we can add a directory with webdriverio commands
How can I do similar thing with VS Code?

my understanding is, vscode is built with typescript and by default it does not support autoComplete(Intellisense) on a package that is built with javascript. So all the js package creators would provide an #types file. These #types file help vscode to find all the function definitions, object properties. etc., etc., of your JS package and show as suggestions. Which in case here is webdriverio package.
So adding a #types dependency that is related to your JS package will mostly fix the issue.
i.e.,
npm install #types/webdriverio --save-dev
After adding the package, i started getting the browser object suggestions.
All the above works fine for v4 version of WDIO.
If you are using v5 version: Then as per their official documentation we need to create a jsconfig.json file on the root directory.

Above answer worked well :
you need to install below dependency :
if you are using webdriverio v4 (for cucumber BDD ) use below
npm install #types/webdriverio#4 --save-dev
or use :
npm install #types/webdriverio --save-dev
VSCode Intellisense

Using #types/webdriverio is not suggested by webdriverio and it is now deprecated:
npm WARN deprecated #types/webdriverio#5.0.0: This is a stub types definition. webdriverio provides its own type definitions, so you do not need this installed.
I would suggest to follow the official documentation by WebDriverIO here:

Related

Is there a way to introduce a preinstall step like the one in npm for installing deno packages in a deno project?

So npm allows a preinstall script to run before installing a module. For example, puppeteer uses this step to install headless chrome. Is there any way to do something like this with deno?
Unlike Node.js, Deno has no package manager. Instead of installing packages, all modules and dependencies are simply cached as static files for use at runtime — there is no configurable hook for an "installation step". Any code which requires an external dependency (such as a coordinating process in the case of Puppeteer) must ensure that such a dependency exists at runtime using program code. See Creating a Subprocess in the manual.
See also section 3.1 of the manual Basics > Modules for information about the module system.
For an example of a Puppeteer implementation in Deno, see https://deno.land/x/puppeteer (source GitHub repo).

IntelliJ Angular project throwing TSLINT error for HTML files in WebStorm

What steps will reproduce the issue?
Create Angular project in IntelliJ via angular-cli (version 1.5)
Open the same project in WebStorm; open any of the HTML files.
It will throw TSLINT error
What Angular and Typescript version do you use? Looks similar to WEB-30045, caused by lack of TypeScript 2.6 support in Angular (https://github.com/angular/angular/issues/20146)
Another related problem is https://github.com/Microsoft/TypeScript/issues/18322
WebStorm TypeScript version should match the one used by Angular. The version of TypeScript used by Angular is set in
package.json
To do so, select
Prefereces... > Languages & Frameworks > TypeScript
and then, from the TypeScript dropdown, select the node_modules TypeScript installation instead of "Bundled".
Click OK and restart WebStorm.

Unresolved functions or methods using CodeceptJS in PhpStorm

I've just followed the CodeceptJS Quickstart and opened first_test.js in the PhpStorm IDE (equivalent to WebStorm, IntelliJ, etc.).
For all the built-in functions, I'm getting "Unresolved function or method …":
I also don't get any autocompletion on I.
I've tried the following.
Looked for a CodeceptJS plugin. Didn't find any.
Enabled codeceptjs/node_modules in Settings -> Languages & Frameworks -> JavaScript -> Libraries.
Set JavaScript language version to ECMAScript 6.
Enabled the Node.js Core library.
Restarted PhpStorm.
Please run 'npm install codeceptjs'.
I had to follow the steps outlined in https://codecept.io/typescript/ to fully enable CodeceptJS in PHPStorm.
Steps
npm install codeceptjs typescript ts-node
Add require('ts-node/register') as first line in my codecept.conf.js file
Create a tsconfig.json in my project root folder
Run npx codeceptjs def to create the default steps.d.ts file
After that, autocompletion worked in my tests :)

Install webdriver globally or localy?

The manual states that
You can also install the package globally on your machine and use the
wdio directly from the command line. However it is recommended to
install it per project.
Why is that? What downfall should I worry if installing globally?
If you only wish to use webdriver only in your shell regardless of any project then you can install it globally. However, if you wish to use it in a project, such that it is required to run project tests then install it locally (in this case it should be devDependency). The reasons are:
1) When multiple people working on a project, it is ensured that all of them have the same versions of the required packages.
2) Portability. The project dependencies should be completely defined in package.json so that after running npm install the project is ready to use in every environment.
For people new to NPM and Node, I'd recommend a global install to keep it simple. There are reasons to install it locally though, mostly to do with version compatibility and ease of project sharing: https://www.joezimjs.com/javascript/no-more-global-npm-packages/

AngularJS 2.0 TypeScript Intellij idea (or webstorm) - ES6 import syntax

Trying to make these steps to make AngularJS 2.0 sample app running.
On that step, putting code in app.ts:
/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap} from 'angular2/angular2';
Got latest 14.1.3 IntelliJ IDE.
But seems it does not understand 'import' (highlighting complain)
Q: IS that because It does not support yet TypeScript 1.5? (it the IDE settings I can see embedded 1.4 version).
Could it be compiled with that IDE?
it look like you didn't specify the compiler arguments to tell which module loader to use, also you want to make sure you are using the latest TypeScript Compiler, to this date the latest was 1.5.0 beta.
First
You can download the bin of the TypeScript compiler tsc and all other related files on their GitHub Repository:
https://github.com/Microsoft/TypeScript/tree/master/bin
or you can also install it as a Node.js Package:
npm install -g typescript
Second
You need to configure intelliJ properly by changing the Compiler version to custom and point to the location of the latest TypeScript bin folder
in IntelliJ press Ctrl+Alt+S, search for TypeScript and under Languages & Frameworks select TypeScript, make sure your IntelliJ is up to date though.
And to solve the problem you are asking here specify the following Command Line options:
--module "amd" --target "es5"
Screenshot:
Third
It is worth mentioning that the TypeScript 1.5 compiler and Angular 2 are both in Beta so this answer could be irrelevant in the following weeks or month.
Enjoy!
Dany
you need select javascript version in Preferences page.
Languages & Frameworks -> JavaScript
on the right page. JavaScript language version dropdown menu.
on my idea it's has some item below.
JavaScript 1.5
ECMAScript 5.1
JavaScript 1.6
JavaScript 1.7
JavaScript 1.8
JavaScript 1.8.6
ECMAScript 6
...
There is an option in IntelliJ where you can define a custom typescript version. Default is 1.4 but you can download 1.5 beta and assign that. The only problem with the sample I've seen is to activate 1.5 new argument to generate decorators metadata. IntelliJ always report that the TS process stopped.