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 am unable to build my Create-React-App due to Unexpected '!' in 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax. I want to know why does it happen and how can I fix it?
I am building a React project with React Map GL. Due to the transpiling issue of Mapbox GL version 2.0+ (related here: https://github.com/mapbox/mapbox-gl-js/issues/10173), one of the workarounds suggests that adding a worker-loader to the project.
However, even using the eslint-disable-next-line comment, I am still getting the build error.
Here is the code snipet where I am using the worker-loader
import mapboxgl from 'mapbox-gl';
// eslint-disable-next-line import/no-webpack-loader-syntax
mapboxgl.workerClass =
require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
Here is my eslint config file:
{
"env": {
"browser": true
},
"extends": [
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2020,
"sourceType": "module"
},
"plugins": ["react-hooks", "react", "import"],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"linebreak-style": ["error", "windows"],
"react/prop-types": 0,
"import/no-webpack-loader-syntax": "off"
}
}
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
Im trying to setup unit testing with JEST for React.
My current set up is inside Package.json:
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"moduleFileExtensions": [
"js",
"json",
"jsx"
]
}
And then inside .babelrc I have:
{
"plugins": ["syntax-dynamic-import", "transform-runtime"],
"presets": [
[
"es2015",
{
"modules": false
}
],
"react"
],
"env": {
"test": {
"presets": ["es2015", "react"]
}
}
}
I then run npm test, and it then starts run jest. However, it will error/Fail with :
Test suite failed to run with a error at
componentDidMount=()=>{
| ^
25 | window.addEventListener('scroll', this.handleScroll)
26 | }
This is telling me that while the test enters the correct Component, it eventually stops at some es2015 syntax.
Do I have something set up wrong? It seems that babelrc is NOT actually transpiling before JEST tries to run its test? Is this correct?
My .babelrc is at the root level.
You're missing the transform-class-properties babel plugin. Static class properties are not part of ES2015 and need a separate plugin.
I'm working on a ReactJs project, I am writing code with ES7 in order to write more elegant code inside my React component, specifically static propTypes.
I use Gulp with Babel, ESlint, but I cannot fix a compilation error related to my static propTypes
This is the error message I get
[11:12:34] ESLintError in plugin 'gulp-eslint'
Message:
Parsing error: Unexpected token =
Details:
fileName: [MYFOLDER]/client/components/app/article/asset/index.js
lineNumber: 5
[11:12:36]
[MYFOLDER]/client/components/app/article/asset/index.js
5:19 error Parsing error: Unexpected token =
and it is referred to the line static propTypes = {
import React from 'react';
export default class Asset extends React.Component {
static propTypes = {
articleImageUrl: React.PropTypes.string.isRequired,
};
static defaultProps = {
articleImageUrl: 'https://placeholdit.imgix.net/~text?txtsize=60&txt=640%C3%97480&w=640&h=480'
};
constructor(props) {
super(props);
}
render() {
return (
<div className="article__asset">
<figure>
<img src={this.props.articleImageUrl} />
</figure>
</div>
);
}
}
This is my babel configuration
return browserify({
debug: true,
entries: [`${NPM_DIR}/es5-shim/es5-shim.js`, CLIENT_DIR + '/index.js']
})
.transform(babelify.configure({
sourceMapRelative: CLIENT_DIR,
presets: ['react', 'es2015', 'stage-0'],
plugins: ["transform-object-rest-spread", "transform-decorators-legacy", "transform-class-properties"]
}))
.bundle()
.on('error', function(e){
gutil.log(e);
})
.pipe(source('bundle.js'))
.pipe(rename('bundle.min.js'))
.pipe(gulp.dest(PUBLIC_DIR));
This is my eslint configuration
{
"plugins": [
"react"
],
"extends": ["eslint:recommended", "plugin:react/recommended"],
"ecmaVersion": 7,
"rules": {
// rules
},
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"blockBindings": true
}
}
}
What am I doing wrong? Thanks a lot
Use the babel-eslint parser in your ESLint configuration.
npm install babel-eslint --save
{
"parser": "babel-eslint",
"plugins": ["react"],
...
}