I have this code with template literals inside component and I'm getting parsing error from ESLint. I tried to use #babel/eslint-parser but it doesn't help. Also with this Parsing error: Unexpected token, expected "..." I have '...' expected.ts(1005)
import React from "react";
import { Link } from "react-router-dom";
import logo from "../../images/logo_cl.png";
function Comptetition({ competition }) {
return (
<Link to {`/competitions/${competition.id}`}>
<li className="complist__item">
<img className="complist__item-image" src={logo} alt="item" />
<p className="complist__item-name">{competition.name}</p>
<p className="complist__item-country">{competition.area.name}</p>
</li>
</Link>
);
}
export default Comptetition;
my .eslintrc.json looks like this:
{
"env": {
"browser": true,
"jest": true,
"es6": true,
"node": true
},
"plugins": [
"import",
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"airbnb-base",
"plugin:prettier/recommended"
],
"parser": "#babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"requireConfigFile": false,
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"babelOptions": {
"presets": [
"#babel/preset-react"
]
}
},
"rules": {
"semi": "error",
"no-console": "warn",
"no-eval": "error",
"import/first": "error",
"prefer-template": 1,
"no-param-reassign": [
2,
{
"props": false
}
]
}
}
I've already read lot of info but cannot resolve this error in VScode
From the code it looks like you're looking at the correct line but the wrong place.
You're missing a "=" for value to "to" prop of the Link
<Link to={`/competitions/${competition.id}`}>
You forget to add = in to
to={`/competitions/${competition.id}`}
Related
I am using module import from next.
Trying to import a component like so.
import Navbar from '#/components/Navbar/Navbar';
When I run npm run lint. I get the following error.
1:20 Error: Unable to resolve path to module '#/components/Navbar/Navbar'. import/no-unresolved
This is my jsconfig.json
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"],
"#/components/*": ["components/*"],
"#/pages/*": ["pages/*"],
"#/styles/*": ["styles/*"]
}
}
}
This is eslintrc.json
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11,
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"alias": {
"map": [
["#components", "./components/*"],
["#images", "./public/*"],
["#/pages/*", "pages/*"],
["#/styles/*", "styles/*"]
],
"extensions": [".js", ".jsx"]
}
}
},
"plugins": ["react", "react-hooks", "jest"],
"rules": {
"react/jsx-props-no-spreading": 0,
"react/react-in-jsx-scope": "off",
"import/extensions": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/display-name": 1,
"jest/no-disabled-tests": "warn",
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/prefer-to-have-length": "warn",
"jest/valid-expect": "error",
"import/no-unresolved": [2, { "caseSensitive": false }]
}
}
I have tried many solutions from here and here here. Does not seem to work.
I have the following imports in my file nodejs:
import config from 'config';
import { PassportStatic } from 'passport';
import rootPath from './handlers/rootPath';
import SSOCallback from './handlers/SSOCallback';
import authFailure from './handlers/authFailure';
import ensureAuthenticated from '../modules/auth/ensureAuthenticated';
import APIConnect from './handlers/apiConnect';
import express = require('express');
This is the tslint.json file I am using:
{
"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
}
},
"extends": [
"airbnb-base",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"plugin:react/recommended"
],
"plugins": ["prettier", "jest"],
"rules": {
"no-console": 0,
"no-param-reassign": 0,
"prettier/prettier": "error",
"no-underscore-dangle": [
"error",
{
"allow": ["__get__", "__set__"]
}
],
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
},
"settings": {
"react": {
"version": "detect"
}
}
}
when i run npm run lint command i get the following Error:
8:1 error `express` import should occur before import of `./handlers/rootPath` import/order
i tried to move line 8 before import `./handlers/rootPath, but when i save it automatically git back to line 8.
Any idea how to fix it ?
Airbnb linting rules are removing the closing div tag if the div element is empty eg:
<div></div>
Is replaced by
<div/>
My .eslintrc file is this:
{
"extends": ["airbnb", "plugin:prettier/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"impliedStrict": true,
"jsx": true
}
},
"env": {
"node": true,
"es6": true
},
"plugins": ["react"],
"rules": {
"react/jsx-filename-extension": ["off"],
"react/prefer-stateless-function": ["off"],
"arrow-body-style": ["error", "always"],
"react/self-closing-comp": [
"error",
{
"component": true,
"html": false
}
]
}
}
Set "react/self-closing-comp" to "off".
{
"extends": ["airbnb", "plugin:prettier/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"impliedStrict": true,
"jsx": true
}
},
"env": {
"node": true,
"es6": true
},
"plugins": ["react"],
"rules": {
"react/jsx-filename-extension": ["off"],
"react/prefer-stateless-function": ["off"],
"arrow-body-style": ["error", "always"],
"react/self-closing-comp": "off"
}
}
I know this post is quiet old but for those who need, I have found a solution, which worked for me :
try :
module.exports = {
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended'
],
rules: {
'vue/no-unused-vars': 'error',
'vue/multi-word-component-names': 'off',
'vue/html-self-closing': 'off',
indent: 'off'
}
}
That's how my config file looks like with Vue3, maybe it can help.
This is the config i have for eslint in .eslintrc.json file:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": ["error"],
"indent": 0,
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
},
"settings": {
"react": {
"pragma": "React",
"version": "15.0"
}
}
}
This is the app.jsx from the react workspace below:
import React, { Component } from 'react';
class App extends React.Component {
render () {
return(
<h1>Hello Newbies</h1>
);
}
}
export default App;
I am getting error from eslint 'Component' is defined but never used. I can not fix this by doing anything so far but digging the web. How can i fix this error? Help would be very much appreciated.
Try
class App extends Component {
Option 1:
You don't need to import {Component} since you extends React.component and React is already imported.
Option 2:
You can extend your App with Component instead of React.Component
Just remove "import React, { Component } from 'react';" this line and warning will be resolved as this will be not used in functional based Components.
I've got two variables in my webpack config which are required but are throwing linting errors.
Is there a way add exceptions for a specific variable?
I want to ignore path and persistentPlugins
current .eslintrc file looks as follows:
{
"parser": "babel-eslint",
"env": {
"es6": true,
"browser": true,
"node": true
},
"globals": {
"React": false,
"react": false,
},
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"no-console": 0,
"no-underscore-dangle": 1,
"quotes": [2, "single"],
"react/no-danger": "off",
}
}
Assuming that it's the no-undef rule that's raising the error, specify them as globals:
...
"globals": {
"path": true,
"persistentPlugins": true,
"React": false,
"react": false,
},
...
Alternatively, you could disable the error inline in the webpack config:
/*global path, persistentPlugins*/
For other errors, there is a question here on disabling them inline.