I have the following test code
const sth = {
one: 'one',
two: 'two',
three: {
foo: 'foo',
bar: 'bar',
}
};
const state = {
...sth
};
When I run jshint I get the following output
jshint --config .jshintrc test.js
test.js: line 12, col 3, Expected '}' to match '{' from line 11 and instead saw '...'.
test.js: line 12, col 6, Missing semicolon.
test.js: line 12, col 9, Missing semicolon.
test.js: line 12, col 6, Unrecoverable syntax error. (92% scanned).
4 errors
But this is perfectly valid es6 code.
My .jshintrc looks like the following:
{
"curly": false,
"expr": true,
"maxlen": 200,
"esversion": 6
}
Is there a magic setting that I am missing to make this pass?
You are using Object Rest/Spread Properties which is not in ES6 and not even a standard, yet. Currently it is at stage 3.
JSHint does not support Object Rest/Spread Properties, yet. You could replace JSHint with ESLint which has experimental support using experimentalObjectRestSpread.
Or, of course, you could just ignore these lines as sabareesh suggests. Personally, however, I would advise against it. It pollutes the code base and also disables subsequent linting. I would suggest using ESLint instead as it usually has better support for newer features and seems to be more popular anyway.
var state = {
// jshint ignore:start
...sth,
// jshint ignore:end
}
try these.
You should add a file named .jshintrc in your app's root with the following content:
{
"esversion": 9
}
Basically, destructuring is not available before es9.
Related
I use Cypress v10 with typescript. I'd like to add chai-subset plugin. I've added npm package already.
How should I configure Cypress to see the plugin? Will it be then also available for code completion in Visual Studio Code ?
The steps given on the npm page are as follows, BUT for Cypress you should omit the first line require('chai') because Cypress has added chai globally and modified it to allow the .should() command to use it.
Add it to the /support/e2e.js file.
// var chai = require('chai'); // NOT THIS LINE
var chaiSubset = require('chai-subset');
chai.use(chaiSubset);
Usage:
cy.get(...)
.should('containSubset', {
a: 'b',
e: {
baz: {
qux: 'quux'
}
}
})
I'm trying to integrate babel through gulp.
var babel = require('gulp-babel');
var es6 = require('babel-preset-es2015');
...
return gulp.src('path/to/my/source/file/js')
.pipe(babel({presets:es6}))
...
When I run the compile task, my linter (JSHint) says that the line is too long and that I'm missing a line end.
Let's say that my source file is as following (please note the last empty line) :
(function(){
var myApp = angular.module('first-dependence',[
'another-dependence',
'and-another-dependence']
}();
// Empty line here
Babel outputs it like this:
(function(){
var myApp = angular.module('first-dependence',['another-dependence','and-another-dependence']
}();
For me, he is ignoring the line returns inside the instructions and removes the last empty line.
Is it possible to tell babel to keep the formatting as it's and to only transcompile ?
Regards
You can't. But you can try
the retainLines option
.pipe(babel({presets:es6, retainLines:true}))
or to rely on source maps (see gulp-babel).
But neither will preserve your white-space exactly as it is right now.
I'm using gulp-jshint and receiving this message with a javascript file. The file is a simple service class in my Aurelia app. Here is the code:
import {inject} from 'aurelia-framework';
import {MyService} from './app/service/MyService';
/* jshint ignore:start */
#inject(MyService)
/* jshint ignore:end */
export class App {
constructor(MyService) {
this.message = MyService.message;
}
}
Here is my gulp task (gulp-jshint is getting loaded using gulp-load-plugins):
gulp.task('vet', function() {
return gulp.src(config.alljs)
.pipe($.if(args.verbose, $.print()))
.pipe($.jscs())
.pipe($.jshint())
.pipe($.jscsStylish.combineWithHintResults())
.pipe($.jshint.reporter('jshint-stylish', {verbose: true}))
.pipe($.jshint.reporter('fail'));
});
I have "esversion": 6 in my .jshintrc
This is the result of running gulp vet (in both Powershell and cmd)
PS C:\_files\programming\MyProj> gulp vet
[11:42:21] Using gulpfile C:\_files\programming\MyProj\gulpfile.js
[11:42:21] Starting 'vet'...
web\app.js
line 5 col 1 Unexpected token ILLEGAL (W parseError)
‼ 1 warning
[11:42:23] 'vet' errored after 1.79 s
[11:42:23] Error in plugin 'gulp-jshint'
Message:
JSHint failed for: web\app.js
PS C:\_files\programming\MyProj>
The Aurelia app works just fine. JSHint is ignoring the #inject within VSCode also, no problem there. For some reason, though, gulp-jshint won't let it go. I've deleted and retyped the line after searching and finding a lot of issues with non-printable characters. I've tried switching the jshint ignore to // jshint ignore:line syntax. Still nothing.
Is there something I'm missing?
JSHint does not support decorators ("#whatever") yet, so esversion: 6 will not affect this issue.
The policy of JSHint is to support features that are Stage 2 of
standardization process, which is not the case yet for decorators.
https://github.com/jshint/jshint/issues/2310
Not sure why your "ignore" directive is failing, though. Maybe try the single-line ignore directive?
#inject(MyService)// jshint ignore:line
Edit: Ignoring a single line doesn't work for me either. Sorry, this answer probably won't be helpful. :-(
I'm attempting to migrate from Sass to postCSS and testing out postcss-simple-vars gulp plugin.
I'm using Webstorm IDE, which automatically uses javascript style comments (//) in .scss files, so my non-block comments are all // comments, not /* */.
postcss-simple-vars throws errors at all // comments, even with the silent option set to true.
Here's my gulp task:
gulp.task('postcss', function () {
return gulp
.src('./styles/sass2/*.scss')
.pipe($.postcss(
[
vars({
silent: true,
variables: colors
})
]))
.pipe(gulp.dest('./dest'));
});
Am I missing something really obvious? Is there some way to get postcss-simple-vars to ignore // style comments?
HOW I SOLVED IT:
I replaced all the // comments with /* */ comments with gulp-replace ($.replace).
gulp.task('replace-comments', function() {
return gulp
.src(config.scss)
.pipe($.replace(/\/\/.*/g, function(comment){
return '/*' + comment.substring(2) + ( '*/');
}))
.pipe(gulp.dest('./styles/sass3'));
});
The problem is not in postcss-simple-vars. It's that the default parser for postcss expects standard CSS, and // comments are not standard: they break the parser.
To run uncompiled SCSS with // comments through postcss, you should use the alternate parser postcss-scss. The documentation in that README and for gulp-postcss should explain how to use it.
i am running into a problem. I have created my own seed: https://github.com/damirkusar/leptir-angular-seed with gulp, browserify and more.
Everything worked fine, since i had the good idea to update node from 10.32 to 12.5, i am getting the below error. I think that this is since then. I tried it also on a different machine, same setup, same error.
so, after npm install and bower install i am starting the app with:
gulp
or when trying to build the project with
gulp build
i am getting this error:
leptir-angular-seed/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:162
rs.on('error', function (err) { tr.emit('error', err) });
^
TypeError: Cannot read property 'emit' of undefined
at ReadStream.<anonymous> (/leptir-angular-seed/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:162:39)
at ReadStream.emit (events.js:107:17)
at fs.js:1618:12
at FSReqWrap.oncomplete (fs.js:95:15)
Here is also the link to the package.json: https://github.com/damirkusar/leptir-angular-seed/blob/450ffe99943036cd5a670e54ec3884c02bd7bb8a/package.json.
but luckily, karma start executes the tests and all tests are passing..
Maybe some versions are not really supported correctly?
Does anybody have an idea what causes this problem?
-- edit 2015-June-25 14:23
I am using the module which cause the problem in my gulp file like this:
// Browserify task
gulp.task('browserify', function () {
gulp.src(paths.browserify[0])
.pipe(browserify({
insertGlobals: true,
debug: true
}))
// Bundle to a single file
.pipe(concat('bower.js'))
// Output it to our dist folder
.pipe(gulp.dest(paths.destination_public))
.pipe(refresh(lrServer)); // Tell the lrServer to refresh;
gulp.src(paths.browserify[1])
.pipe(browserify({
insertGlobals: true,
debug: true
}))
// Bundle to a single file
.pipe(concat('app.js'))
// Output it to our dist folder
.pipe(gulp.dest(paths.destination_public))
.pipe(refresh(lrServer)); // Tell the lrServer to refresh;
});
which browserifyies these app.js file and its content:
require('./modules/core');
require('./modules/core');
and bower.js with its content:
'use strict';
require('jquery');
require('bootstrap');
require('moment');
require('underscore');
require('angular');
require('angular-animate');
require('angular-bootstrap');
require('angular-bootstrap-tpls');
require('angular-cookies');
require('angular-mocks');
require('angular-resource');
require('angular-ui-router');
require('angular-ui-utils');
require('angular-translate');
require('angular-translate-loader-static-files');
require('angular-translate-loader-url');
require('angular-translate-storage-cookie');
require('angular-translate-storage-local');
thank you so much
"...but in fact, otherwise i am not using this module which causes the error." - damir
modules has dependencies too. it seems to be a problem with one of these modules that are used by an other module.
It could be possible that a module you are using has a dependency on a node component of the old version. Try to get the old back until the bug is fixed.
On a windows machine (instead of mine mac) it showed me a better error message.
I referenced bower packages which where not installed.. but totally forgot to remove it from package.json and bower.js.
so i removed code in the above files which referenced the following packages:
angular-translate-storage-cookie
angular-translate-storage-local
-- UPDATE 27th June 2015 - 22:41 --
I saw that gulp-browserify is blacklisted by gulpjs, so i thought its better to get rid of it, because i faced also problems on windows machines. Instead of using gulp-browserify, i am using plain browserify with vinyl-transform.
First, update your package.json with this:
"browserify": "9.0.4",
"vinyl-transform": "1.0.0"
You see, that i am using exactly these two versions, this is because with newer browserify versions, things are not really working, so to be sure that it works also when i update my packages, i keep them in this versions.
Then lets update our gulp file. We will need to add these two lines:
var browserify = require('browserify'),
transform = require('vinyl-transform');
and my new task looks like this:
gulp.task('browserify', function () {
var browserified = transform(function(filename) {
var b = browserify(filename);
return b.bundle();
});
return gulp.src(paths.browserify)
.pipe(browserified)
.pipe(gulp.dest(paths.destination_public));
});
its now shorter and much cleaner. My paths are configured like this..
var paths = {
...
browserify: ['./public/bower.js', './public/app.js'],
...
destination_public: './dist/'
};
now my seed is working on mac and windows the same way.
https://github.com/damirkusar/leptir-angular-seed