I have a large JavaScript file with multiple eslint rule violations. I am trying to disable them and address them one at a time. The code below shows that I can disable them all with no trouble, but not the rule about camelcase and perhaps other individual rules. The approaches I have used should work according to the eslint documentation, but there must be a flaw in my interpretation.
The code is short and it does not eliminate the error concerning camel case.
/* eslint-disable /* eslint-disable// works but gets everything.
`/* eslint (camelcase) : 0 */
/* eslint camelcase : ["error", {ignoreDestructuring:true}] */
const Lesson_1 = {title:'The Home Row Keys.'},'lesson': 'jjj fff jjj fff'}
Just get the same camelcase error without any change. The eslint documentation says just disable the entire rule but does not specify a method other than listed above.
To disable the rule for a file add next line at the begging of a file:
for JavaScript files:
/* eslint-disable camelcase */
for TypeScript with enabled #typescript-eslint plugin:
/* eslint-disable #typescript-eslint/camelcase */
To disable the rule for all files in a project add next line to the eslint config file:
for JavaScript files:
rules: {
...
'camelcase': 'off',
}
for TypeScript with enabled #typescript-eslint plugin:
rules: {
...
'#typescript-eslint/camelcase': 'off',
}
For TypeScript, we can change the rules in the eslintrc file.
rules: {
"camelcase": "off",
"#typescript-eslint/camelcase": ["warn"]
}
We can set "off" or "warn" here. https://eslint.org/docs/user-guide/configuring#configuring-rules
This works for me
/* eslint-disable camelcase */
Update For TypeScript:
#typescript-eslint/camelcase is deprecated
use #typescript-eslint/naming-convention instead
rules: {
...
"#typescript-eslint/naming-convention": "off"
}
Or for single files
/* eslint-disable #typescript-eslint/naming-convention */
This worked for me
Use following code, and add it to each corresponding file containing variables against camelcase rules :
/* eslint-disable #typescript-eslint/class-name-casing */
/* eslint-disable #typescript-eslint/camelcase */
It works for me.
You shouldn't disable this is a bad practice but in case you wanted you can add a rule to your .eslintrc.json file in the root of your project and set camelcase to as shown in the example.
"extends": "standard",
"rules": {
"camelcase": 0
}
}
I had to use:
/* eslint-disable #typescript-eslint/naming-convention */
After moving Angular to eslint
Try the following options.
Use the next-line or same-line syntax
// eslint-disable-next-line camelcase
const Lesson_1 = {title:'The Home Row Keys.'},'lesson': 'jjj fff jjj fff'}
or (see after semi-colon)
const Lesson_1 = {title:'The Home Row Keys.'},'lesson': 'jjj fff jjj fff'}; // eslint-disable-line camelcase
Try disabling the entire file by adding the following as the first line of your file. This should ignore all camel casing errors in the entire file.
/* eslint-disable camelcase */
Note: Always check if the configuration file work against the eslint you're running. Means, there can be multiple installations of eslint - Global & local. So make sure you are running the right one. Also check the rules object in the .eslintrc configuration file.
To disable on a single file *.js or *.ts; put the following at the top of that file.
/* eslint #typescript-eslint/no-var-requires: "off" */
Related
I have a .ts file with following code:
/**
* #ab 3.0
* #xy
*/
import * as myInterface from "#root/common/interface/interfaces";
...
I want to have the comment header at the very top of the .js file, however it either disappears in some cases or is being moved to the middle of the code in other cases. Does anyone have any idea how to configure babel to transpile it in a correct way? I am using babelrc.
As you might know some browsers already support CSS Cascade Layers (https://caniuse.com/?search=%40layer). The main keyword of this feature is #layer. Unfortunately VSCode displays a warning message:
Unknown at rule #layer css(unknownAtRules)
Is there any list of css keywords to include #layer keyword in my VSCode settings?
I tried to use the "css.customData" option. But I didn't manage to get any results. I created a css-data.json file in the same folder as the settings.json file.
What the correct path to the file should look like? I would like to have a relative path but I tried an absolute path as well. Nothing happened. I'm using portable VSCode if it is matter. Here are my attempts:
"css.customData": ["c:\\app\\VSCode\\data\\user-data\\User\\css-data.json"],
"css.customData": ["css-data.json"],
"css.customData": [".\\data\\user-data\\User\\css-data.json"],
"css.customData": ["./data/user-data/User/css-data.json"],
Here is a content of css-data.json:
{
"version": 1.0,
"properties": [],
"atDirectives": [
{
"name": "#layer",
"description": "Declares a cascade layer."
}
],
"pseudoClasses": [],
"pseudoElements": []
}
You probably just need to use
"css.customData": [".vs-code/css-data.json"]
but in case that doesn't work; I fixed this for myself in the following way:
in: .vscode/settings.json
"css.customData": [".vscode/css_custom_data.json"]
and then the .vscode/css_custom_data.json file itself:
{
"atDirectives": [
{
"name": "#layer",
"description": "The #layer CSS at-rule is used to declare a cascade layer and can also used to define the order of precedence in case of multiple cascade layers.",
"references": [
{
"name": "#layer",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/#layer"
}
]
}
]
}
This however fails to fully permit the use of the #layer spec as #import rules still can't include a layer() as an example:
#layer reset, pallet, base, layout, local;
#import "style/reset.css" layer(reset); /* unifies / css reset */
#import "style/pallet.css" layer(pallet); /* color pallets */
#import "style/main.css" layer(base); /* primary css*/
now throws 3 errors and 0 warnings whereas without this fix it also throws a warning.
#layer and #property will be supported in vscode v1.72 - due out early October, 2022.
See 1.72 Release Notes:
The CSS language support now also understands the #property and
#layer at-rules.
My guess is that this is just a rule that hasn't been updated in the VSCode internal CSS linters.
Hunting for this warning I came across this stylelint issue #6084 ([at-rule-no-unknown] incorrectly flags #layer). They fixed this through a PR in May 2022.
I was assuming that stylelint is the underlying CSS linter for VS Code but appears it isn't. You can install the stylelint vscode extension (and disable the internal VSCode CSS linters) and this #layer error goes away.
Consider the following example of 3 javascript files:
/** myclass.js **/
import jQuery from 'jQuery';
class MyClass {
constructor() {
this.property = null;
jQuery('#test').data('myClass', this);
}
testMethod() {
return null;
}
}
export default MyClass;
/** file.js **/
import MyClass from './myclass.js';
new MyClass();
export default null;
/** index.js **/
import './file.js';
import jQuery from 'jQuery';
let myValue = jQuery('#test').data('myClass');
What I would like to achieve, is to get property and method auto suggestion from my IDE on the myValue variable. I know (I mean I presume) that automatically, there is no way for the IDE to know what I stored in the data variable of jQuery, but what kind of type hint should I provide before myValue to tell the IDE, that it should be an instance of MyClass?
If in index.js I also import myclass.js with the definition of the class, I was able to achieve my result, by type hinting before the variable with the following jsdoc comment:
/** #type {MyClass} */
But this line only works if I also imported the definition in the current scope. Is there any way to either:
achieve suggestions automatically, without manually type hinting?
or if that is not possible, type hint, without manually importing the definition beforehand?
I am using Visual Studio Code v1.46.1 and I have the ESLint v2.1.5 extension installed on it.
EDIT: After trying to create a jsconfig.json file in my root folder, with the following options:
{
"exclude": ["node_modules"]
}
and modifying my index.js by adding this jsdoc comment, I am still getting no autosuggestions by VSCode:
/** #type {MyClass} */
I've tried adding the above comment both above, and below the line, where I fetch the data from the jQuery element.
EDIT 2:
Okay, basically, it looks like that my IntelliSense "breaks" when I am trying to export something from a file. Could this be a VSCode issue?
I am using Eslint in Visual Code for my SAPUI5 project. Whenever I am defining a controller using
sap.ui.define([...
Eslint throws the error sap not defined.. The same holds for $/jQuery. Is there a way how to solve that?
Thanks
You can whitelist global variables in the eslint configuration: https://eslint.org/docs/user-guide/configuring (see "Specifying Globals").
To configure global variables inside of a configuration file, use the
globals key and indicate the global variables you want to use. Set
each global variable name equal to true to allow the variable to be
overwritten or false to disallow overwriting. For example:
{
"globals": {
"var1": true,
"var2": false
}
}
Usually you have some kind of .eslintrc.js file where you can include this.
Here is an example: https://github.com/pulseshift/openui5-gulp-starter-kit/blob/master/.eslintrc.js
I'm trying to document a Javascript file with JSDoc(3) like so:
/** 1 if gnome-bluetooth is available, 0 otherwise
* #type {boolean}
* #const
*/
const HAVE_BLUETOOTH = #HAVE_BLUETOOTH#;
Now the file (called config.js.in) is not on its own valid Javascript; the file gets run through a Makefile which substitutes an appropriate value for #HAVE_BLUETOOTH#.
When I try to run JSdoc on this, it (understandably) balks because of the syntax error in the file.
Is there some way to tell JSDoc to ignore all code in this file but simply take into account the annotations? (I might have to add #name tags to each doclet to completely separate the documentation from the code; that's fine).
Something like:
/** 1 if gnome-bluetooth is available, 0 otherwise
* #name HAVE_BLUETOOTH
* #type {boolean}
* #const
*/
/** #ignore */ // somehow ignore from here onwards
const HAVE_BLUETOOTH = #HAVE_BLUETOOTH#;
/** !#ignore */ // somehow don't ignore from here onwards (although I'd be happy
// to ignore the entire file)
I'd prefer not to modify the code part of the file, if possible (I'm adding documentation to an existing project). For example, I could probably get around it with
const HAVE_BLUETOOTH = parseInt('#HAVE_BLUETOOTH#', 10);
which would make the file have valid JS syntax again so that the parser doesn't complain, but this also means I'm modifying the code of the original file which I want to avoid (I prefer to just add documentation).
cheers
My case is similar because I use JSDoc to comment my .less and .css file. When I running JSDoc on set of file, I have the same issue.
So, I resolve my problem (with JSDoc 3.3.3) with the commentsOnly JSDoc plugin
https://github.com/jsdoc3/jsdoc/blob/master/plugins/commentsOnly.js
I have create this config.json:
{
"source": {
"includePattern": ".+\\.(css|less)?$"
},
"plugins": [
"plugin/commentsOnly"
]
}
with the commentsOnly.js file into a plugin/ directory (consider plugin/ and config.json are in same folder) and in this folder I execute the following CLI command:
jsdoc -c ./config.json ./assets/stylesheets/common.less
And it's work ! There are no reason this do not work with your files.
Hope I help you ;)