We Keep Coding

Prettier - Config for HTML and JS

I want to specify string lengths for HTML and JS in one config file .prettierrc.
module.exports = {
singleQuote: true,
printWidth: 80,
[HTML]: {
printWidth: 150,
},
};
But in log i got:
ReferenceError: HTML is not defined

You should be using the .prettierrc format instead, visual studio code will also provide intellisense when you use this format.
You are getting the error because:
The file needs to be in the JSON format,
Any overrides need to be specified under the overrides JSON key
In your case the file should look like this:
.prettierrc
{
"singleQuote": true,
"printWidth": 80,
"overrides": [
{
"files": ["**/*.html"],
"options": {
"printWidth": 150
}
}
]
}

jsonschema not throwing error on missing required property

I have the following schema:
const LIST_EVENTS = {
"id": "/listEvents",
"type": "object",
"properties": {
"filter": {
"$ref": "/MarketFilter",
"required": true
},
"locale": {
"type": "string"
}
}
}
From debugging, I can see that the object being sent to the validation is:
{
marketFilter: {
eventTypeIds: [ '1' ],
marketStartTime: {
from: '2018-12-15T00:00:00+00:00',
to: '2018-12-15T23:59:59+00:00'
}
}
}
marketFilter does not match the name of filter in the schema. To my understanding, seeing as this is a required property, this should have been flagged in the errors array of the validation result but it is not. This is my validation result:
ValidatorResult {
instance:
{ marketFilter: { eventTypeIds: [Array], marketStartTime: [Object] } },
schema:
{ id: '/listEvents',
type: 'object',
properties: { filter: [Object], locale: [Object] } },
propertyPath: 'instance',
errors: [],
throwError: undefined,
disableFormat: false }
I thought that it was possible that it did not mind about the naming convention so I removed the property altogether and still, an error is not logged with this being the validation result:
ValidatorResult {
instance: {},
schema:
{ id: '/listEvents',
type: 'object',
properties: { filter: [Object], locale: [Object] } },
propertyPath: 'instance',
errors: [],
throwError: undefined,
disableFormat: false }
I have many schemas and they are all added via .addSchema method

You have two issues with your schema. The main issue is that your required keyword is ignored because it is next to $ref. When an object with a $ref keyword is encountered where a schema is expected, it's treated as a JSON Reference only. It's not treated as a schema. A JSON Reference only has semantics for the $ref keyword. Everything else is ignored. You could fix your problem by isolating the $ref in you schema.
"filter": {
"allOf": [{ "$ref": "/MarketFilter" }],
"required": true
}
The other problem is the use of the boolean form of the required keyword. This usage of the required keyword was removed from the JSON Schema specification years ago. Unless you are specifically writing JSON Schemas against the draft-03 specification (unlikely, it's long out of date), you should be using the array form of required. Some older implementations allow you to use both forms, but that's not a good idea. You should be targeting a single specification and not mix keywords from two different versions of specification.
{
"id": "/listEvents",
"type": "object",
"properties": {
"filter": {
"$ref": "/MarketFilter"
},
"locale": {
"type": "string"
}
},
"required": ["filter"]
}

For now, I have found a work-around that is also described in the docs. I have added the required array property to the schema and added filter to it. This now threw an error.
However, the documentation states that the required property on the property itself should work the same. Is this potentially an issue with the package or is there different behaviours if the property is a reference?

disabling dot-notation in eslint

I'm having trouble disabling dot-notation in eslint. Below is my eslint config (for the toy example):
module.exports = {
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
4
],
"dot-notation": 0,
"no-console": 0,
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
};
And here is my javascript:
var x = { a: 3 };
console.log("x[a] = " + x["a"]);
According to this, 0 is the way to turn off this eslint option. What am I doing wrong?

Setting a rule value to 0 turns the rule off completely. This means that ESLint will not complain if you try to use an indexer rather than dot notation. It sounds like you're expecting the rule to either throw a warning or error which means that you need either a value of 1 (or warn) or 2 (or error) depending on how you want ESLint to behave.
The "Configuring Rules" section of "Configuring ESLint" should make it a little more clear:
https://eslint.org/docs/user-guide/configuring#configuring-rules

Use ESLint with Airbnb style and tab (React.js)

I'm working on a React.js application and I'm trying to lint my code. I use ESLint with the Airbnb style, but I have these errors:
../src/Test.jsx
4:2 error Unexpected tab character no-tabs
5:2 error Unexpected tab character no-tabs
5:3 error Expected indentation of 2 space characters but found 0 react/jsx-indent
6:2 error Unexpected tab character no-tabs
Here my code:
Test.jsx:
import React from 'react';
function Test() {
return (
<h1>Test</h1>
);
}
export default Test;
.eslintrc:
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
"react/prop-types": 0,
"react/jsx-indent-props": [2, "tab"],
}
}
As you can see above, I would like to indent with tab.
webpack.config.js:
loaders: [{
test: /\.jsx$|\.js$/,
loaders: ["babel-loader", "eslint-loader"],
exclude: /node_modules/
},
...
]
I also tried to indent why 2 spaces, without success. I really don't understand why I have theses errors. Do you have an idea?
Thanks!

As #mark-willian told me, I added some lines in my .eslintrc and it works:
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
"no-tabs": 0,
"react/prop-types": 0,
"react/jsx-indent": [2, "tab"],
"react/jsx-indent-props": [2, "tab"],
}
}
Thank you for all of your answers.

The airbnb rules want you to use spaces instead of tabs for formatting your code. Good editors (sublime is one!) will let you use tabs but translate them to spaces when saving your code.
You need to change the config of your sublime; go to Preferences-Settings and customize the following settings:
"tab_size": 2,
"translate_tabs_to_spaces": true
Sublime will convert your existing code - click on the text in the status bar at the bottom right that says tabs or spaces.
You can selectively turn off eslint rules if (for example) one of airbnb's rules doesn't match your coding style guide.

Try replace every tab to spaces.
It is also a good idea to enable the ESLint autofix feature with this eslint-loader option in your webpack configuration.

You can add this comment on page which you get no-tabs error.
/* eslint-disable */

Possibility for nested properties in stylelint in Gulp?

Is it possible to have a nested property list and let do stylelint it's work? I tried to do this, but I got the following error:
events.js:85
throw er; // Unhandled 'error' event
^
Error: Expected pseudo-class or pseudo-element
I tried it with this code:
padding: {
left: 20px;
top: 30px;
}
And this is the configuration I use at the moment:
"rules": {
"block-no-empty": true,
"color-no-invalid-hex": true,
"declaration-colon-space-after": "always",
"declaration-colon-space-before": "never",
"function-comma-space-after": "always",
"function-url-quotes": "double",
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-name-no-vendor-prefix": true,
"max-empty-lines": 5,
"number-leading-zero": "never",
"number-no-trailing-zeros": true,
"property-no-vendor-prefix": true,
"rule-no-duplicate-properties": true,
"declaration-block-no-single-line": true,
"rule-trailing-semicolon": "always",
"selector-list-comma-space-before": "never",
"selector-list-comma-newline-after": "always",
"selector-no-id": true,
"string-quotes": "double",
"value-no-vendor-prefix": true
}
Or is there another SCSS linter without using Ruby gems?
It might be useful to have this information:
These are my vars:
var postcss = require('gulp-postcss');
var reporter = require('postcss-reporter');
var syntax_scss = require('postcss-scss');
var stylelint = require('stylelint');
And at the bottom of the file is this:
var processors = [
stylelint(stylelintConfig),
reporter({
clearMessages: true,
throwError: false
})
];
gulp.src('style.scss')
.pipe(postcss(
processors, {
syntax: syntax_scss
}));
I followed a tutorial like this one:
http://www.creativenightly.com/2016/02/How-to-lint-your-css-with-stylelint/
And changed some bits in my code to work with the rest of the website.

This issue is due to the code not being valid css but is valid for scss.
Related: https://github.com/stylelint/stylelint/issues/1386#issuecomment-223266044