I have a Node.js web application where I use Backbone.js and jQuery. My main js file is app.js where I include all the necessary scripts, including jQuery. So, this is the beginning of my app.js code:
'use strict';
var _ = require('lodash');
var $ = require('jquery');
var B = require('backbone');
B.$ = $;
Now if I run grunt on my project, it raises errors at the line where jQuery is loaded to $. It shows me this:
Linting public/js/app.js ...ERROR
[L4:C5] W079: Redefinition of '$'.
var $ = require('jquery');
I can still get everything running with grunt --force, but I would like to eliminate this error anyway. Can somebody explain why it raises the error and how to fix it?
My .jshintrc file:
{
"laxcomma": true
,"laxbreak": true
,"curly": true
,"eqeqeq": true
,"immed": true
,"latedef": true
,"newcap": true
,"noarg": true
,"sub": true
,"undef": true
,"unused": false
,"asi": true
,"boss": true
,"eqnull": true
,"node": true
,"browser": true
,"jquery": true
,"predef":
[
"suite"
,"test"
,"setup"
,"teardown"
,"suiteSetup"
,"suiteTeardown"
,"requestAnimationFrame"
]
}
In jshint docs: http://www.jshint.com/docs/options/
jquery = true
This option defines globals exposed by the jQuery JavaScript library.
You are telling jshint that jquery exists, thus he assumes that $ is defined. Remove the "jquery" : true" and your issue should go away.
Add this at the top of the file to make that error go away:
/* jshint -W079 */
What's happening here is that JQuery defines the $ variable, so JSHint views this as a piece of "potentially dangerous code"
A better solution would be to require jquery directly which should give you access to the $ variable globally.
Random guess: do you include jquery somewhere else? For example in some html file as a script. Or some other script might be defining global jquery variable.
Make sure that in your .jshintrc you don't have '$' set as predefined.
// Predefined Globals
"predef" : ["$"]
If it is, remove.
Related
I'm running a gulp-concat script, which concats jquery, slick-carousel, t.js and my index.js files.
const pack = () => {
return gulp.src(['./node_modules/jquery/**/jquery.js', './node_modules/slick-carousel/**/slick.js', './assets/js/t.js-master/t.js', './js/index.js'])
// .pipe(gulp_babel({
// 'presets': ['#babel/env'],
// 'plugins': ["transform-remove-strict-mode"]
// }))
.pipe(gulp_concat('main.js'))
// .pipe(gulp_uglify())
.pipe(gulp.dest('./build'));
}
As you can see, I removed any pipes that might be causing the issue. The only task running is gulp-concat. (index.js is all in ES5 and I'm running on latest version of firefox, no need for babel atm) When I open my page, however, I get the error
Uncaught ReferenceError: define is not defined
Looking at main.js, I found a define object at the end of the jquery section - but only in the concatinated file, not the jquery in node_modules. I didn't add this, and I'm not using require.js as far as I know:
define( [
"./core",
"./selector",
"./traversing",
"./callbacks",
"./deferred",
"./deferred/exceptionHook",
"./core/ready",
"./data",
"./queue",
"./queue/delay",
"./attributes",
"./event",
"./event/focusin",
"./manipulation",
"./manipulation/_evalUrl",
"./wrap",
"./css",
"./css/hiddenVisibleSelectors",
"./serialize",
"./ajax",
"./ajax/xhr",
"./ajax/script",
"./ajax/jsonp",
"./ajax/load",
"./core/parseXML",
"./core/parseHTML",
"./effects",
"./effects/animatedSelector",
"./offset",
"./dimensions",
"./deprecated",
"./exports/amd",
"./exports/global"
], function( jQuery ) {
"use strict";
return jQuery;
} ); // jQuery seems to end here
How is this extra code being added, and how might I avoid it? I'm also using browserSync, but don't think that's related.
I've just checked the source of jQuery and there is a file:
https://github.com/jquery/jquery/blob/3.5.1/src/jquery.js
So what you need to do is to simply exclude it and it should fix the issue :)
I've been a long time user of Standard, and now that I'm working on a new project, I've been asked to start writing semicolons.
I'm trying to use both xo, Babel and React, but I keep getting an error when I try to lint my code:
document is not defined. no-undef
I've tried adding an env option to the xo field in my package.json file, but no success.
My xo config:
"xo": {
"esnext": true,
"extends": "xo-react",
"space": true,
"rules": {
"react/jsx-space-before-closing": 0
}
}
It is cumbersome to specify linting options such as /** global document **/ and edit a configuration file every time you use a global.
This error can be suppressed by using --env=browser option:
xo --env=browser [<file|glob> ...]
Note: Same problem comes with Node.js, where the linter will complain that require and friends are not defined. The switch has to change to --env=node in that case.
However, XO defaults the env to node, therefore this will not be a problem in most cases. You will need multiple environments if your project contains both client and server files. in that case, --env switch can be set multiple times:
xo --env=browser --env=node [<file|glob> ...]
You have to define globals in ESLint. There are two ways to accomplish this, firstly as a comment in your code:
/* global document */
Or you can configure in configuration file like so:
{
"globals": {
"var1": true,
"var2": false
}
}
See the ESLint docs for more
In my project we have some global variables that work as containers:
MyProject.MyFreature.someFunction = function() { ... }
So then I use that script across the site and JSLint / JSHint complains about that:
'MyProject' is not defined
I know that I can go to every JavaScript file and add the comment /*global MyProject*/ on top of it. But I'm looking a way to define that comment in some sort of config file so I don't have to go file by file adding this comment.
Some kind on option in the config/jshint.yml would be nice.
For JSHint you can create .jshintrc to your project directory with
{
"globals": { "MyProject": true }
}
This is only for globals
/* global MyProject */
In your case you need
/* exported MyProject */
JSLint has a textarea below the options that says predefine global variables here in it. Just add the variable names in there before running the check.
JSHint doesn't allow you to add global variables, but you can uncheck the When variable is undefined option to suppress that warning.
The JSHint library also has parameters for globals, if you run it as a library . . . details in here: http://jshint.com/docs/
I uses RequireJS AMD in my project. When i run jshint on my project, it throws error like
In AMD Scripts
'define' is not defined.
In Mocha test cases
'describe' is not defined.
'it' is not defined.
How to remove this warning in jshint?
Just to expand a bit, here's a .jshintrc setup for Mocha:
{
....
"globals" : {
/* MOCHA */
"describe" : false,
"it" : false,
"before" : false,
"beforeEach" : false,
"after" : false,
"afterEach" : false
}
}
From the JSHint Docs - the false (the default) means the variable is read-only.
If you are defining globals only for a specific file, you can do this:
/*global describe, it, before, beforeEach, after, afterEach */
jshint: {
options: {
mocha: true,
}
}
is what you want
To avoid the not defined warning in jshint for the javascript add comments like:
/*global describe:true*/
Options
Add this in your .jshintrc
"predef" : ["define"] // Custom globals for requirejs
late to the party, but use this option in your jshintrc:
"dojo": true
and thou shall rest peacefully without red warnings...
If you are working on node js. Add these two lines in the beginning of your file
/*jslint node: true */
"use strict";
Read the docs and search for /*global
If you're trying to run JSHint in WebStorm with Mocha, as I am, go into:
WebStorm > Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > JSHint
Scroll down to "Environments" and make sure you have selected the checkbox to enable "Mocha" which will set up the definitions for JSHint for Mocha for you.
I'm trying to use lint with Grunt. I'm able to run Grunt from the command line but it is giving me a lot of errors. Mostly "'$' is not defined". Even alert is throwing an error, "'alert' is not defined".
How can I get around those?
You need to tell JSHint (which is the linter that Grunt uses by default) about the global variables available to the files being linted. I'm assuming that you're including jQuery on your pages, hence the $ identifier (could be various other libraries of course).
You can either specify global variables in each file, or in the Grunt script. To specify them in a file, you can use a global directive. Place this at the top of the file, or at the top of the function in which you use the global:
/*global $:false */
Note that the false means you'll get errors if you override $. If you need the ability to do that, change it to true.
If you'd prefer to specify globals in the Grunt script, you can add a globals property to any of the tasks in your jshint section. For example:
grunt.initConfig({
jshint: {
someTask: {
globals: {
$: false
}
}
}
});
As for the alert message you're getting, you need to tell JSHint that you're allowing the use of development functions, such as alert and console.log. To do that, you can use a jshint directive in the files (just like the global directive):
/*jshint devel:true */
Or you can add an options property to the task in the Grunt script:
someTask: {
globals: {
$: false
},
options: {
devel: true
}
}
See the JSHint docs for all of the options available to you.
globals must be inside options
someTask: {
options: {
devel: true,
globals: {
$: false
}
}
}