How to enable IntelliSense for Backbone in VS Code - intellisense

I am trying to install TypeScript definitions for an example Backbone.js project.
In a project directory, I have issued the following commands:
npm init
npm install typings
typings install dt~backbone --global
This adds an index.d.ts and a typings.json file to a \typings\globals\backbone folder.
The console output is as follows:
As shown, the files are each 1 KB, and VS Code intellisense does not pick up any Backbone definitions. (The project folder does contain a jsconfig.json file.)
Should the "typings install dt~backbone..." command not install the actual backbone type definitions (found in backbone-global.d.ts (17 KB)), and also dependencies like underscore and jquery (each around 140 KB)? Does the stripped reference indicate some type of error?
How do I install these files/definitions (so that VS Code intellisense will work correctly)?

Foreword
References are always stripped from Typings installation because of their ambiguous nature. The Backbone definitions file doesn't contain the definitions and just references backbone-global and underscore. There is an open issue about this.
Installation and configuration
By default, all JavaScript files opened in Visual Studio Code are treated as independent units. If you want to enable IntelliSense for the whole project remember to place the jsconfig.json file (can be empty) at the root of your project.
To install Typings manager execute npm install typings --global, and then install Backbone definitions with dependancies using following command:
typings install dt~underscore dt~backbone dt~backbone-global --global
You can also add the --save flag to create typings.json file. It's like dependencies part of package.json file but for Typings manager.
Example
I've just tested this quickly and IntelliSense seems to work as supposed after installing all referenced definitions and creating jsconfig.json file.
jsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules",
"tmp"
]
}
typings/index.d.ts
/// <reference path="globals/backbone-global/index.d.ts" />
/// <reference path="globals/backbone/index.d.ts" />
/// <reference path="globals/underscore/index.d.ts" />

Related

npm pack/publish won't pack .gitignore or .npmrc files

I have built a project generator for my company. It's a globally installed npm package, that when run, takes the entire contents of a /template directory inside the package and copies it to the user's chosen destination.
Inside /template I have 2 files that npm pack refuses to include in the final published module:
/template/.gitignore
/template/.npmrc
Everything else, including other hidden files, get packed as expected.
These 2 files are not in any root (or nested) .gitignore files, and I'm not manually specifying any files array in any package.json that npm might pick up on.
This is intentional behaviour https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package
The workaround was to create .gitignore.template and rename on install
Explicitly adding to files in package.json will force npm pack to include the files
"files": [
"dist",
"dist/template/.npmrc",
"dist/template/.gitignore"
]

How to install ESlint globally?

I'm trying to install ESlint to use it with Sublime Text 2 for all my local projects. Configuration documentation is very unclear about global installation:
Note: eslint --init is intended for setting up and configuring ESLint on a per-project basis and will perform a local installation of ESLint and its plugins in the directory in which it is run. If you prefer using a global installation of ESLint, any plugins used in your configuration must also be installed globally.
I don't understand what they mean. I used eslint --init and it installed ESlint locally in node_modules, along with all plugins. There's nothing explained about installing plugins globally. How do I do that? Also, how do I use the global ESlint installation if eslint --init installs local one anyway? This is so confusing.
You can install Node modules within the project (locally) or globally. To switch to globally, you may use the -g flag, like so:
npm install -g eslint
Then see if it's working without Sublime Text (-v flag to see the version of eslint):
eslint -v
To see where it was installed (assuming MacOS/Linux):
which eslint
Then see if it's working in Sublime Text (you may need to restart Sublime first). If it's not working, make sure in the eslint package settings that the path is correct.
The assumption is that you have an eslint plugin installed for your editor,if you have then npm install -g eslint,then you can install add-ons for specific environments,like npm install eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import -g (this is support for pure JS and for React),you can on this way add support for nodejs too,in working folder make .eslintrc file which looks like this
{
"extends": ["airbnb" , "eslint:recommended"],
"env": {
"node": false,
"es6": true,
"browser": true
},
"rules": {
"semi":"error",
"no-unused-vars": "off",
"func-names":"off",
"indent":"off",
"no-else-return":"off",
"prefer-arrow-callback":"off",
"no-undef":"off",
"no-use-before-define":"off",
"comma-dangle":"off",
"eol-last":"off",
"no-trailing-spaces":"off",
"linebreak-style":"off",
"no-console":"off",
"no-restricted-globals":"off",
"object-shorthand":"off",
"no-shadow":"off",
"no-debugger":"off",
"prefer-const":"off",
"no-multiple-empty-lines":"off"
}
}
if you need node support then in env section of .eslintrc set node to 'true' and install eslint-node plugin globally too with next
npm i eslint-plugin-node -g.
Then in extends section of .eslintrc add "plugin:node/recommended".
In this way, you will have eslint support in every project on your machine which have .eslintrc file.Set rules which you need in .eslintrc rules section .
Thats it.
To install eslint globally: npm install -g eslint
To install eslint in your project folder: npm install eslint --save-dev
Add in package.json this script : "eslint": "eslint --ignore-path .gitignore ."
Create a file called .eslintrc and insert :
{
"env": {
"browser": true,
"node": true
},
"globals": {
"chrome": true
},
"rules": {
"no-console": 0,
"no-empty": [1, { "allowEmptyCatch": true }]
},
"extends": "eslint:recommended"
}
Personally, I save this file in my js folder
Go to node_modules/.bin
Run : eslint --init
or npm run eslint nameOfYourFile
Unfortunately, ESLint no longer recommends the use of Personal Configuration. Even if you have ESLint and other ESLint configuration files installed in the global scope, it will not read them correctly.
https://eslint.org/docs/latest/user-guide/configuring/configuration-files#personal-configuration-files-deprecated
Personal Configuration Files (deprecated)
⚠️ This feature has been deprecated. This feature will be removed
in the 8.0.0 release. If you want to continue to use personal
configuration files, please use the --config CLI
option.
For more information regarding this decision, please see RFC
28 and RFC
32.
~/ refers to the home directory of the current user on your
preferred operating
system. The personal
configuration file being referred to here is ~/.eslintrc.* file,
which is currently handled differently than other configuration files.
How does ESLint find personal configuration files?
If eslint could not find any configuration file in the project,
eslint loads ~/.eslintrc.* file.
If eslint could find configuration files in the project, eslint
ignores ~/.eslintrc.* file even if it's in an ancestor directory of
the project directory.
How do personal configuration files behave?
~/.eslintrc.* files behave similarly to regular configuration files,
with some exceptions:
~/.eslintrc.* files load shareable configs and custom parsers from
~/node_modules/ – similarly to require() – in the user's home
directory. Please note that it doesn't load global-installed packages.
~/.eslintrc.* files load plugins from $CWD/node_modules by default
in order to identify plugins uniquely. If you want to use plugins with
~/.eslintrc.* files, plugins must be installed locally per project.
Alternatively, you can use the --resolve-plugins-relative-to CLI
option
to change the location from which ESLint loads plugins.

Npm / Yarn : how to filter files copied from local path dependencies?

I have a weird behavior in a phoenix project.
The project defines dependencies to local projects:
"dependencies": {
"phoenix": "file:../../deps/phoenix",
"phoenix_html": "file:../../deps/phoenix_html",
...
Both npm install and yarn install are able to locate the projects and copy the files in "node_modules". However :
npm install only copies a subset of the "deps/phoenix" folder (mostly .js files)
yarn install copies the whole folder (both .js and .ex files)
How does npm knows which files to copy ? Is it simply a convention ? I did not find anything particular in "deps/phoenix/package.json", for example.
Otherwise, is there a way to have yarn behave the same as npm ?

configure a different path per client deps in npm

In an asp.net core project all the client files must to be copied under the approot directory to be deployed correctly: jspm let you define a proper directory for client deps, but with npm I have to copy the files from node_modules
directory to the approot\node_modules using a gulp task.
Since I'm not interested in filtering or manipulating the files before the deploy, but I just what that the files in the installed module are deployed, there is some way to do this without use gulp ?
You can use npm to do that. Add a script to your package.json:
"scripts": {
"copy": "xcopy from to"
}
Then you can call npm run-script copy to have it executed. I used xcopy as an example, you can use whatever you like. There is some more documentation about scripts in npm.

How to shrinkwrap npm modules without local dependencies

I tried to maintain package.json with the list of node modules dependencies. when I call npm install it installs the node modules.and generates a folder for it in my app. I call the npm shrinkwrap. But this generates the dependency on the local node module
"dependencies": {
"async": {
"version": "0.2.5",
"from": "async#0.2.5",
"resolved": "https://registry.npmjs.org/async/-/async-0.2.5.tgz"
},
when I upload the app to the appfog server it can install from the npm-shrinkwrap.json. So Ideally I want to remove the node modules folder and just pass the shrinkwrap.json file. But it has this "from". I had in the past generated the shrinkwrap & it didn't have the "from" field in there.
How to generate without "from"/ can I just get a shrinkwrap file from package.json. so my app will be leaner. I can maintain all the node module globally.
Thanks
I'm a bit confused by your question.
Shrinkwrap does not install, package, upload or do anything to your dependencies.
All it does is scan your installed node_modules and record the versions (recursively) into a file. Invoking npm install after that file is defined becomes repeatable, which is a principle of software engineering.
"from" was introduced a few months back. The npm shrinkwrap command seems to set it to the URL from which a module was installed. This is probably for portability. npm install takes a module name, consults a registry (whose URL is configurable as an npm config setting) and installs it. I could take the same package.json and npm-shrinkwrap.json, put them on another machine and theoretically get a different result if that machine's npm config settings point it to a different registry. Therefore, embedding the resolved URL in the shrinkwrap file adds an additional level of repeatability to npm install
See the npm config man page for details of setting the registry parameters.
According to npm issue 3145 on github, the "from" setting is known to cause backwards-compatibility issues with pre-1.2.x npm systems. Upgrading is the only resolution.
https://github.com/isaacs/npm/issues/3145
I think that you are looking for shrinkpack: https://www.npmjs.com/package/shrinkpack
from the doc:
Shrinkpack complements the npm shrinkwrap command by maintaining a node_shrinkwrap directory in your project, containing the exact same tarballs that npm install downloads from https://registry.npmjs.org.
The rest of the npm install process is exactly the same. The only difference is that no network activity is necessary when installing and building your project. The node_shrinkwrap directory can be ignored in your editor (much like is done with the node_modules directory) but is instead checked into source control.