Related
This is the error I am receiving when yarn deploying. Cant seem to figure out what happened. I deployed 5 minutes before this without any issues.
Error: Command failed with exit code 1: node_modules/.bin/next build
warn - The `target` config is deprecated and will be removed in a future version.
See more info here https://nextjs.org/docs/messages/deprecated-target-config
Failed to compile.
./components/layout/Header.tsx
66:117 Error: Insert `⏎··········` prettier/prettier
67:1 Error: Delete `··` prettier/prettier
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info - Loaded env from /Users/coreykaminski/VCXNFT-1/landing-page/.env.local
info - Checking validity of types...
error Command failed with exit code 1.
This is the eslintrc.js
plugins: ["#typescript-eslint"],
extends: ["standard", "plugin:prettier/recommended", "plugin:node/recommended"],
parser: "#typescript-eslint/parser",
parserOptions: {
ecmaVersion: 12,
},
rules: {
"max-len": ["error", { code: 160, ignoreUrls: true }],
"node/no-unsupported-features/es-syntax": ["error", { ignores: ["modules"] }],
"prettier/prettier": [
"error",
{
endOfLine: "auto",
},
],
},
};
this is the json
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
"plugins": ["#typescript-eslint", "react"],
"rules": {
"prettier/prettier": ["error", {}, { "usePrettierrc": true }],
npx prettier --write ./components/layout/Header.tsx
or disable prettier eslint.
"prettier/prettier": [
0,
{
endOfLine: "auto",
},
],
I'm trying to create a rule to have a one empty line between internal and external imports.
.eslintrc.json:
{
"parser": "#typescript-eslint/parser",
"env": {
"es6": true,
"node": true,
"jest/globals": true,
"browser": true
},
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2019,
"project": "tsconfig.json",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"import/order": [
"error",
{
"groups": [["builtin", "external"]],
"newlines-between": "always"
}
]
}
}
I have the following error:
Compiled with problems:X
ERROR
ESLint configuration in .eslintrc.json is invalid:
- Unexpected top-level property "import/order".
I modified an existing project with a similar eslint config to use your rule. It is working nicely. I have a suspicion your issue is that you don't have an extends property that includes the import rules. Here's my eslint config:
module.exports = {
root: true,
env: {
node: true,
},
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:#typescript-eslint/eslint-recommended',
'plugin:#typescript-eslint/recommended',
'plugin:import/warnings', // <--- note this inclusion here
],
rules: {
'import/order': [
'error',
{
groups: [['builtin', 'external']],
'newlines-between': 'always',
},
],
},
};
When I run the linter, I get the expected error you want:
13:1 error There should be at least one empty line between import groups import/order
I would try playing with your extends property. I have some stuff in there you may not need at all, and I dont have the jsx stuff for this particular project, but hopefully this will get you started.
Install this dependency: eslint-import-resolver-typescript
# npm
npm i -D eslint-plugin-import #typescript-eslint/parser eslint-import-resolver-typescript
# yarn
yarn add -D eslint-plugin-import #typescript-eslint/parser eslint-import-resolver-typescript
And add import to your plugins :
"plugins": ["import"],
eslint-import-resolver-typescript
I use ESLint in all of my TypeScript projects with the following settings:
"extends": ["airbnb", "prettier", 'plugin:vue/recommended'],
"plugins": ["prettier"],
"parserOptions": {
"parser": "#typescript-eslint/parser",
"ecmaVersion": 2018,
"sourceType": "module"
},
a bunch of custom rules. I've also installed the following dependencies for TypeScript support:
"#typescript-eslint/eslint-plugin": "^1.7.0",
"#typescript-eslint/parser": "^1.7.0",
However, one of ESLint's most useful rules, https://eslint.org/docs/rules/no-unused-vars, seems to be very poorly configured for TypeScript projects. For example, when I export an enum, the rule warns me that the enum isn't in use in the file where it is declared:
export enum Foo {
Bar,
}
Similarly, when I import an interface or class to be used as a type, 'no-unused-vars' will complain again on the the line of the actual import:
In Foo.ts
export interface Foo {
bar: string;
}
In bar.ts
import { Foo } from './Foo'
const bar: Foo = { bar: 'Hello' };
Is there any way to configure the no-unused-vars rule to take these two cases into account? I'm not a fan of disabling the rule, as it is one of the most helpful rules in my entire ruleset outside of these cases.
I've already downgraded the rule to only give a warning instead of an error, but having all my documents filled with warnings still kind of defeats the purpose of using esLint.
Filling my all my documents with //eslint-disable-line as suggested here also seems like a bad solution.
I think the use of "plugin:#typescript-eslint/eslint-recommended" introduces bunch of unwanted rules. One is probably better off using "#typescript-eslint/no-unused-vars" ESLint rule instead.
{
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint",
],
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
],
"rules": {
"no-unused-vars": "off",
"#typescript-eslint/no-unused-vars": ["error"]
}
}
Note: be sure to restart your server after making the above change.
Reference - https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md
It's a bit buried in the documentation, but if you add some things to the 'extends' property, you can use both the rules recommended by ESLint like no-unused-vars, and have it actually work in Typescript. Like so:
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
#typescript-eslint/recommended seems to be the thing that allows eslint:recommended to deal with Typescript constructs effectively. Not sure how it would affect your other extensions though.
I got lot of false errors with latest TypeScript/ES-Lint versions and I found that they came up with an experimental rule to fix the no-unused-vars which is broken and with the experimental rule #typescript-eslint/no-unused-vars-experimental it finally works as I expect it to.
Prior to the change on my side, I had multiple false errors when using interfaces/types saying that these vars were unused (which of course they'll never be used since they're not variables but rather interfaces/types)... and in case you're curious about the code itself, here is the PR adding this experimental rule which is how I found the rule.
Here's a subset of my updated .eslintrc file
{
"parser": "#typescript-eslint/parser",
"extends": [
"plugin:#typescript-eslint/recommended"
],
"rules": {
"#typescript-eslint/no-unused-vars": "off",
"#typescript-eslint/no-unused-vars-experimental": "error",
"no-unused-vars": "off"
}
}
and I'm now finally back to normal :)
EDIT (Jan. 2021)
As mentioned by Brad (a maintainer of the project) in the comment below, this is (was) a temporary solution and is now deprecated. From his comment (below), we can now use directly #typescript-eslint/no-unused-vars for the same intended behavior. Thanks to Brad for the info. I can also confirm that switching back to #typescript-eslint/no-unused-vars now works for me (I updated my code and it's all good now).
This is not the way to go, and you should avoid it. #typescript-eslint/no-unused-vars-experimental is deprecated, and will be removed in the next major. Update to the latest version of the tooling and just use #typescript-eslint/no-unused-vars. Source: I am the maintainer of the project.
UPDATED ANSWER since Jan. 2021
So here's the latest update of my .eslintrc file which works for me :)
{
"parser": "#typescript-eslint/parser",
"extends": [
"plugin:#typescript-eslint/recommended"
],
"rules": {
"#typescript-eslint/no-unused-vars": "error",
"no-unused-vars": "off"
}
}
My issue was with using decorators and wanting to have a variable with an appropriate name for clarity, for example:
#OneToMany((type) => Employee) instead of #OneToMany(() => Employee)
The usual solution for TypeScript is to prefix with an underscore:
#OneToMany((_type) => Employee)
And it's possible to make ESLint accept the same:
.eslintrc.js
module.exports = {
...
rules: {
'#typescript-eslint/no-unused-vars': ['warn', { 'argsIgnorePattern': '^_' }]
....
},
};
You have parser nested inside of parserOptions. It should be a sibling, like this:
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
As for no-unused-vars, I'm afraid this is an ongoing bug with #typescript-eslint:
https://github.com/typescript-eslint/typescript-eslint/issues/363
Upgrading #typescript-eslint/eslint-plugin and #typescript-eslint/parser from 3.x to the latest 4.x resolved the issue for me.
For anyone looking to get no-unused-vars working properly in TypeScript when using YAML configuration, e.g. .eslintrc.yaml, it looks like this:
rules:
"#typescript-eslint/no-unused-vars":
- warn
- argsIgnorePattern: "^_" # <-- NOTE!
varsIgnorePattern: "^_"
caughtErrorsIgnorePattern: "^_"
no-unused-vars: # disabled but see typescript-eslint/no-unused-vars
- off
...
Also for me works rule /eslint no-unused-vars: ["error", { "varsIgnorePattern": "[iI]gnored" }]/
You can add it like this in your .eslintrc.json file (this one is for ignoring all Strings which start with Capital letter)
"rules": {
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "^[A-Z]"
}
],
}
For more information, and properties you can check this link.
After couple of year still getting the same error. It's frustrate to try and check why it's not working. After trying lot of possible configuration here is the finally working for me. Incase someone had difficulties like me !
eslintrc.js
module.exports = {
env: {
browser: true,
node: true,
},
parser: "#typescript-eslint/parser",
extends: [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"prettier",
"plugin:prettier/recommended",
"plugin:#typescript-eslint/recommended",
],
parserOptions: {
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
project: "tsconfig.eslint.json",
tsconfigRootDir: __dirname,
sourceType: "module", // Allows for the use of imports
},
plugins: ["#typescript-eslint", "#typescript-eslint/tslint", "import", "unused-imports"],
rules: {
"#typescript-eslint/no-unused-vars": "off",
"#typescript-eslint/no-unused-vars-experimental": "error",
"no-unused-vars": "off",
"import/order": "error",
"no-console": ["warn", { allow: ["warn", "error"] }],
eqeqeq: ["error", "always"],
"no-else-return": "error",
},
settings: {
"import/resolver": {
node: {
extensions: [".js", ".jsx", ".ts", ".tsx"],
moduleDirectory: ["node_modules", "src/"],
},
},
},
};
I use this configuration and it works normally
{
"env": {
"browser": true,
"es2021": true,
"node": true,
"jest": true
},
"extends": ["airbnb-base", "prettier"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["#typescript-eslint", "jest"],
"rules": {
"import/extensions": "off",
"#typescript-eslint/no-unused-vars": ["error"]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
in react 17 is not necessarily use
import React from 'react';
but if i don't have it, so eslint gave me error
'React' must be in scope when using JSX react/react-in-jsx-scope
any idea how modify .eslintrc.js
module.exports = {
parser: "babel-eslint",
env: {
browser: true,
node: true,
es6: true,
jest: true,
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended"
],
plugins: [
"react",
"react-hooks",
"jsx-a11y",
],
rules: {
strict: 0,
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
},
settings: {
react: {
version: "detect"
}
}
}
for react 17?
Thank's a lot
You can read about it in React docs.
If you are using eslint-plugin-react, the react/jsx-uses-react and react/react-in-jsx-scope rules are no longer necessary and can be turned off or removed.
{
// ...
"rules": {
// ...
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
}
react-in-jsx-scope on github.
To make it work, you should add those rules to your eslint config, see Extending or replacing the default ESLint config for Create-React-App specifics, every framework should have related section in their docs.
You need to add plugin:react/jsx-runtime to extends in the .eslintrc.js file.
like is:
module.exports = {
extends: [
'plugin:react/recommended',
'airbnb',
'plugin:react/jsx-runtime',
]
}
Refer here
I've setup eslint & eslint-plugin-react.
When I run ESLint, the linter returns no-unused-vars errors for each React component.
I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?
Example:
app.js
import React, { Component } from 'react';
import Header from './header.js';
export default class App extends Component {
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
}
Linter Errors:
/my_project/src/components/app.js
1:8 error 'React' is defined but never used no-unused-vars
2:8 error 'Header' is defined but never used no-unused-vars
Here is my .eslintrc.json file:
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
First, install the following module npm install --save-dev eslint-plugin-react.
Then, in your .eslintrc.json, under extends, include the following plugin:
'extends': [
'plugin:react/recommended'
]
Source
To solve this only problem without adding new rules from react/recommended install eslint-plugin-react:
npm install eslint-plugin-react --save-dev
add in .eslintrc.js:
"plugins": ["react"]
and:
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
Since I found this while googling, you should know that this simple rule is enough to prevent this message:
react/jsx-uses-react
The react/recommended set of rules adds many other rules you may not want.
Quickest fix
To ignore all TitleCase variables, add this to your ESLint config:
{
"rules": {
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "React"
}
]
]
}
Correct fix
Use eslint-plugin-react to ignore React variables.
npm install eslint-plugin-react -D
Add this to your ESLint config:
{
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error"
}
}
Suggested fix
Use eslint-plugin-react to improve your JSX usage, not just to silence this error.
npm install eslint-plugin-react -D
Add this to your ESLint config:
{
"extends": [
"plugin:react/recommended"
]
}
If you use XO, refer to eslint-config-xo-react.
In my case I needed to add in your .eslintrc.js:
'extends': [
'plugin:react/recommended'
]
plus a specific tweaking to rid of preact import: import { h } from 'preact' but you can use this example to get rid of your specific warnings like so:
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "^h$"
}
],
2022
If you're using ESLint with more configurations, be careful about the order of extends property array.
{
extends: [
'eslint:recommended',
'plugin:react/jsx-runtime',
'plugin:react/recommended',
'plugin:prettier/recommended',
'prettier',
],
plugins: ['react'],
//...
}
For example, make sure that you place 'plugin:react/recommended' after any other react configuration. Place 'react' as a plugin as well, and if you're using prettier make sure that you're following a proper configuration.
you can do it in .eslintrc.js
"rules": {
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": "error"
}
I have the same error as well as I started to learn React yesterday. The terminal show the error and it is pretty straightforward to ignore the unused variable error.
Error from the terminal:
Line 5:17: 'setBlog' is assigned a value but never used no-unused-vars
Search for the keywords to learn more about each warning.
Just add // eslint-disable-next-line this line before the variable which you have the error of unused variable. Like,
// eslint-disable-next-line
const [blogs, setBlog] = useState(... my code)
in eslintrc.js
adding following will solve the error
plugins: [
'react/recommended',
],
rules: {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
},
1st install npm
npm install --save-dev eslint-plugin-react
In Package.json replace eslintConfig declaration
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"plugin":"react/recommended",
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
},
If you create the project throught create-react-app CLI,You can npm run eject,and edit the package.json "eslintConfig" field,like this:
`"eslintConfig": {
"extends": "react-app",
"rules": {
"eqeqeq": "off",
"no-unused-vars": "off",
}
},`
the eslint will be closed
if you are using Create-react-app, there is no need to install anything or Eject, the simple solution is:
since the no-unused-vars-errors is thrown from webpackHotDevClient.js, you just need to go to /node_modules/react-scripts/config/webpack.config.dev.js.
on "new ESLintPlugin" rules just add :
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-unused-vars': 0
According to Official Docs of Eslint have you tried this
/* eslint no-unused-vars : "off" */
add this line as it is inside anywhere in your code. Hopefully you warning may go away and it may help you