I am having the following eslintrc.js:
module.exports = {
extends: ['airbnb-typescript/base'],
parserOptions: {
project: './tsconfig.json',
sourceType: 'module',
},
ignorePatterns: ['*.js'],
rules: {
'no-underscore-dangle': 0,
...
}
};
And I'd like to include some exceptions with allow: [ /** */ ]. But each time when I am adding this as a key: value property in my file, ESLint returns me an error with the following text: unable to use allow on top level. So the question is, how to achieve such results, with allow?
Long story short, I am unable to use my set of rules with MongoDB _id naming, so I have ESLint just to ignore only _id in variable naming, instead of disabling the naming-convention rule itself.
Is there any way to solve this problem?
It works for me:
"no-underscore-dangle": ["error", { allow: ["_id"] }]
If you are using the #typescript-eslint/naming-convention rule, you may also need to add this:
"#typescript-eslint/naming-convention": [
"error",
{
selector: ["variable"],
format: ["strictCamelCase", "PascalCase", "UPPER_CASE"],
filter: {
regex: "^_id$",
match: false,
},
},
],
I’m receiving the following errors when running yarn eslint:
/…/src/a.js
4:1 error Expected indentation of 1 tab but found 2 spaces indent
4:43 error Strings must use singlequote quotes
5:1 error Expected indentation of 2 tabs but found 4 spaces indent
6:1 error Expected indentation of 1 tab but found 2 spaces indent
6:6 error Strings must use singlequote quotes
✖ 5 problems (5 errors, 0 warnings)
5 errors and 0 warnings potentially fixable with the `--fix` option.
This is my .eslintrc.js file:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
],
parserOptions: {
ecmaFeatures: { jsx: true },
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react'],
settings: {
react: { version: 'detect' },
},
rules: {
indent: [
'error',
'tab'
],
'linebreak-style': [
'error',
'unix',
],
quotes: [
'error',
'single'
],
semi: [
'error',
'always'
]
}
};
… and the file in question:
import React from "react";
import { css } from "./a.css";
export function App() {
\treturn (
\t\t<div className={css.App}>
\t\t\tHello.
\t\t</div>
\t);
}
Note: I include \t here to denote tabs as Stack Overflow replaces actual tabs with 4 spaces.
None of the errors reported by eslint are actual errors in the file. All indents are correct, and I only use single quotes. Hell, there isn’t even a line 43 in that file, as eslint is reporting.
What might be happening here?
indent: [
'error',
'tab'
],
quotes: [
'error',
'single'
],
This rule in you eslint tell that you shall not use space but a tab Key for indentation either remove this rule OR on the lines where the INDENT error has occured you shall find space used for indentation remove them and use the Tab key
Also for the Quote Error check you variable for the string values saved using single quote, if you are using vscode then you might need to remove this rule or update the vscode setting and prevent it from updating the single quote to double quote while auto saving
facepalm.
This ended up being a problem with an aspect of the project I didn’t mention. I’m using Rollup to bundle by code, along with the #rollup/plugin-eslint plugin to run eslint when building. I had my plugins in this order:
plugins: [
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
}),
resolve({
browser: true,
}),
eslint({
include: '**/*.js',
throwOnError: true,
}),
styles({
modules: true,
}),
]
I just had to move the eslint() plugin to the front of the array and all was golden.
plugins: [
eslint({
include: '**/*.js',
throwOnError: true,
}),
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
}),
resolve({
browser: true,
}),
styles({
modules: true,
}),
]
The context is pretty big project built with ReactJs, based on eslint rules, with this eslint configuration
const DONT_WARN_CI = process.env.NODE_ENV === 'production' ? 0 : 1
module.exports = {
extends: [
'eslint:recommended',
'plugin:jsx-a11y/recommended',
'plugin:react/recommended',
'prettier',
'prettier/#typescript-eslint'
],
plugins: [
'react',
'html',
'json',
'prettier',
'import',
'jsx-a11y',
'jest',
'#typescript-eslint',
'cypress'
],
settings: {
'html/indent': '0',
es6: true,
react: {
version: '16.5'
},
propWrapperFunctions: ['forbidExtraProps'],
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx']
},
alias: {
extensions: ['.js', '.jsx', '.json']
}
}
},
env: {
browser: true,
node: true,
es6: true,
jest: true,
'cypress/globals': true
},
globals: {
React: true,
google: true,
mount: true,
mountWithRouter: true,
shallow: true,
shallowWithRouter: true,
context: true,
expect: true,
jsdom: true
},
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'es2020',
ecmaFeatures: {
globalReturn: true,
jsx: true
},
lib: ['ES2020']
},
rules: {
'arrow-parens': ['error', 'as-needed'],
'comma-dangle': ['error', 'never'],
eqeqeq: ['error', 'smart'],
'import/first': 0,
'import/named': 'error',
'import/no-deprecated': process.env.NODE_ENV === 'production' ? 0 : 1,
'import/no-unresolved': ['error', { commonjs: true }],
'jsx-a11y/alt-text': DONT_WARN_CI,
'jsx-a11y/anchor-has-content': DONT_WARN_CI,
'jsx-a11y/anchor-is-valid': DONT_WARN_CI,
'jsx-a11y/click-events-have-key-events': DONT_WARN_CI,
'jsx-a11y/heading-has-content': DONT_WARN_CI,
'jsx-a11y/iframe-has-title': DONT_WARN_CI,
'jsx-a11y/label-has-associated-control': [
'error',
{
controlComponents: ['select']
}
],
'jsx-a11y/label-has-for': [
'error',
{
required: {
some: ['nesting', 'id']
}
}
],
'jsx-a11y/media-has-caption': DONT_WARN_CI,
'jsx-a11y/mouse-events-have-key-events': DONT_WARN_CI,
'jsx-a11y/no-autofocus': DONT_WARN_CI,
'jsx-a11y/no-onchange': 0,
'jsx-a11y/no-noninteractive-element-interactions': DONT_WARN_CI,
'jsx-a11y/no-static-element-interactions': DONT_WARN_CI,
'jsx-a11y/no-noninteractive-tabindex': DONT_WARN_CI,
'jsx-a11y/tabindex-no-positive': DONT_WARN_CI,
'no-console': 'warn',
'no-debugger': 'warn',
'no-mixed-operators': 0,
'no-redeclare': 'off',
'no-restricted-globals': [
'error',
'addEventListener',
'blur',
'close',
'closed',
'confirm',
'defaultStatus',
'defaultstatus',
'event',
'external',
'find',
'focus',
'frameElement',
'frames',
'history',
'innerHeight',
'innerWidth',
'length',
'localStorage',
'location',
'locationbar',
'menubar',
'moveBy',
'moveTo',
'name',
'onblur',
'onerror',
'onfocus',
'onload',
'onresize',
'onunload',
'open',
'opener',
'opera',
'outerHeight',
'outerWidth',
'pageXOffset',
'pageYOffset',
'parent',
'print',
'removeEventListener',
'resizeBy',
'resizeTo',
'screen',
'screenLeft',
'screenTop',
'screenX',
'screenY',
'scroll',
'scrollbars',
'scrollBy',
'scrollTo',
'scrollX',
'scrollY',
'self',
'status',
'statusbar',
'stop',
'toolbar',
'top'
],
'no-restricted-modules': ['error', 'chai'],
'no-unused-vars': [
'error',
{
varsIgnorePattern: '^_',
argsIgnorePattern: '^_'
}
],
'no-var': 'error',
'one-var': ['error', { initialized: 'never' }],
'prefer-const': [
'error',
{
destructuring: 'any'
}
],
'prettier/prettier': 'error',
'react/jsx-curly-brace-presence': [
'error',
{ children: 'ignore', props: 'never' }
],
'react/jsx-no-bind': [
'error',
{
allowArrowFunctions: true
}
],
'react/jsx-no-literals': 1,
'react/jsx-no-target-blank': DONT_WARN_CI,
'react/jsx-no-undef': ['error', { allowGlobals: true }],
'react/no-deprecated': DONT_WARN_CI,
'react/prop-types': 0,
'require-await': 'error',
'space-before-function-paren': 0
},
overrides: [
{
files: ['**/*.ts', '**/*.tsx'],
rules: {
'no-unused-vars': 'off',
'import/no-unresolved': 'off'
}
}
]
}
Since the upgrade of the library "#typescript-eslint/parser": "^4.0.0" from "#typescript-eslint/parser": "^3.10.1" this following command ...
eslint --fix --ext .js,.jsx,.json,.ts,.tsx . && stylelint --fix '**/*.scss'
... brings these following errors
9:45 error 'ScrollBehavior' is not defined no-undef
224:12 error 'KeyboardEventInit' is not defined no-undef
53:5 error 'JSX' is not defined no-undef
I know I could fix them adding to the prop globals also the keys JSX: true or KeyboardEventInit: true but it is not the way I want to go.
Any ideas of what is going on here? Where is the configuration error?
Thanks a lot
I had the same issue when trying to declare variables as of type JSX.Element in typescript. I added "JSX":"readonly" to globals in .eslintrc.json and the problem was gone. In your case it would be:
globals: {
React: true,
google: true,
mount: true,
mountWithRouter: true,
shallow: true,
shallowWithRouter: true,
context: true,
expect: true,
jsdom: true,
JSX: true,
},
From the following link, I got that you actually use several options after JSX. You could use true,false, writable or readonly (but not off).
https://eslint.org/docs/user-guide/configuring
Official answer is here and it says indeed to add them to globals or to disable the no-undef rule because TypeScript already has already its own checks:
I get errors from the no-undef rule about global variables not being defined, even though there are no TypeScript errors
The no-undef lint rule does not use TypeScript to determine the
global variables that exist - instead, it relies upon ESLint's
configuration.
We strongly recommend that you do not use the no-undef lint rule on
TypeScript projects. The checks it provides are already provided by
TypeScript without the need for configuration - TypeScript just does
this significantly better.
As of our v4.0.0 release, this also applies to types. If you use
global types from a 3rd party package (i.e. anything from an #types
package), then you will have to configure ESLint appropriately to
define these global types. For example; the JSX namespace from
#types/react is a global 3rd party type that you must define in your
ESLint config.
Note, that for a mixed project including JavaScript and TypeScript,
the no-undef rule (like any role) can be turned off for TypeScript
files alone by adding an overrides section to .eslintrc.json:
"overrides": [
{
"files": ["*.ts"],
"rules": {
"no-undef": "off"
}
}
]
If you choose to leave on the ESLint no-undef lint rule, you can
manually define the set of allowed globals in your ESLint
config,
and/or you can use one of the pre-defined environment (env)
configurations.
From the typescript-eslint troubleshooting guide:
We strongly recommend that you do not use the no-undef lint rule on TypeScript projects. The checks it provides are already provided by TypeScript without the need for configuration - TypeScript just does this significantly better.
In your .eslintrc.js, turn the rule off for TypeScript files using overrides:
module.exports = {
root: true,
extends: '#react-native-community',
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
rules: {
'no-shadow': 'off',
'#typescript-eslint/no-shadow': ['error'],
},
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'no-undef': 'off',
},
},
],
};
Working in electron vue-cli project. Trying to upgrade eslint but the default setup has no-use-before-define enabled.
This causes it to catch every use of things like window.process.env.username as an error.
I tried setting my rules as "no-use-before-define": ["error", { "variables": false }], but it didn't help. Adding window as a global also didn't help. Is there a way to fix eslint to be happy with the window variable?
I do like the idea of this feature, so I would like to leave it on if possible. But just turning it off is ok too if that's the best answer.
If it helps, this is my current .eslintrc.js file
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// Don't error on variables that are global, like window, not working.
"no-use-before-define": ["error", { "variables": false }],
'generator-star-spacing': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
"normal": "any",
"component": "always"
},
"svg": "always",
"math": "always"
}]
}
}
Thanks
-Edit
Tried
globals: {
window: 'writable'
},
But to no effect