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/'
],
Related
I would like the end result of my imports to be like this, via a tool that can automatically format my code onSave:
import { Stack, StackProps, Duration, Resource } from "aws-cdk-lib";
import { LambdaStack } from "./lambda-Stack";
import { Construct } from "constructs";
How can I align all of the "from" statements vertically in VS Code? I've looked at both prettier and eslint.
Prettier doesn't care what you want. :-) It's an opinionated tool useful for applying consistency to code within teams (and for avoiding arguments about different formatting styles [although you just get arguments about whether to use Prettier instead]).
If you don't want Prettier's formatting, don't use Prettier. There are other code formatters, some of which offer more control than Prettier does.
You could tell Prettier to ignore each of those import statements:
// prettier-ignore
import { Stack, StackProps, Duration, Resource } from "aws-cdk-lib";
// prettier-ignore
import { LambdaStack } from "./lambda-Stack";
// prettier-ignore
import { Construct } from "constructs";
or
/* prettier-ignore*/ import { Stack, StackProps, Duration, Resource } from "aws-cdk-lib";
/* prettier-ignore*/ import { LambdaStack } from "./lambda-Stack";
/* prettier-ignore*/ import { Construct } from "constructs";
For now there's no "block ignore" in Prettier for JavaScript (only for certain select other languages), although there's an open request for one.
Usually, with prettier or eslint you might want to limit printWidth to defined number of caracter per line. So imagine if you have many imports or long module name :
/* You better should break line overhere |----------| */
import { DepA, DepB, DepC, DepD, DepE, DepF, DepG, DepH, DepI, DepJ } from "./some-long-named-module";
import { OnlyOneImport } from "./other-module";
So my answer is not responding to "how can you align 'from' statements?" but it
may open another question 'should you ?'
Here is a common way to indent imports :
// common way to write import with vertical (Automatable)
import {
DepA,
DepB,
DepC,
DepD,
DepE,
DepF,
DepG,
DepH,
DepI,
DepJ
} from "./some-long-named-module";
import { OnlyOneImport } from "./other-module";
Here is the eslint rule to auto indent your code : https://eslint.org/docs/latest/rules/object-curly-newline
example for object-curly-newline rule in eslint:
# .estlintrc.json
{
...
"rules": {
...
"object-curly-newline": [
"error",
{
"consistent": true,
"multiline": true
}
]
}
}
PS:
Here some example of how I use it
# .estlintrc.json
{
"root": true,
"extends": [
"airbnb-base", // See https://www.npmjs.com/package/eslint-config-airbnb
"airbnb-base/whitespace",
"plugin:jest/recommended", // See https://www.npmjs.com/package/eslint-plugin-jest
"prettier" // See https://github.com/prettier/eslint-config-prettier
],
"env": {
"jest/globals": true
},
"plugins": [
"jest",
"...whatever-you-want"
],
"ignorePatterns": [
"dist/",
"node_modules/",
"...whatever-you-want"
],
"rules": {
"no-restricted-syntax": [
"error",
"WithStatement",
"BinaryExpression[operator='in']"
],
"no-console": [
0,
{
"allow": [
"info",
"warn",
"error"
]
}
],
"quotes": [
"error",
"single",
"avoid-escape"
],
"object-curly-newline": [
"error",
{
"consistent": true,
"multiline": true
}
],
"...whatever-you-want"
}
}
# .prettierrc
{
"printWidth": 80,
"trailingComma": "es5",
"useTabs": false,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"bracketSpacing": true,
"bracketSameLine": false,
"proseWrap": "preserve",
"arrowParens": "avoid",
"endOfLine": "lf",
"parser": "babel"
}
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
I am facing this error when I 'npm start' my project:
I already know the problem is in the .eslintrc file so I added this:
"rules": {
"quotes": [2, "single"],
}
and it's not working and it's the only solution I know
Update:
I tried deleting eslintConfig from package.json and it didn't work
and also "quotes": ["error", "single"] didn't work
You can try to turn the rule off by passing 0 in the .eslintrc config file:
{
"rules": {
"quotes": [0, "single"]
}
}
Based on the heading the solution is just to add a rule to allow single quotes. Refer below config, checkout rules object:
module.exports = {
env: {
browser: true,
es2020: true,
},
extends: ["eslint:recommended", "plugin:#typescript-eslint/recommended"],
parser: "#typescript-eslint/parser",
parserOptions: {
ecmaVersion: 11,
sourceType: "module",
},
plugins: ["#typescript-eslint", "prettier"],
rules: {
"prettier/prettier": [
1,
{
trailingComma: "es5",
//to enable single quotes
singleQuote: true,
semi: true,
},
],
...require("eslint-config-prettier").rules,
...require("eslint-config-prettier/#typescript-eslint").rules,
},
};
Try this out. If it doesn't work then share a bit more about the problem. May be write a small code try to replicate the issue and then share it here.
I hope this will help you out.
Cheers :)
Run eslint with the —fix flag and the problem will go away
I think you want to disable "quote" and "prettier/prettier" rules.
Please you can pass 0 to disable a rule.
{
"rules": {
"quotes": 0,
"prettier/prettier": 0
}
}
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"
},
$("#ID").hide();
i add ESLint to my project .
everything is fine, except symbol $.
i get error: [eslint] '$' is not defined. (no-undef)
my .eslintrc.json (note: it has additional rules set to disallow jquery functions when there's an equivalent javascript one):
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"sourceType": "module"
},
"plugins": [
"dollar-sign",
"jquery"
],
"rules": {
"indent": [
"error" ,
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
],
"jquery/no-ajax": 2,
"jquery/no-animate": 2,
"jquery/no-attr": 2,
"jquery/no-bind": 2,
"jquery/no-class": 2,
"jquery/no-clone": 2,
"jquery/no-closest": 2,
"jquery/no-css": 2,
"jquery/no-data": 2,
"jquery/no-deferred": 2,
"jquery/no-delegate": 2,
"jquery/no-each": 2,
"jquery/no-fade": 2,
"jquery/no-filter": 2,
"jquery/no-find": 2,
"jquery/no-global-eval": 2,
"jquery/no-has": 2,
"jquery/no-hide": 2,
"jquery/no-html": 2,
"jquery/no-in-array": 2,
"jquery/no-is": 2,
"jquery/no-map": 2,
"jquery/no-merge": 2,
"jquery/no-param": 2,
"jquery/no-parent": 2,
"jquery/no-parents": 2,
"jquery/no-parse-html": 2,
"jquery/no-prop": 2,
"jquery/no-proxy": 2,
"jquery/no-serialize": 2,
"jquery/no-show": 2,
"jquery/no-sizzle": 2,
"jquery/no-slide": 2,
"jquery/no-text": 2,
"jquery/no-toggle": 2,
"jquery/no-trigger": 2,
"jquery/no-trim": 2,
"jquery/no-val": 2,
"jquery/no-wrap": 2,
"dollar-sign/dollar-sign": [
2,
"ignoreProperties"
]
}
you can see that I have added two plugins: eslint-plugin-dollar-sign and eslint-plugin-jquery.
why does not work this rule ?
"dollar-sign/dollar-sign": [
2,
"ignoreProperties"
]
You are missing
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jquery": true
},
$ is not declared as a global without jquery environment enabled. Because of that, you are getting a no-undef error, saying that you are using variable that haven't been declared.
https://eslint.org/docs/user-guide/configuring#specifying-environments
You can specify environments using a comment inside of your JavaScript file, use the following format:
Add the line below as a comment at the beginning of your JavaScript file.
/* eslint-env jquery */
The eslinter will stop throwing undefined on '$' because it will know you are working with jQuery.
You can also add this line to the top of your js file:
/* global $ */
To prevent warning over "$", or for any other global like "varName":
/* global varName */
In .eslintrc.js
Add
{
"globals": {
"$": true
}
}
See https://eslint.org/docs/user-guide/configuring#specifying-globals
"env": {
....
"jquery": true
},
is really help.