I have the following imports in my file:
import axios from "axios";
import lodash from "lodash";
import PropTypes from "prop-types";
import React from "react";
import renderInCustomHtmlTag from "react-render-custom-html-tag";
I am using v5.9.0 however for some reason I am getting an error for line 3 even though it appears to be alphabetical order.
My eslint is as follows:
{
"env": {
"browser": true,
"commonjs": true,
"es6" : true,
"jquery": true,
"node": true
},
"extends": [
"eslint:all",
"plugin:react/recommended"
],
"globals": {
"$cgx": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"import",
"jsx-a11y",
"react"
],
"rules": {
"indent": ["error", 2],
"max-len": [
"error",
{
"code": 120
}
]
}
}
The issue is probably the capital letters. It seems to be because they have a lower ASCII value A = 65, a = 97.
https://eslint.org/docs/2.0.0/rules/sort-imports
Related
I am getting following when running eslint in a Gatsby project
Oops! Something went wrong! :(
ESLint: 7.32.0
[ProjectNotFoundError: File '/home/path_to_project/somefile.ts' doesn't match any project] {
name: 'ProjectNotFoundError',
message: "File '/home/path_to_project/somefile.ts' doesn't match any project"
}
My .eslintrc
{
"extends": [
"react-app",
"plugin:jsx-a11y/recommended",
"prettier",
"plugin:tailwindcss/recommended"
// "airbnb"
],
"plugins": ["jsx-a11y"],
"rules": {
"no-restricted-imports": [
"error",
{
"patterns": ["#/features/*/*"]
}
],
"tailwindcss/classnames-order": "error",
"tailwindcss/no-custom-classname": "error"
},
"settings": {
"tailwindcss": {
"groupByResponsive": true
}
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"processor": "#graphql-eslint/graphql",
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended"
],
"env": {
"es6": true
}
},
{
"files": ["*.graphql"],
"parser": "#graphql-eslint/eslint-plugin",
"plugins": ["#graphql-eslint"],
"rules": {
"#graphql-eslint/no-anonymous-operations": "error",
"#graphql-eslint/naming-convention": [
"error",
{
"OperationDefinition": {
"style": "PascalCase",
"forbiddenPrefixes": ["Query", "Mutation", "Subscription", "Get"],
"forbiddenSuffixes": ["Query", "Mutation", "Subscription"]
}
}
]
}
}
]
}
.eslintignore
node_modules/
.cache/
public/
.idea/
yarn-error.log
.yarn/
Commenting out the following section in .eslintrc fix the issue, but I want to keep that section, things used to work fine with that section before. No clue what's wrong, since the error message provided by ESLint is pretty vague.
{
"files": ["*.ts", "*.tsx"],
"processor": "#graphql-eslint/graphql",
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended"
],
"env": {
"es6": true
}
},
Update
Problem seems to be due to following, since commenting it out fix the error.
"processor": "#graphql-eslint/graphql",
I was earlier using Gatsby's GraphQL Typegen disabled due to it buggy nature (rebuild loop and .cache errors) by commenting out graphql.config.js and removing graphqlTypegen: true, from gatsby-config.ts
According to graphql-eslint
If you are defining GraphQL schema or GraphQL operations in code files, you'll want to define an additional override to extend the functionality of this plugin to the schema and operations in those files.
{
"overrides": [
+ {
+ "files": ["*.js"],
+ "processor": "#graphql-eslint/graphql"
+ },
...
}
It seems, disabling GraphQL Typegen result in mentioned error in "processor": "#graphql-eslint/graphql" of eslint override.
I'm trying to use absolute path import form my custom modules and VSCode has no prob recognising them. The problem is that when I run firebase deploy which runs first eslint I get errors.
3:24 error Unable to resolve path to module '#src/stripe/lib/secret-key' import/no-unresolved
I have tried to set this
"import/resolver": {
"typescript": {}
}
in the eslintrc.js but I just get more and more errors. I have also tried to install some plugins but no luck.
Here is the line which throws the error.
import { stripe } from '#src/stripe/lib/secret-key'
tsconfig
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"target": "es2017",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"#src/*": [
"./src/*"
]
}
},
"compileOnSave": true,
"include": [
"src"
]
}
eslintrc.js
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: [
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
],
parser: "#typescript-eslint/parser",
parserOptions: {
project: "tsconfig.json",
sourceType: "module",
},
plugins: [
"#typescript-eslint",
"import",
],
rules: {
"#typescript-eslint/adjacent-overload-signatures": "error",
"#typescript-eslint/no-empty-function": "error",
"#typescript-eslint/no-empty-interface": "warn",
"#typescript-eslint/no-floating-promises": "error",
"#typescript-eslint/no-namespace": "error",
"#typescript-eslint/no-unnecessary-type-assertion": "error",
"#typescript-eslint/prefer-for-of": "warn",
"#typescript-eslint/triple-slash-reference": "error",
"#typescript-eslint/unified-signatures": "warn",
"constructor-super": "error",
eqeqeq: ["warn", "always"],
"import/no-deprecated": "warn",
"import/no-extraneous-dependencies": "error",
"import/no-unassigned-import": "warn",
"no-cond-assign": "error",
"no-duplicate-case": "error",
"no-duplicate-imports": "error",
"no-empty": [
"error",
{
allowEmptyCatch: true,
},
],
"no-invalid-this": "error",
"no-new-wrappers": "error",
"no-param-reassign": "error",
"no-redeclare": "error",
"no-sequences": "error",
"no-shadow": [
"error",
{
hoist: "all",
},
],
"no-throw-literal": "error",
"no-unsafe-finally": "error",
"no-unused-labels": "error",
"no-var": "warn",
"no-void": "error",
"prefer-const": "warn",
},
settings: {
jsdoc: {
tagNamePreference: {
returns: "return",
},
},
},
};
Any idea how to make this work?
I cannot make a config to override the main configuration of the eslint.js
.eslintrc
module.exports = {
"root": true,
"env": {
"node": true,
"browser": true,
},
"globals": {},
"parserOptions": {
"ecmaVersion": 5,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
},
},
"extends": ["myplugin"],
"rules": {
"prettier/prettier": ["error"],
},
}
eslint-config-myplugin
module.exports = {
"parserOptions": {
"ecmaVersion": 6,
}
}
i get this error:
0:0 error Parsing error: sourceType 'module' is not supported when ecmaVersion < 2015. Consider adding { ecmaVersion: 2015 } to the parser options
✖ 1 problem (1 error, 0 warnings)
That’s the way it is designed to work, set the parser option to what you need it to be in .eslintrc
im using airbnb-eslint along with babel-plugin-module-resolver. I get this error in every js file where i've used an alias to import.
{
"extends": ["plugin:import/errors", "plugin:import/warnings", "airbnb", "airbnb/hooks", "prettier", "plugin:prettier/recommended", "prettier/react", "plugin:react/recommended"],
"plugins": ["import", "react", "jsx-a11y", "react-hooks", "babel", "module-resolver"],
"rules": {
"react/jsx-filename-extension": [
2,
{
"extensions": [".js", ".jsx"]
}
],
"react/prop-types": 0,
"implicit-arrow-linebreak": 0,
"prefer-destructuring": 1,
"react/no-unused-state": 1,
"react/destructuring-assignment": 1,
"react/no-array-index-key": 1,
"react/jsx-key": [2],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/jsx-no-duplicate-props": [2],
"react/jsx-uses-vars": [2],
"react/jsx-uses-react": [2],
"react/jsx-no-undef": ["error", { "allowGlobals": true}],
"react/no-direct-mutation-state": [2],
"react/require-optimization": [1],
"react/require-render-return": [2],
"jsx-a11y/img-has-alt": [0],
"jsx-a11y/img-redundant-alt": [2],
"no-nested-ternary": "off",
"no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
"no-underscore-dangle": ["error", { "allowAfterThis": true }],
"no-unused-expressions": ["error", {
"allowShortCircuit": true,
"allowTernary": true,
"allowTaggedTemplates": true
}],
"no-use-before-define": [
"error",
{ "functions": true, "classes": true, "variables": false }
],
"import/imports-first": ["error", "absolute-first"],
"import/no-unresolved": 0,
"import/newline-after-import": "error",
"import/prefer-default-export": 0,
"import/no-cycle": [2, { "maxDepth": 1, "ignoreExternal": true }],
"import/no-absolute-path": [2, { "esmodule": false, "commonjs": false, "amd": false }],
"prettier/prettier": ["error", {}, {
"usePrettierrc": true
}],
"quotes": [
"error",
"single",
{ "avoidEscape": true, "allowTemplateLiterals": false }
],
"max-len": ["error", {"code": 205, "ignoreUrls": true}],
"no-tabs": ["error", {"allowIndentationTabs": true}],
"babel/arrow-parens": [0, "as-needed"],
"babel/no-unused-expressions": 1,
"babel/valid-typeof": 1,
"module-resolver/use-alias": 2
},
"globals": {
"window": true,
"document": true,
"localStorage": true,
"FormData": true,
"FileReader": true,
"Blob": true,
"navigator": true
},
"env": {
"es2020": true,
"node": true,
"browser": true
},
"settings": {
"react": {
"version": "16.13.1"
},
"import/resolver": {
"babel-module": {
"root": ["."],
"alias": {
"#assets": "./src/assets",
"#config": "./src/config",
"#constants": "./src/constants",
"#hooks": "./src/hooks",
"#sharedComponents": "./src/sharedComponents",
"#commonActions": "./src/app/CommonActions",
"#pages":"./src/app/Pages",
"#utils": "./src/utils"
}
},
"node": {
"root": ["."],
"extensions": [
".js",
".jsx"
]
}
}
},
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
}
}
This error does not come when using on mac..... only when using Linux/Windows. Due to this error eslint stops working in VSCode.
Error: ESLINT Error: ESLint configuration in .........eslintrc is invalid: - Unexpected top-level property "import/extensions".
Try adding root: true, as this will stop eslint looking for Global configs outside of your project
I have file of types:
// #flow
export type RouteT = {
api: string,
method: string,
route: string
}
And estlint throwing error 'RouteT' is not defined.eslint(no-undef).
What is wrong?
My eslint config is:
{
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:flowtype/recommended"
],
"plugins": [
"prefer-arrow",
"flowtype"
],
"env": {
"es6": true,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"classes": true
},
"sourceType": "module"
},
"rules": {
"flowtype/define-flow-type": 0,
"quotes": [
"error",
"single",
{
"allowTemplateLiterals": true
}
],
"eol-last": [
"error",
"always"
],
"prefer-const": "error",
"prefer-arrow-callback": 1,
"comma-dangle": [
"error",
"always-multiline"
],
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
],
"no-else-return": "error",
"no-tabs": 0,
"no-var": "error",
"radix": "error",
"no-multiple-empty-lines": "error",
"brace-style": [
"error",
"1tbs"
],
"no-multi-spaces": [
"error"
],
"semi": [
"error",
"never"
],
"space-before-function-paren": [
"error",
{
"anonymous": "always",
"named": "always",
"asyncArrow": "always"
}
],
"no-console": 0
},
"globals": {
"logMsg": true
}
}
I don't understand what is wrong. Other types like string, number works correctly.
How can I fix it?
Thank you.