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.
Related
I am using Visual Studio Code and pylama linter.
Currently I am added # noqa to every long line to avoid the following linter message:
line too long (100 > 79 characters) [pycodestyle]pylama(E501)
I've added "--disable=E501" to VSCODE's workspace settings.json file as shown below:
{
"editor.tabSize": 2,
"editor.detectIndentation": false,
"python.linting.enabled": true,
"python.linting.pylintEnabled": false,
"python.linting.flake8Enabled": false,
"python.linting.pycodestyleEnabled": false,
"python.linting.pylamaEnabled": true,
"[python]": {
"editor.tabSize": 4
},
"python.linting.pylama": [
"--disable=E501"
]
}
but still I get E501.
How can I disable E501 in my VSCODE workspace for good?
For other linters, the .settings file seems to be looking for
python.linting.<linter>Args
so I recommend trying:
"python.linting.pylamaArgs": [
"--ignore=E501"
]
or potentially
python.linting.pylamaArgs": ["--disable=E501"]
See also: https://code.visualstudio.com/docs/python/settings-reference#_pylama
that seems to suggest the same:
pylamaArgs [] Additional arguments for pylama, where each top-level element that's separated by a space is a separate item in the list.
I use Vim version 7.4.629 and I want to use prettier to clean up markdown files for Hugo the static site generator. How do I configure Vim correctly?
Here is an error message:
_index.md|1 col 3| Invalid left-hand side in assignment
Here is an example _index.md file:
---
title: "Privacy Policy"
description: "Privacy Policy"
date: 2020-01-01T12:56:17+01:00
draft: false
menu:
footer:
name: Privacy Policy
url: /privacy-policy/
weight: 1
---
{{< divmd class="section-x" >}}
{{< divmd class="container" >}}
## Privacy Policy
---
### Privacy policy for website operators based on GDPR specifications
We are delighted you are visiting our website
{{< /divmd >}}
{{< /divmd >}}
The line "proseWrap": "always", in the .prettierrc solved the problem.
Here the an example of my .prettierrc.
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"traillingComma": "all",
"bracketSpacing": false,
"proseWrap": "always",
"jsxBracketSameLine": false
}
I am trying to import files like this but getting error: Expected 'multiple' syntax before 'single' syntax
import { Component, Prop, Vue } from 'vue-property-decorator';
import { getModule } from 'vuex-module-decorators';
import { ApiException, IProduct, IProductCategory } from '#/services'; // error here
import { INavs } from '#/types';
Rule config:
'sort-imports': ['error', {
'ignoreCase': false,
'ignoreDeclarationSort': false,
'ignoreMemberSort': false,
'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single']
}]
import { ApiException, IProduct, IProductCategory } from '#/services'; is importing multiple (three) exports.
Both import { getModule } from 'vuex-module-decorators'; and import { INavs } from '#/types'; are only importing a single named export.
That error will go way if you move import { ApiException, IProduct, IProductCategory } up one line so it's above the single imports.
This is configured in your settings where it says 'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single'] because 'multiple' is listed before 'single'.
You can read more about it in the eslint documentation here https://eslint.org/docs/rules/sort-imports
Ran into this too looking for a CI solution for reordering multiple imports, since ESLint --fix only supports multiple members on a single line; i.e. autofixing unsupported when spread over multiple lines - e.g. from a low Prettier printWidth of ~80.
eslint-plugin-simple-import-sort works great, fixed the errors after amending config from the docs:
Make sure not to use other sorting rules at the same time:
[sort-imports]
[import/order]
To resolve this issue I'll recommend modifying your .eslintrc.json setting
"sort-imports": ["error", {
"ignoreCase": false,
"ignoreDeclarationSort": false,
"ignoreMemberSort": false,
"memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
"allowSeparatedGroups": false // <-- Change this to true
}],
Which prevents you from reordering local imports and third party imports that are in different groups but violate the memberSyntaxSortOrder as earlier suggested
I configure eslint in the editor, from the manual https://eslint.org/docs/user-guide/configuring#specifying-globals:
In my config, it looks like this:
"eslint.enable": true,
"eslint.options": {
"globals": {
"$": true,
"moment": true
},
...
With such settings, VS Code generates an error:
(options.globals || []).reduce is not a function
How to configure the global config of eslint in VS Code?
As it turned out, the solution was unexpected enough and found here https://github.com/eslint/eslint/pull/6922
Those.
It is suggested to replace the global settings object with an array, and now with this in mind, my config looks like this:
"eslint.enable": true,
"eslint.options": {
"globals": [
"$",
"moment"
],
...
I hope someone will reduce the time to find a solution to the problem.
I'm trying to turn off the "no-use-before-define" rule for functions, but leave it active for variables and classes.
In the documentation found here http://eslint.org/docs/rules/no-use-before-define it says that this is the correct configuration syntax:
"no-use-before-define": ["error", { "functions": false, "classes": true, "variables ": true }]
When I run with that though I get this error:
[21:00:46] Error: CLI:
Configuration for rule "no-use-before-define" is invalid:
Severity should be one of the following: 0 = off, 1 = warning, 2 = error (you passed "error").
Value "[object Object]" must be an enum value.
at Object.validateRuleOptions (E:\01-Dans stuff\Projects\00 - YeoSword\YeoSword-git\node_modules\gulp-eslint\node_modules\eslint\lib\config\config-validator.js:102:15)
at CLIEngine.<anonymous> (E:\01-Dans stuff\Projects\00 - YeoSword\YeoSword-git\node_modules\gulp-eslint\node_modules\eslint\lib\cli-engine.js:421:19)
at Array.forEach (native)
at new CLIEngine (E:\01-Dans stuff\Projects\00 - YeoSword\YeoSword-git\node_modules\gulp-eslint\node_modules\eslint\lib\cli-engine.js:420:43)
at Object.gulpEslint (E:\01-Dans stuff\Projects\00 - YeoSword\YeoSword-git\node_modules\gulp-eslint\index.js:17:15)
at E:/01-Dans stuff/Projects/00 - YeoSword/YeoSword-git/gulp/tasks/eslint.js:24:16
at taskWrapper (E:\01-Dans stuff\Projects\00 - YeoSword\YeoSword-git\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:287:14)
at runBound (domain.js:300:12)
at asyncRunner (E:\01-Dans stuff\Projects\00 - YeoSword\YeoSword-git\node_modules\async-done\index.js:36:18)
I know that the gulp-eslint syntax is a little bit different from the official eslint configuration syntax.
I can't figure out what the gulp-eslint syntax is for the { "functions": false, "classes": true, "variables ": true } bit though. There doesn't seem to be any documentation for it anywhere.
This answer doesn't explain how to do the custom configuration but it does explain how to get the functionality that I was originally after.
"no-use-before-define": [1, "nofunc"]
"nofunc" is basically just a shortcut command for { "functions": false, "classes": true, "variables ": true }
I get the feeling that this is actually a bug in gulp-eslint and there is no actual way to do custom settings using the plugin.
You have an extra space in your rule, just after the word 'variables':
"no-use-before-define": ["error", { "functions": false, "classes": true, "variables ": true }]
This is illegal and would generate an error.