How to enable Node.js code autocompletion in VSCode? - node.js

I have installed Visual Studio Code and Node.js and both basically work, but autocomplete is not (completely) working. If I type 'console.' I do indeed see a list popup. Likewise if I do:
const http = require("http");
http.
But if I simply type 'process.' I don't see anything. In fact as soon as I type '.' Code autocompletes 'process' to 'ProcessingInstruction'. I was expecting to see argv pop up, along with all the other stuff you see if you type 'process' at a Node prompt.
Here's what I see when I type 'console.':
Yay -- it works!
But here's what I see when I type 'process.' (I have to change the autocompleted 'ProcessingInstruction' back to 'process'):
Boo -- it doesn't know 'process'! :(

You will need to tell VS Code about the types in Node JS (as you hit at yourself in the comment). To do this you can install the types for node running the following command (assuming you have already run npm init):
npm install --save-dev #types/node
It will install the types for Node JS, which VS Code automatically picks up and you'll be auto-completing all Node JS-specific things going forward. You don't even have to restart VS Code.
As you are adding more dependencies to your project (if you will be doing so). Many of them have a #types/X package as well (if they don't have the already included in the package), which will allow autocomplete as well.

Per Microsoft's Documentation: https://code.visualstudio.com/docs/nodejs/working-with-javascript
IntelliSense for JavaScript libraries and frameworks is powered by TypeScript type declaration (typings) files.
Automatic type acquisition requires npmjs, the Node.js package manager, which is included with the Node.js runtime.
In my situation, I do not have npmjs installed and that's why automatic type acquisition fails.
*Edit, that is, after installing npm, my autocomplete starting working successfully for node related hints.

If you are using pure javascript for your node app, when including the required modules, they should be defined with single quotes instead of double-quotes. If you were using a code formatter extension like "Prettier" for instance, it adds it by default before the IntelliSense, then you would have to update your settings to use single quote.

Related

How can I use the node.js v8 module in a react app?

I'm trying to use the serialization API from the node.js v8 module in my react app (created with create-react-app) but it doesn't seem to work.
According to the documentation it should just be a case of importing/requiring the module. When I try this, it all appears to be working as expected - no errors. I can even access methods like .serialize() and .deserialize() on the v8 object too - great. But when I try to actually run my project (using react-scripts start) I get a compilation error:
Module not found: Can't resolve 'v8' in '...'
Is it looking for a file called "v8.js" to import rather than using the node module for some reason? How do I get around this?
node_modules is only a concept when working within the node ecosystem. So it is only possible to import "v8" when within a node process.
Since you ask about a "react app" that seems to imply that you are writing something for the browser. Which now has modules which use import/export (similar to require/module.exports from node), however, that still doesn't mean that the "v8" package will be present.
Many of node's packages are C++ backed (or to use the technical term, they are "native packages") instead of being purely written in JS. Also, it should be noted that unlike dependencies listed in your "package.json" file, none of the node packages are actually downloaded when you run npm install since they are all bundled with your installation of node.

Configuring Vim/Neovim ALE plugin to support :ALEGoToDefinition in JavaScript files

I installed the ALE plugin for Vim using vim-plug:
Plug 'dense-analysis/ale'
The plugin seems to have been installed correctly. I can use ALE to automatically format files with Prettier, for example. But I can't seem to get anything that uses the language server to work.
For example, in the following JavaScript file, putting my cursor over the name add on line 5 and using the :ALEGoToDefinition command has no effect.
function add(x, y) {
return x + y;
}
console.log(add(1, 2));
I have really made an effort to read the documentation. The ALE help file says that "ALE will do nothing" if an LSP server does not provide a location to jump to. That seems to be my problem. But the ALE documentation on GitHub also says that "ALE integrates with almost all JavaScript tools very well, and most things should work without requiring any configuration."
I must be missing something. Aside from installing ALE, is anything needed to enable features which use a language server? Should I install some kind of language server globally on my machine?
User toupeira on Reddit answered this question for me. At the time of this writing, the only JavaScript language server that ALE supports is tsserver. It ships with TypeScript. To enable ALE's language server features, I needed to install the typescript package globally.
npm install -g typescript
I don't need to start the server manually. ALE seems to take care of that.
The only other requirement is that tsserver is enabled as a JavaScript "linter." It is by default. Run :ALEInfo to see which linters are enabled for the current file.

Window is not defined while importing an npm package?

I'm trying to learn how to create and publish an npm package.
I have created an npm package, https://github.com/nitte93/OnBoarding
for my learning purpose.
https://www.npmjs.com/package/onBoarding
It works fine in dev build, but when I try to import it in my isomorphic react app, I get : ReferenceError: window is not defined
I have not made any explicit use of the window object in the package, but there are places where I have explicitly use jquery.
Now, I am not sure but all I understood was, that while importing this npm package in my isomorphic app, I'm trying to use the window object in NODE environment, which I assume is wrong since window object is only accessible on the browser side.
My question is how do I handle this.
1) Do I need to handle this in my npm package itself.
2)Should I handle it in my Isomorphic app? How?
Please answer or point to a right resource to solve this issue.
I looked through your repository, and the only thing I think could be the culprit is that the semantic-ui vendor js files are required in the OnBoarding.js component, which I assume is also a server rendered file. You need to instead require those packages that only run on the browser inside the client file (the one that will call ReactDom.render().. I think it's /src/example/index.js).
Also, as a rule of thumb don't put any browser specific code in componentWillMount, as that does get called on the server. componentDidMount is safe, though, as it's only called in the browser.

How could you LINT your LESS and SCSS files in Node JS WITHOUT using grunt or gulp?

So the thing is I went through the internet and checked for available linters. Mostly all the the LESS linters available provide a command line interface or a plugin for grunt or gulp. What I really want is a simple Node Plugin which is configurable and usable with NODEJS through Code and not through CLI.
Also due to unavailability of the tags such as LESSLINT and SCSSLINT could not add those tags to the questions.
Is there any node plugin available to do this?
If not, How can I use CLI through NodeJS and also get the callbacks?
I need the callbacks since that's the most powerful feature of NodeJS and besides my code is dependent on the callbacks..
P.S.: I do not need any code, all I need is directions.
Thanks for the support
A Node port of scss-lint was recently released, you can get it here: https://github.com/FWeinb/scsslint
It can be used either in Grunt or just as a normal Node module.
LESS has built-in linting, but it doesn't seem to be accessible through Node. You can use spawn or exec and the LESS CLI with the --lint flag. See the LESS docs here: http://lesscss.org/usage/#command-line-usage-options

How to make IDEA recognise keywords from Jasmine Node.js package?

I've got an IDEA 14.1.2 project using the Jasmine Node module for testing. Unfortunately IDEA doesn't recognise Jasmine function names like beforeEach, describe, it and expect, even though everything seems valid (the tests run fine). That is, when hovering over any of these I get a message like "Unresolved function or method function_name()", and when Ctrl-clicking I get the message "Cannot find declaration to go to".
Relevant settings:
In Languages & Frameworks → JavaScript → Libraries the following are checked:
Node.js v0.12.2 Core Modules (type Global)
HTML (type Predefined)
HTML5 / ECMAScript 5 (type Predefined)
Node.js Globals (type Predefined)
In Languages & Frameworks → Node.js and NPM (NodeJS JetBrains plugin 141.712):
the Node interpreter is set (it's in a subdirectory of the project),
"Node.js v0.12.2 Core Modules is set up", and
under Packages "jasmine" is listed as version 2.2.1 (latest).
Maybe I need to index internal Node modules, but I don't have the relevant check box in Languages & Frameworks → Node.js and NPM. Is this not available in this version of the plugin?
I've tried invalidating caches and restarting.
You need to add a TypeScript definition file as described here.
Go to Project Settings > Languages & Frameworks > JavaScript > Libraries, click Download, select Typescript community stubs from the combobox, choose jasmine and click Download and Install.

Resources