How configure jshint in a meanjs project with socket.io? - javascript

I followed exactly that tutorial (I obviously replaced the vexxhost domain name by localhost:3000 for my tests).
And while calling grunt there is an error ('io' is not defined) but the server start without any other complain.
If I correctly understood the problem, jshint scan the whole project to validate the code and he finds on reference to an undefined variable ! But 'io' is defined when the whole application starts (because the script are loaded). In fact, that error is more a warning than an error
If I am right (and I hope some people here will correct me if I am not), that bring us to my question : How refactor the code or configure jshint to avoid that warning ?
If possible I would prefer to have an explicit reference to 'io'.
By advance thank you to everyone.
EDIT
My results from that tutorial are available here on github. The problematic file is public/modules/core/services/socket.js.

There is 2 way to configure JSHint to correct that error :
if you are calling the io variable in several place of the code. JSHint is configurable in the .jshintrc file, there is a a global section where it is possible to add "io": true. With that modification, JSHint should consider io as a global variable.
Or if you only call the io variable once, you can add the comment /* global io: true */ directly in the file where you are calling it.

Related

Best practices for creating a "debug mode" variable for my app?

I was about to comment out blocks of code that just printed/console.logged debugging info, and I thought, why don't I create a global scope "debug" variable, and instead of commenting this code out, put an if (DEBUG == 1) {} around it?
The reason I ask is because I'm working with javascript at the moment, and my code is spread across a few .js files. If I create a DEBUG variable in app.js, I'll need to export it from app.js and require it in other files; is this consistent with best practices? Is there a better way to do what I'm thinking of?
There are many ways to do this. Most logging libraries will have levels that allow you to only output or see messages whose levels are above some minimum. Alternatively, if you're just using console.log or console.debug and content to keep those in lieu of more robust log streams, you can change the behavior of these by using your own logging library; for example, if you have a debug.js file that exports your debug() function, import/require it once in each other file and just call debug() instead of console.debug() (or you can actually reassign console.debug = debug but that will have potential side effects in any dependencies or dependent code).
In debug.js, your function can simply check an environment variable (in node.js or similar) or global variable (in the browser) or even a hard-coded flag, and immediately return (doing nothing) if you're in production or not in the mood to print debug messages.
Take a look at bunyan's log levels as an example of how a popular logging library handles this: https://www.npmjs.com/package/bunyan#levels
If you are programming the browser and you want a quick and dirty global variable, you can do window.myVar = 'whatever'.

Javascript - Find all implicitly declared variables in directory?

I have 100+ js files in a directory in atom editor. In chrome console I get errors about many variables not being defined (only the ones I interact with on the page are the ones that show they are undefined), but the error goes away and that portion of js works when I add the var/const/let keyword before those variables.
I now understand that they are implicitly implied variables because throughout the files, some are defined like this (strict mode is on):
foo = bar; // This is an implicitly implied variable
var foo = bar; // This fixes the issue
So the solution is to add var/const/let before those variables, but I am wondering if there is any way to scan the directory of files to point out the implicitly implied variables so I can add var/const/let in front of them?
It is taking very long to navigate through all the files manually scanning for those variables to fix up or navigate the app and wait for the error to show up to fix it one by one.
Any quick solution for this (without disabling strict mode)?
You could use a linter for the directory, which will browse through all the files and raise warnings.
JSHint is a popular one, and it's pretty easy to get going with npm from the command line, or you can install it into your code editor like Atom or Sublime.
The CLI version will be more powerful, you can specify a directory for it to scan, and recursively scan all children. In your code editor, you'll usually only get warnings for the file you currently have open.

Calling a function defined outside of the Javascript library

I am working on video.js library. I was trying to modify it, so that it uses a custom player instead of the HTML5 player.
So I replaced the function calls to play() etc with the calls to my custom player(say custFunc1()). These calls are defined in a separate javascript file: custPlayer.js.
So in my index.html file, I will first include the custPlayer.js file and then the built video.js file.
However the problem is that while building the video.js package using grunt, I get the error that custFunc1 is not defined and thus grunt is not able to create the video.js library.
Now I was able to find out from a colleague that adding
/* global custFunc1 */
at the beginning of the particular file in the video.js package from where I was calling custFunc1 resolves the issue. The grunt build succeeds and it works fine.
So what I want to know is:
How does this actually resolve the issue, since this is exactly like a comment in javascript, how does it treat this differently and understand that it indicating that the function definition will be present outside the library?
Is the word global some sort of keyword in javascript?
Are there other ways of achieving this apart from what I mentioned?
On a slightly different note, I wanted to ask if grunt is the rough equivalent of make ?
Your javascript is being linted as part of your grunt process, if you look at the root of your project folder you should see a file like .jshintrc or something along those lines (different depending on the linter).
Your current settings means that the linter is going through your .js files one at a time and if it comes across a variable or function from another files it's throwing the error your seeing. You can either turn off this check or add custFunc1 to an array of known global variables. In jshint you do it like so - https://github.com/gruntjs/grunt-contrib-jshint#jshintrc
{
"globals": {
"custFunc1": true
}
}
The globals will probably already be present in the file, so just add custFunc1: true to it.
Oh and to answer question 1 - the comment type syntax tells the linter to ignore it's settings for that current file, basically overriding the settings in the .jshintrc file.
2 - Yes it's a setting in jshintrc and your adding custFunc1 to it inside the file itself instead of globally in the .jshintrc file.
3 - Mentioned above.
4 - Never used maker but yes i believe its similar in that its a pre process tool

How to run jslint on the client?

For testing purposes, obviously not for production. What is the best way to do this?
Googling I found this tutorial, and of course the project on github.
For starters which files do I need to run:
// removed
and is there an API reference. I see there is a large comment block in jslint.js that seems to server this purpose but was wondering if there is something easier to read.
Because the client has no file access, I was planning on ajaxing the code in to get its contents.
Please never the mind, on why I want to do this on the client.
If you include the JSLint script you will have access to a single global variable, JSLINT. You can invoke it with a string and an optional map of options:
var valid = JSLINT(code, options);
The result will be true or false, depending on whether the code passed the check based on the provided options.
After this call you can inspect the JSLINT.errors property for an array of warnings, if any.
This is precisely what I have done to build JSLint integration into the editor in the articles on http://jslinterrors.com.
Have you looked at http://jshint.com/ ? Source is available here: https://github.com/jshint/jshint/
The browser bundle is available here: http://jshint.com/get/jshint-2.1.10.js and the docs describe how to call it (http://jshint.com/docs/)

JSLint - problems importing packages

I am scripting java using rhino. I have few classes written in java that I am importing in javascript.
But, when I am validating javascript against JSLint, it invalidates javascript saying:
Problem at line 9 character 1: 'importPackage' was used before it was defined.
Here is the sample from my script:
importPackage(Packages.org.raj.test);
var test = "123";
I have selected the option: "Assume Rhino" as well but still, it shows up same error.
How should I deal with this problem?
Note that the ECMA standard doesn't cover communication with Java (or with any external object system for that matter).
I have explicitly added following line on top of my script
/*global importPackage: true */
and it works!
It looks like the "Assume Rhino" flag (aka rhino: true in the options directive) only predefines a few global variables for you, and importPackage isn't one of them. You can see the complete list in the code.
Paul's answer is basically the correct workaround – you just manually declare each extra global you use. This code passes JSLint cleanly:
/*global importPackage, Packages */
importPackage(Packages.org.raj.test);
var test = "123";

Categories

Resources