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
Related
I'm trying to sort props names alphabetically using the plugin eslint-plugin-react but I'm getting this error:
[Error ] .eslintrc.json: Configuration for rule "react/jsx-sort-props" is invalid: Value {"callbacksLast":true,"shorthandFirst":false,"shorthandLast":true,"multiline":"last","ignoreCase":true,"noSortAlphabetically":false} should NOT have additional properties.
This is my .eslintrc.json file:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"next/core-web-vitals"
],
"rules": {
"react/jsx-sort-props": [
"2",
{
"callbacksLast": true,
"shorthandFirst": false,
"shorthandLast": true,
"multiline": "last",
"ignoreCase": true,
"noSortAlphabetically": false
}
]
}
}
What I'm missing?
There are two issues:
The severity option, if you're using a number, should be a number, not a string that contains a number - 2, not "2". (Though, personally, I'd suggest using "error" instead - it makes it clearer from reading the config what the rule means for your project - "error" makes more intuitive sense than 2)
There is a bug in the linter rule's jsx-sort-props.js - although the docs reference a multiline property, said property does not exist anywhere in the lint rule implementation, and so an error is thrown when you pass in an object containing that property. Remove it.
"rules": {
"react/jsx-sort-props": [
2,
{
"callbacksLast": true,
"shorthandFirst": false,
"shorthandLast": true,
"ignoreCase": true,
"noSortAlphabetically": false
}
]
}
I've created a completely new angular application using ng new test-app, added Prettier to devDependencies and installed it and have disabled all extensions except Prettier in VSCode.
The problem is that when I set up VSCode to format on save, it always removes the trailing commas in typescript arrays and objects.
I've set "trailingComma":"all" in .prettierrc.json as well as having these settings in settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"prettier.trailingComma": "all",
"prettier.proseWrap": "always",
"prettier.useEditorConfig": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always"
}
My User settings for all vscode projects is
{
"git.autoStash": true,
"todo-tree.general.tags": [
"BUG",
"HACK",
"FIXME",
"TODO",
"XXX",
"[ ]",
"[x]"
],
"todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
"git.autofetch": true,
"files.autoSave": "afterDelay",
"git.enableSmartCommit": true,
"workbench.startupEditor": "newUntitledFile",
"cSpell.userWords": [
"Reorderable",
"configcat",
"datatable",
"devkit",
"initialise",
"initialising",
"primeng"
],
"editor.largeFileOptimizations": false,
"git.confirmSync": false,
"diffEditor.wordWrap": "on",
"explorer.confirmDelete": true,
"explorer.confirmDragAndDrop": true,
"workbench.editorAssociations": {
"*.sqlite": "default"
},
"diffEditor.ignoreTrimWhitespace": false
}
Turns out Prettier does add trailing comma's but only if the array is split over multiple lines.
E.g. the code below will have a trailing comma added by prettier
let x = [
"aaaaaaaaaaaaaaaa",
"bbbbbbbbbbbbbbbb",
"cccccccccccccccc",
"dddddddddddddddd",
"eeeeeeeeeeeeeeee",
"ffffffffffffffff"
];
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
}
}
]
}
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 */
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