I am using Visual Studio Code (VSC) 0.10.11 on Windows and Mac. For the purpose of this question I have this small JavaScript snippet:
'use strict';
const os = require('os');
console.log(os.homedir());
I followed John Papa on Visual Studio Code (Blog entry and Pluralsight Visual Studio Code JavaScript Intellisense - for those who have an account) and therefore I would expect that VSC provides Intellisense and Quick fix options when typings are available.
In the snippet above VSC recognizes console and log() (I use hoover, but it is the same with Intellisense):
but not os and homedir():
But all 4 typings are available in typings/main/ambient/node/index.d.ts. I know that the difference is the require in the case of os, but in John Papa's video course VSC also provided IntelliSense for required modules. A difference is that John Papa used tsd while I am using typings.
So my questions are
how can I enable Intellisense for all known typings?
what do I have to do that VSC offers me Quick fix (green line under moduls with missing typings)?
The above links are outdated. In older versions of VS Code you needed to reference your typings like /// <reference path> for somelibrary.d.ts.
With new version you need to initialize your project by creating jsconfig.json at the root of your project and add the following inside:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs"
},
"exclude": [
"node_modules"
]
}
Next install typing you need. You can use either tsd or typings. In your case you need to install tsd install node or typings install node --ambient. Make sure you have typings/tsd installed. Restart project.
Please refer to docs:
Setup JS project - https://code.visualstudio.com/docs/languages/javascript
Node.js - https://code.visualstudio.com/docs/runtimes/nodejs
Debugging - https://code.visualstudio.com/docs/editor/debugging
Update:
Since version 1.7 there is no need to manually install typings, they should be downloaded automatically. Better JavaScript IntelliSense
There is a built-in extension called TypeScript and JavaScript Language Features (vscode.typescript-language-features) that is disabled.
In order to enable it, open Extensions panel, search for "#built-in JavaScript", and enable the required extension.
Now you should be able to use the autocomplete feature.
I experienced this on global "process" object. Vscode enabled intellisense for process object, only if I add any "require" statements to the file.
So if there is not any other require statements, you can add
const process = require('process');
in the beginning of your script to get intellisense.
Well, after 4 hr's googling finally, I decided to uninstall nodejs, npm, and typescript then install all of them again. The previous time I installed them using nvm but this time I decided not to use nvm just install them from node source since I am using Ubuntu I executed bellow commands, for windows or mac just install them without any package or version manager.
curl https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -
sudo apt-add-repository "deb https://deb.nodesource.com/node_7.x $(lsb_release -sc) main"
sudo apt-get update
sudo apt-get install nodejs
above command installed both nodejs and npm, after then to install typescript I ran bellow command
sudo npm install --global typescript
I updated my VSCode to the newest version.
Then in the bottom right of my VSCode I clicked on javascript to change the language mode, I wrote 'type' on the search bar and select typescript as my new selected language mode...........BINGO
Related
When using npx tsc --init without typescript installed, NPM seems to go through the motions to download tsc, and has some commands, but not all (it doesn't have --init), and I realize its because its using a really old version of tsc. Thats annoying, it should use the latest one :)
To reproduce this yourself, make sure you don't have typescript installed globally and also are not in a NPM project (with package.json). Then type npx tsc --version: you will get
npx: installed 1 in 0.868s
message TS6029: Version 1.5.3
Obviously the workaround is to install typescript first, but then there is no point of npx, is there? Only then do I get the latest version:
Version 4.1.3
As Estus Flask said in his answer here, when you use tsc without typescript installed, you are using the deprecated tsc package, which I personally wasn't able to find using https://www.npmjs.com/search?q=tsc probably because it has fallen way down in the search ranking.
His answer has more detail and tips to make npx still work without installing typescript: npx -p typescript tsc (-p means "Package to be installed.")
After typing the question, it looks like a similar question has been asked before. But this question has got nothing to do with virtual machines (the original question): "npx tsc --version" reports different TypeScript version inside virtual machine
We develop in Angular with Visual Studio Code using GitHub as a code repository. This works fine, but recently we had a problem due to one of the developers having a different version of a certain library. Since installing with npm doesn't require to specify the version (it installs the latest) he ended up with a version different from the other developers.
One way to solve the problem is to put all the libraries in GitHub, but that seems overwhelming. What are the best practices to have all developers use the same version of javascript libraries?
Make sure package.json specifies the version of dependencies and that you commit this file
{
"dependencies": {
"foo": "1.2.3" exact version
"bar": ">1.2.3" greater than 1.2.3
"baz": "^1.2.3" compatible with 1.2.3, ie from 1.2.3 until below 2.0.0
}
}
More details on semantic versionning
package.json defines which range of versions can be installed, but package-lock.json defines which exact versions of all packages (all = includes dependencies of dependencies) are installed. You have to commit this file.
Also, prefer npm clean-install rather than npm install because it throws an error if the installed packages in the node modules folder don't match the ones defined in the package lock.
Is it possible in any way to make Microsoft Visual Studio Code to auto complete Parse JS SDK? I know it is possible with some other IDEs by importing the parse-1.5.0.js file, but i found this IDE better...
With nodejs and npm-cli installed, get definition file packager manager(tsd-cli) and install parse.d.ts:
npm install -g tsd
tsd install parse --save
Use tsconfig.json or jsconfig.json to enable autocomplete without reference by comments.
VSCode will find parse.d.ts file and just works!
This process is same to any other library.
I want to create a new macro command in JS for my project and I heard about sweet.js.
After I was reading about that a little bit I found this page that explain how to export your commands, but I didn't really understand the Github system and I always see commands with syntax like that: $ sjs --module ./macros.js my_sweet_code.js and I can't figure out where I'm supposed to run those commands. So if someone can explain how to use this library and how to run github commands in general I will be glad.
P.S: I saw sweet.js is a mozilla library, it means that it works only on FF? Ff yes, is there any solution for all the browsers?
The line sjs --module ./macros.js my_sweet_code.js needs to be run on the command line on a system that has node.js and sweet.js installed. You can install node from here and once that's installed you can use the npm command on the command line to installed sweet.js: npm install -g sweet.js. With sweet.js installed you can then use the sjs command to compile code.
Also, sweet.js is a Mozilla project it but works everywhere.
As complexity of my web project is growing, I am realizing that downloading external JavaScript libraries manually, is error prone, time consuming and making project less maintainable over time.
Although Visual Studio has NuGet package manager, it is not as powerful as bower. Also not all external libraries are being released on NuGet.
But there is no clear help on how to configure bower with Visual Studio. Please help !
As complexity of my web project grew, I realized that downloading external JavaScript libraries manually, was error prone, time consuming and made project less maintainable over time.
Although Visual Studio has NuGet package manager, it is not as powerful as bower. Also not all external libraries are being released on NuGet.
So, I decided to take the plunge and get started with bower.
My project structure is now much cleaner and easy to maintain.
Here I am listing steps, we need to take to configure bower with Visual Studio.
Detailed steps to use bower are already available on http://bower.io/#install-bower. Here I will list steps, I took to
— install bower
— configure it with Visual Studio
— download a sample package -- ( AngularJS )
Bower requires node, npm and git for windows.
Before proceeding ahead, install the following
git for windows – install from https://msysgit.github.io/
node – install from https://nodejs.org/
npm is part of node (no need for any extra step)
Step# 1
Open Command Prompt and execute command
npm install -g bower
Above step may fail, if you are behind corporate proxy server. To add
proxy server settings in npm, execute following 2 commands from
command prompt
npm config set proxy http://proxy.myCompany.com:80
npm config set https-proxy http://proxy.myCompany.com:80
Once done, try installing
bower again
Step# 2
Navigate to your Visual Studio Project folder from Command Prompt.
Execute command
bower init
Include this file to Visual Studio project. You may have to click on
“Show All Files” from Solution Explorer menu.
Step# 3
Create a .bowerrc file using notepad with following configuration and save it in your Visual Studio Project folder
{
"directory": "scripts/bower_components",
"proxy":"http://proxy.myCompany.com:80",
"https-proxy":"http://proxy.myCompany.com:80"
}
Include this file to Visual Studio project.
Edit this file to set directory for packages to be downloaded by
bower
Add proxy server settings if you are working behind corporate proxy. Else remove the last 2 lines for proxy and https-proxy
Step# 4
To download AngularJs, execute command
bower install angular –save
This will add a line in bower.json.
Step# 5
Package will be downloaded under bower_components directory by default. (or under the directory mentioned in .bowerrc file)
Make to sure include the whole package directory in Visual Studio project.
Click on Show All Files
Right click on new downloaded package and click on “Include in
Project”
Step# 6
Finally add reference of new package to your index.html
I found that I also needed to configure git to use the proxy server :
git config --global http.proxy http://username:password#proxyURL:8080
After that bower worked in VS 2015