VSCode intelliSense autocomplete for javascript - javascript

I would like Visual Studio Code to autocomplete all words within the open document instead of the just the scope specific variables it finds. What should I change in the settings?
edit: code version 0.3.0 at time of question.

I just figured it out. This will use all words on the page for auto complete.
// Always include all words from the current document.
"javascript.suggest.alwaysAllWords": true,
// Complete functions with their parameter signature.
"javascript.suggest.completeFunctionCalls": true,

Even though it has been quite some time for this question, I thought I might be of help to anyone else who bumbles across the same question.
So here goes . And this is for the latest version of VS Code as of writing.
For a true intellisense, i.e. for example you intend to get all the methods related to "console" as soon as you press '.' , you can use the respective Typescript definition file.
Now I agree that this fix is targeted at node,and needs the same along with npm on your system. But still, works for all Major JavaScript work you might run across.
on Linux, for this, you'd need "npm" and install TypeScript Definition Manager (tsd) globally.
npm install -g tsd
then within your current project directory (or by changing to the project directory) , open a terminal window and add the following lines
tsd query node --action install
tsd query express --action install
then, as soon as you'll open your .js file in the current directory, you'll get proper autocomplete / intellisense for all DOM object and other possible stuff.
It worked for me, and this is the only reason I use VSCode on linux (for JavaScript at least, even though I like LightTable too)
for further information (and clarifications if I somehow couldnt manage to be clear enough) visit the following link:
Node.js applications on VS Code

Related

What is the difference between installing eslint as extension and installing as npm package?

I have been following various blogs and videos on setting up and configuring eslint and prettier for vscode and development. But every article fails to explain why do we need to separately install eslint as an npm package and vs code extension?
what difference it will make if I install either of the ones?
why do we need to separately install eslint as npm package and vscode extension?
Short answer: you don't.
Long answer:
Installing ESLint/Prettier as extension, allows you to format/check your code inside the VSCode.
However, installing them also as dependencies brings extra benefits:
VSCode will use exact same package as installed. So you will not spot the situation when VSCode says OK, but your CI server says: NOT OK
You will get control over the versions, and can update whenever you want
You will be able to use different versions for different projects. This is especially important, when you can't migrate old project, but want to use the latest possibilities for the new one
You will be able to access Prettier/ESlint through the script block of the package.json, and be able to write custom commands with parameters exactly as you need
You will be able to pair them with Husky or NPM hooks to automatically verify/format the code
From my experience, if you can install something locally - install it as package dependency (except CLI like create-react-app or angular-cli that helps you start the app). This will make your life a bit predictable.
These programs can format your code (ESLint and Prettier) and detect specific syntax (ESLint).
When installed as an extension in your IDE (vscode for example), you can get:
squiggly lines in real time;
and format-on-save.
But someone who starts up your project on their own environment might not have these extensions installed (might not even have the same IDE) and thus might not get these.
When installed as npm packages (and included somewhere in the pipeline, either in the npm start, or in your continuous deployment, or...)
you won't get real time squiggly lines,
but you can still get auto-formatting (though not necessarily on save, depending on the configuration),
you can get blocking rules (meaning instead of just seeing errors / warnings, you can actually block the pipelines until the dev fixes said errors / warnings)
you can insure anyone who starts the project, from any IDE, gets the packages included

Publish npm package to a Gemfury registry with tag?

I'm publishing an npm package to a private Gemfury registry through basic npm login / npm publish commands (as described in Gemgury's help section here: https://gemfury.com/help/npm-registry).
Simple publishing is working like a charm, but once I attempt to add in a version tag (npm publish --tag beta for example), I get a Version already exists error. That version does exist, but it does not with the specified tag.
If I bump the version to avoid the error and still pass in a tag, the package (at the new version) is successfully publised, but there is nothing (within Gemfury) that indicates a tag is present at all.
Does Gemfury support npm package version tags (https://docs.npmjs.com/getting-started/using-tags)? I can't find any Gemfury documentation that suggests one way or another, but it seems like something pretty simple for a private npm registry to be able to handle.
Is there another way to get around this? I want what tags have to offer, but I don't necessarily need to follow that specifically.
I'm not an expert of Gemfury, but after doing some experiments I think it considers the "version" element in "package.json" file.
I don't think it considers the git tag.
Hope this helps

WebStorm 2016.3 + Electron: Unresolved function or method

I am playing around with Electron and WebStorm as part of a project preparation and I am struggling with different problems. Therefore I want to start simple by creating very basic stuff and working my way up.
So I have a very simple project setup in WebStorm and my first Electron app is running. But WebStorm keeps saying that it cannot resolve function names.
Electron and electron-prebuilt are added to the package.json and Node.js coding assistance is enabled. Therefore require('electron') is recognised correctly.
I saw the blog entry by JetBrains on how to start with Electron in WebStorm and found also another similar answer here on StackOverflow.
JetBrains' blog entry
StackOverflow answer
It is said, that one should add github-electron to the JavaScript library from the communitie-stubs repositories. But these seems outdated, as there is no github-electron anymore and all other electron entries are ambiguous.
So my question is: How to setup WebStorm for plain JS ES6 correctly, beginning by eliminating the "unresolved" messages?
So, after digging into the topic more and more and climbing the steep learning curve, I finally found the answer by myself.
Here we go:
Go to WebStorm's Preferences / Languages & Frameworks / TypeScript
Make sure Use TypeScript Service is enabled
Open up WebStorm's Terminal panel (as it will automatically point to your project's working directory) and install the type definitions for TypeScript via NPM:
npm install #types/electron
You don't need to use the --save / --save-dev tags, as the types are needed solely for WebStorm's code assistance and have no impact on your project.
You'll get a new entry inside your node_modules folder containing the type definitions.
And that's it. WebStorm does not show any unresolved function or method messages for this particular module anymore.
This works for theoretically every other module, as long as there are type definitions available. But chances are good, as there are a lot of them. Way more than what WebStorm's JavaScript library download functionality offers.
Have a nice day, everyone!
Martin
install the electron library. Since the github-electron has renamed to electron.

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

Why do frameworks and git hub ask you to use Terminal?

I'm a newbie and that's ok.
But when I use tutorials, they always tell me to go straight to my terminal and install documents from there in which I have no clue what the next step is and no idea why I have to do it. Is it essential that I install frameworks through terminal or can I just work without it?
ex. http://net.tutsplus.com/tutorials/javascript-ajax/real-time-messaging-for-meteor-with-meteor-streams/
"Let’s create a very simple, browser console based chat application with Meteor Streams. We’ll first create a new Meteor application:"
meteor create hello-stream
I understand this is may not be very challenging, but I don't have a clear answer when I try and simply google it. Anything would help, thanks a lot!
Being a newbie is ok.
The terminal is the go to because writing programs, tools, and scripts with a couple lines of bash or python is, well, a couple of lines versus an entire gui and all the lines of code to go with it.
meteor create hello-stream
That's telling you to run the program called meteor with the supplied arguments (create hello-stream).
If you haven't installed meteor, do that next. From their website, open your terminal and type/paste:
curl https://install.meteor.com | sh
That downloads a file from the URL and pipes (|) it to the sh command. The file it downloads is a shell script that takes care of setup/installation. Now go back and try the meteor command again.
More reading
You might try and find a terminal tutorial. This is the first one I found:
http://www.ee.surrey.ac.uk/Teaching/Unix/
Answer from someone who only recently (as in: within the last year) got into using the Terminal more and more frequently:
It's generally a good idea to get used to using the Terminal for code-related things as you can pretty much use it platform-independently (meaning you can use the same commands on Mac, Linux, Windows,...) and because it makes you understand better what you're actually doing.
Once you've got the hang of it, it can make navigating your system as well as making changes to it easier. Hidden files, for example (like .gitignore files, or files in your .ssh directory, or your .bash_profile), can be viewed, opened and edited easily from the Terminal whereas you have to take multiple, complicated steps (or install other software) to view them from your Finder.
With the help of package managers (like Homebrew), which are also operated from the Terminal, you can also install software that isn't otherwise available for Mac.

Categories