Prettier/ESLint is taking this line:
(contentType != null && contentType.indexOf('javascript') === -1)) {
and making it into this:
if (
response.status === 404 ||
(contentType != null &&
contentType.indexOf('javascript') === -1)
) {
I'm using Webstorm, but the command line output is this:
$ eslint src
C:\Users\jtuzman\dev\...\front_end\src\serviceWorker.js
109:40 error Replace `·contentType.indexOf('javascript')·===·-1)` with `␍⏎····················contentType.indexOf('javascript')·===·-1)␍⏎············` prettier/prettier
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
I've done some customizing of the prettier config (including explicitly writing out defaults):
module.exports = {
tabWidth: 4,
tabs: false,
semi: true,
singleQuote: true,
quoteProps: 'as-needed',
trailingComma: 'none',
bracketSpacing: true,
jsxBracketSameLine: true,
arrowParens: 'avoid'
};
But I can't tell what rule this is about. Perhaps it's an eslint rule. Anyone have ideas?
Related
I've the following code within my React component:
return (
<div>
<StyledTextField
value={otherFields}
onChange={handleInput}
variant='outlined'
placeholder='e.g. robotics, construction, material'
onFocus={toggleFocus.bind(null, true)}
onBlur={toggleFocus.bind(null, false)}
InputProps={{
endAdornment: (
<InputAdornment position='end'>
{(otherFields.length > 0) ? <StyledStar/> : '' }
</InputAdornment>
)
}}
/>
</div>
);
Which cause to eslint error, see screenshots below. I think it's related to prettier settings within eslint, but can't understand which one exactly. How can I identify and turn this rule off? Any general suggestions how to deal with such issues in the future?
My eslint/prettier code:
...
"prettier/prettier": [
"error",
{
"trailingComma": "none",
"singleQuote": true,
"bracketSpacing": false,
"printWidth": 120,
"useTabs": true,
"tabWidth": 2,
"arrowParens": "avoid",
"semi": true,
"jsxSingleQuote": true
}
]
...
It looks that the issue was related to printWidth, when I decreased it to 100 and following prettier official guidance it should be even less https://prettier.io/docs/en/options.html#print-width:
For readability we recommend against using more than 80 characters
The error disappeared.
I'm trying to install the BigCommerce Open Checkout script, and I'm currently getting this error when I try to run the basic installation locally:
Uncaught TypeError: $ is not a function
at eval (es.array.index-of.js?c975:15)
at Object../node_modules/core-js/modules/es.array.index-of.js
That file is:
'use strict';
var $ = require('../internals/export');
var $indexOf = require('../internals/array-includes').indexOf;
var arrayMethodIsStrict = require('../internals/array-method-is-strict');
var arrayMethodUsesToLength = require('../internals/array-method-uses-to-length');
var nativeIndexOf = [].indexOf;
var NEGATIVE_ZERO = !!nativeIndexOf && 1 / [1].indexOf(1, -0) < 0;
var STRICT_METHOD = arrayMethodIsStrict('indexOf');
var USES_TO_LENGTH = arrayMethodUsesToLength('indexOf', { ACCESSORS: true, 1: 0 });
// `Array.prototype.indexOf` method
// https://tc39.github.io/ecma262/#sec-array.prototype.indexof
$({ target: 'Array', proto: true, forced: NEGATIVE_ZERO || !STRICT_METHOD || !USES_TO_LENGTH }, {
indexOf: function indexOf(searchElement /* , fromIndex = 0 */) {
return NEGATIVE_ZERO
// convert -0 to +0
? nativeIndexOf.apply(this, arguments) || 0
: $indexOf(this, searchElement, arguments.length > 1 ? arguments[1] : undefined);
}
});
So far, I've tried updating core-js and NPM repeatedly with no luck.
core-js should not be compiled by Babel. When using webpack + babel to compile your code, you need to ensure that the webpack module rule for babel-loader excludes core-js.
Option 1
Tell webpack to not use babel-loader for any of the dependencies in your node_modules. Since core-js is a dependency in node_modules, this excludes core-js from being processed by babel.
// webpack.config.js
// This code snippet shows only the relevant part of the webpack config
module.exports = {
module: {
rules: [
{
test: /\.m?(j|t)sx?$/,
// Excluding node_modules means that core-js will not be compiled
exclude: /node_modules/,
use: ['babel-loader']
}
]
}
}
Option 2
Tell webpack to compile all dependencies with babel, except for the core-js dependency:
// webpack.config.js
// This code snippet shows only the relevant part of the webpack config
module.exports = {
module: {
rules: [
{
test: /\.m?(j|t)sx?$/,
// Compile all node_modules except core-js
include: {
and: [/node_modules/],
not: [/core-js/]
},
use: ['babel-loader']
}
]
}
}
Relevant Links
https://github.com/zloirock/core-js/issues/912
https://webpack.js.org/configuration/module/#ruleexclude
https://webpack.js.org/configuration/module/#ruleinclude
https://webpack.js.org/configuration/module/#rule-conditions
I'm using eslint-plugin-mocha to put some rules on writing tests with mocha and here is what my .eslintrc.js file looks like
module.exports = {
root: true,
parserOptions: {
sourceType: 'module'
},
plugins: ['mocha'],
extends: 'plugin:mocha/recommended',
rules: {
'mocha/valid-test-description': ['error', /^should/]
},
env: {
'mocha': true
}
}
This rule finds any test description that doesn't start with should.
The error message looks like that
error Invalid "it()" description found mocha/valid-test-description
I'd like the change this error message to be more descriptive but the rule doesn't offer options to change this message. Do you know how with eslint to configure this ?
I've made a PR and this feature is available since version 6.1.0 of eslint-plugin-mocha.
Here is how to define the error message:
rules: {
'mocha/valid-test-description': ['error', { pattern: /^should/, message: 'Should start with "should"' }]
}
// OR
rules: {
'mocha/valid-test-description': ['error', /^should/, ['it', 'specify', 'test'], 'Should start with "should"']
}
The documentation is available here.
Now the error message is:
error Should start with "should" mocha/valid-test-description
Note: the same feature is available for the valid-suite-description rule.
OS: macOS Sierra 10.12.5 .
Sublime Text: Build 3126 .
jshint v2.9.5 .
eslint v4.4.0 .
I have installed below packages for linting the js file
sublimeLinter-contrib-eslint
sublimeLinter-jshint
In my each .js file, IIFE (function(){ has been written on the top of the file BUT linter gives below error in gutter
Incompatible values for "undefined" and "undefined" linting options.
I have both .jshintrc and .eslintrc file in my project root directory BUT I am a bit confused
1. Which linter throw this error? and
2. How to resolve/fix it?
-.jshintrc_
{
"node": true,
"esversion": 6,
"globals" : {
"moment": true,
"saveAs": true
}
}
.eslintrc
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": "eslint:recommended",
"globals": {
"angular": true,
"module": true,
"inject": true,
"moment": true,
"saveAs": true,
"AWS": true,
"require": false
},
"rules": {
"indent": [0,"tab"],
"linebreak-style": [0, "unix"],
"semi": [2, "always"]
}
}
JS file
(function() {
'use strict';
angular.module().controller(function () { //....code.... });
})();
I have tried the rules as per eslint documentation
"rules": {
"wrap-iife": [2, "outside"]
}
tried all possible values but did not succeed.
Found solution by using Debug mode for sublimeLinter.
there are mixing of 2 .jshintrc files. one is the default ( which can be viewed by (context menu > JSHint > Set Linting Preferences ) and other is custom .jshintrc which located in my project root directory and also there are 2 property esnext and esversion written which I think is not valid. from this refrence
so first clear all comments from default .jshintrc (/Users//Library/Application Support/Sublime Text 3/Packages/JSHint Gutter/.jshintrc) and remove esversion property from custom .jshintrc file and everything is working fine now.
I'm using the the NoUiSlider 7 (jQuery Version) and i want a callback function if the User types a value below min value.
$('#slider').noUiSlider({
start: 100,
step: 10,
range: {
'min': Number(range[0]),
'max': Number(range[1])
},
serialization: {
lower: [
$.Link({
target: $('#ausgabe_klassisch_betrag')
})
],
format: {
thousand: '.',
postfix: ' E',
mark: ',',
decimals:0
}
}
});
So i tried to slice the value (because i use 2 characters postfix) and if the value is below then alert:
$("#slider_klassisch_betrag").on({
change: function(){
$val = $("#slider_klassisch_betrag").val().slice(0,-1);
if($val < 30 ){ alert(); }
}
});
But this does not work. the change only works if the slider changes and not with change by the input field