Develop Reference

eslint no-use-before-define rules does not work in node.js

I use node.js 12.3.0 and i had installed eslint 7.0.0 by npm.
So i wrote the .eslintrc.js like below.
module.exports = {
"env": {
"commonjs": true,
"es6": true,
"node": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
"semi": ["error", "always", {"omitLastInOneLineBlock": true }],
"no-shadow-restricted-names" : "error",
"no-unused-vars": ["warn", { "vars": "all" }],
"no-redeclare": ["error", { "builtinGlobals": true }],
"no-use-before-define": ["error", { "functions": true, "classes": true, "variables": true }]
}
};
As you know, i already added "no-use-before-define" but it didn't work.
All another eslint rules are worked fine but only "no-use-before-define" didn't check anythings.
Here is my examples js file.
let c = qwertqwert(); //As you know qwerqwert is not defined. I want to check this.
a = 123123; //I don't want to allow assign any value to variable before declaration.
b = asdfafasfdasdfas; //Also i need to check any undefined variable or functions are used.
Does "no-use-before-define" can check this?
It seems only can check when i use the variable or function before define or declaration.
Func(); //I use(call) first.
//But the define statement is after.
function Func()
{
return 10;
}
Above code had checked fine by eslint but it is meaningless.
Because i want let eslint to check usage of undefined functions or value.

if you define eslint should show the error you should write a rule like
if you don't want rule you can remove it or skip rule by file
"no-use-before-define": [
"error",
{
"functions": false,
"classes": false,
"variables": false
}
],
NOTE :- i am using extension of airbnb
extends: [
'airbnb-base',
],
it works for me
node js :- 14.17.6
eslint :- 7.12.1+
and if function is not defined then it shows

ESLint: Only declares and type imports are allowed inside declare module

I tried adding this to my interfaces.ts file but ESLint isn't having it:
declare module 'react' {
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
// extends React's HTMLAttributes
name?: string;
ref?: HTMLAnchorElement;
cssClass?: string;
}
}
ESLint Parsing error: `Only declares and type imports are allowed
I get this same error with this piece of code that lives in images.d.ts where it's not liking the const keyword:
declare module '*.png' {
const value: any;
export = value;
}
Does everyone just put this kind of code to custom .d.ts files and tell eslint to ignore it?
inside declare module`
.eslintrc
{
"extends": [
"airbnb",
"eslint:recommended",
"plugin:react/recommended",
"plugin:import/errors"
],
"plugins": ["react"],
"parser": "babel-eslint",
"parserOptions": {"ecmaFeatures": {"jsx": true}},
"env": {"mocha": true},
"rules": {"comma-dangle": 0,
"max-classes-per-file": [0],
"jsx-a11y/href-no-hash": [0],
"complexity": ["error", {"max": 6}],
"handle-callback-err": "error",
"import/default": [0],
"import/order": [0],
"max-statements": ["error", 30],
"no-console": [0],
"no-constant-condition": "error",
"no-param-reassign": ["error", {"props": false}],
"no-process-exit": "error",
"no-useless-call": "error",
"react/no-danger": [0],
"react/jsx-indent-props": [0],
"react/jsx-filename-extension": [1, {"extensions": [".tsx"]}],
"react/jsx-indent": [0],
"react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }],
"react/jsx-sort-props": ["error", {"ignoreCase": false, "noSortAlphabetically": false}],
"react/prefer-stateless-function": [0, { "ignorePureComponents": true }],
"react/no-multi-comp": [0, { "ignoreStateless": true }],
"react/require-optimization": [0],
"react/prop-types": [0],
"react/no-array-index-key": [1],
"semi": ["error", "always"],
"import/no-extraneous-dependencies": [0],
"react/destructuring-assignment": [0],
"react/jsx-closing-bracket-location": [1, "after-props"],
"jsx-one-expression-per-line": [0],
"import/extensions": [0],
"import/no-unresolved": [0],
"no-multiple-empty-lines": [0],
"one-var": [0],
"max-len": ["error", { "code": 140 }],
"implicit-arrow-linebreak": [0],
"no-shadow": [0],
"function-paren-newline": [0],
"no-tabs": [0],
"indent": [1, "tab"],
"no-use-before-define": [0],
"no-nested-ternary": [1],
"no-restricted-syntax": [1],
"no-plusplus": [1],
"react/no-find-dom-node": [1]
}
}

There are 2 ways you can solve this
ESLint thinks of .d.ts files as .js
Add them to your .eslintignore file which will fix the issue for you :)
/**/*.d.ts
Add this package yarn add --dev #typescript-eslint/parser
Reference: GitHub Link
And add to your .eslintrc
module.exports = {
...
parserOptions: {
parser: "#typescript-eslint/parser"
},

ESLint throwing no-unused-expressions with `obj?.fn()` optional chaining

Why is eslint throwing on inputRef.current?.focus()? Am I using optional chaining wrong?
Expected an assignment or function call and instead saw an expression. eslint no-unused-expressions
Here are my configs (first is in my workspace's package, the second is in my workspace's root):
{
"env": {
"es6": true,
"shared-node-browser": true
},
"extends": [
"universe/native",
"eslint:recommended"
],
"plugins": [
"#typescript-eslint"
],
"rules": {
"require-atomic-updates": 0
}
}
{
"root": true,
"parser": "#typescript-eslint/parser",
"parserOptions": {
// Required for certain syntax usages
"ecmaVersion": 2017
},
"env": {
"es6": true,
"node": true,
"jest": true
},
"extends": [
"plugin:prettier/recommended"
],
"plugins": [
"prettier",
"#typescript-eslint",
"promise",
"babel"
],
"rules": {
"prettier/prettier": "error",
// Warn against shorthand type conversions
"no-implicit-coercion": 1,
// Require using Error objects as Promise rejection reasons
"prefer-promise-reject-errors": 2,
// Enforce “for” loop update clause moving the counter in the right direction
"for-direction": 2,
// Enforce return statements in getters
"getter-return": 2,
// Disallow await inside of loops
"no-await-in-loop": 2,
// Disallow comparing against -0
"no-compare-neg-zero": 2,
// Warn against catch clause parameters from shadowing variables in the outer scope
"no-catch-shadow": 1,
// Disallow identifiers from shadowing restricted names
"no-shadow-restricted-names": 2,
// Enforce return statements in callbacks of array methods
"callback-return": 2,
// Require error handling in callbacks
"handle-callback-err": 2,
// Warn against string concatenation with __dirname and __filename
"no-path-concat": 1,
// Prefer using arrow functions for callbacks
"prefer-arrow-callback": 1,
// Return inside each then() to create readable and reusable Promise chains.
// Forces developers to return console logs and http calls in promises.
"promise/always-return": 2,
//Enforces the use of catch() on un-returned promises
"promise/catch-or-return": 2,
// Warn against nested then() or catch() statements
"promise/no-nesting": 1
}
}

eslint Parse errors in imported module for images

I'm currently working with a React Project and I typically add images I use for components in this way:
import CartImage from '../../images/icon_cart.png';
All is well and the image loads up properly in my app. Unfortunately the are some linting errors and warnings that I get:
Parse errors in imported module '../../images/icon_cart.png':
Unexpected character '�' (1:1) import/namespace
Parse errors in imported module '../../images/icon_cart.png':
Unexpected character '�' (1:1) import/default
Parse errors in imported module '../../images/icon_cart.png':
Unexpected character '�' (1:1) import/import/no-named-as-default
Parse errors in imported module '../../images/icon_cart.png':
Unexpected character '�' (1:1) import/no-named-as-default-member
This happens to all files where I import an image. Below is my .eslintrc:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings"
],
"plugins": [
"react"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"jquery": true,
"mocha": true
},
"rules": {
"quotes": 0,
"no-console": 1,
"no-debugger": 1,
"no-var": 1,
"semi": [1, "always"],
"no-trailing-spaces": 0,
"eol-last": 0,
"no-unused-vars": 0,
"no-underscore-dangle": 0,
"no-alert": 0,
"no-lone-blocks": 0,
"jsx-quotes": 1,
"import/no-unresolved": "off",
"react/display-name": [ 1, {"ignoreTranspilerName": false }],
"react/forbid-prop-types": [1, {"forbid": ["any"]}],
"react/jsx-boolean-value": 1,
"react/jsx-closing-bracket-location": 0,
"react/jsx-curly-spacing": 1,
"react/jsx-indent-props": 0,
"react/jsx-key": 1,
"react/jsx-max-props-per-line": 0,
"react/jsx-no-bind": 1,
"react/jsx-no-duplicate-props": 1,
"react/jsx-no-literals": 0,
"react/jsx-no-undef": 1,
"react/jsx-pascal-case": 1,
"react/jsx-sort-prop-types": 0,
"react/jsx-sort-props": 0,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/no-danger": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-direct-mutation-state": 1,
"react/no-multi-comp": 1,
"react/no-set-state": 0,
"react/no-unknown-property": 1,
"react/prefer-es6-class": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"react/require-extension": "off",
"react/self-closing-comp": 1,
"react/sort-comp": 1,
"react/wrap-multilines": "off"
},
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
}
}
}
I then tried adding the following settings to my .eslintrc file:
"import/ignore": [
".(png)"
]
The error for the images went away but now I keep getting errors for most of my javascript files similar to below:
1:8 No default export found in module import/default
For example, all my files with this:
import webpack from ‘webpack’;
Now gets the no default export found in module error.
Anything else wrong with my eslint configuration?

You have to make the parser ignore the folder that contains your images or gifs.
In my case I added to my eslintrc the following properties:
ignorePatterns: [
'node_modules/',
'src/serviceWorker.ts',
'template/src/serviceWorker.ts',
'src/assets/statics/'
],

ESLint: First instance of let results in "unexpected token" error [duplicate]

This question already has an answer here:
Eslint, how to accept const and arrow function in Javascript?
(1 answer)
Closed 6 years ago.
My javascript:
let foo = 'bar'
Why does ESLint respond with the following?
~/index.js
1:5 error Parsing error: Unexpected token foo
✖ 1 problem (1 error, 0 warnings)
It seems like no matter where in the script, the first instance of using let to set a variable gets this error. Why??
My .eslintrc file:
module.exports = {
"env": {
"node": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
};

The answers about let being forbidden in the global scope are wrong. That's fine.
The problem is that you need to let eslint know you're using es6 features.
Do that by adding an "es6": true line to the env block in your config:
.eslintrc.js
module.exports = {
"env": {
"node": true,
"es6": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
};
That fixes your particular error, but you'll soon see errors about unused names. Below is the minimum source code I could find that will pass your eslint settings:
let.js
let foo = 'bar'
function main() {
foo
}
main()

Variables declared with let are not accessible before they are declared in their enclosing block - so the first element will be undefined until the closing block is hit. If you are you defining foo in the global namespace, you will always get this error with using let in a loop.