I have a file called
payment-shipping.tsx
and eslint is throwing an error
Filename is not in camel case. Rename it to `paymentShipping.tsx` unicorn/filename-case
However, the file needs to be in kebab case since it's a next.js page that shows up in the URL.
Adding the following line to the top of said file:
// eslint-disable-next-line unicorn/filename-case
Does not suppress the error, it instead throws another error:
'unicorn/filename-case' rule is disabled but never reported eslint-comments/no-unused-disable
How do I suppres the filename-case error?
You can use ignore option of that rule.
.eslintrc
...
rules: {
...
"unicorn/filename-case": [
"error",
{
"case": "kebabCase",
"ignore": [
/pages/.*\.js$/
]
}
]
}
...
When I configure my vscode with eslint & prettier, I met a problem in .settings.json file with error message "Auto Fix is enabled by default. Use the single string form.":
My eslint configuration is:
My prettier configuration is:
module.exports = {
singleQuote: true,
semi: false
}
Does anybody know what's the reason and how to fix?
It seems a tab width issue, try add "tabWidth": 4 in your prettier config.
EDIT:
According to ESLint Reference: "eslint.validate" is an array of language identifiers specifying the files for which validation is to be enforced.
"eslint.validate" accept an array of language identifiers, not an array of objects.
No need for "autoFix", it defaults to be true.
So your settings should be:
"eslint.validate": [
"vue",
"html",
"javascript"
]
In my code I am using opencv.js and it has some methods which do not follow my eslint rules, for example:
/* globals cv */
...
cv.GaussianBlur(...);
...
...
The above line will give the "new-cap" eslint error (A function with a name starting with an uppercase letter should only be used as a constructor).
Can I configure eslint to ignore anything related to cv ?
Thx.
I recently started using the eslint module to help clean-up some JavaScript files. The following error is being reported when I lint one of my files:
127:17 error Unexpected alias 'me' for 'this' consistent-this
After checking the documentation, I understand the error is being reported because my code is assigning the value of this to a variable named me instead of that.
What is the proper way to configure my project's .eslintrc.json to make it so the following line of code is not reported as an error: var me = this;?
The rule should be like this in your .eslintrc
{
"rules" : {
"consistent-this": ["error", "me"]
}
}
Summernote is a jQuery plugin, and I don't need type definitions for it. I just want to modify the object, but TS keeps throwing errors. The line bellow still gives me: "Property 'summernote' does not exist on type 'jQueryStatic'." error.
(function ($) {
/* tslint:disable */
delete $.summernote.options.keyMap.pc.TAB;
delete $.summernote.options.keyMap.mac.TAB;
/* tslint:enable */
})(jQuery)
Edit:
Here is my tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"allowJs": true,
"noUnusedParameters": true
},
"include": [
"js/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
As of Typescript 2.6, you can now bypass a compiler error/warning for a specific line:
if (false) {
// #ts-ignore: Unreachable code error
console.log("hello");
}
Note that the official docs "recommend you use [this] very sparingly". It is almost always preferable to cast to any instead as that better expresses intent.
Older answer:
You can use /* tslint:disable-next-line */ to locally disable tslint. However, as this is a compiler error disabling tslint might not help.
You can always temporarily cast $ to any:
delete ($ as any).summernote.options.keyMap.pc.TAB
which will allow you to access whatever properties you want.
#ts-expect-error
TypeScript 3.9 introduces a new magic comment. #ts-expect-error will:
have same functionality as #ts-ignore
trigger an error, if actually no compiler error has been suppressed (= indicates useless flag)
if (false) {
// #ts-expect-error: Let's ignore a compile error like this unreachable code
console.log("hello"); // compiles
}
// If #ts-expect-error didn't suppress anything at all, we now get a nice warning
let flag = true;
// ...
if (flag) {
// #ts-expect-error
// ^~~~~~~~~~~~~~~^ error: "Unused '#ts-expect-error' directive.(2578)"
console.log("hello");
}
Playground
What do TypeScript developers recommend?
#ts-ignore and #ts-expect-error are like a sledgehammer for compile errors. TypeScript developers recommend more fine-grained, narrow-scoped typesystem solutions for most cases:
We added ts-ignore with the intent that it be used for the remaining 5% that can't be suppressed by any existing type system mechanics [...] there should be very very very few ts-ignores in your codebase[.] - microsoft/TypeScript#19139
[...] fundamentally, we believe you shouldn't be using suppressions in TypeScript at all. If it's a type issue, you can cast out of it (that's why any, casting, and shorthand module declarations exist). If it's a syntax issue, everything is awful and we'll be broken anyway, so suppressions won't do anything (suppressions do not affect parse errors). - microsoft/TypeScript#19573
Alternatives for question-case
▶ Use any type
// type assertion for single expression
delete ($ as any).summernote.options.keyMap.pc.TAB;
// new variable assignment for multiple usages
const $$: any = $
delete $$.summernote.options.keyMap.pc.TAB;
delete $$.summernote.options.keyMap.mac.TAB;
▶ Augment JQueryStatic interface
// ./global.d.ts
interface JQueryStatic {
summernote: any;
}
// ./main.ts
delete $.summernote.options.keyMap.pc.TAB; // works
In other cases, shorthand declarations / augmentations are handy utilities to compile modules with no / extendable types. A viable strategy is also to incrementally migrate to TypeScript, keeping not yet migrated code in .js via allowJs and checkJs: false compiler flags.
You can simple use the following just before the line:
// #ts-ignore
I used // #ts-ignore:next-line right before the error.
If you're using eslint to perform your check or fix you can disable a line by adding this on top of the line
// eslint-disable-next-line #typescript-eslint/<RELEVANT_ESLINT_RULE>