First things first, I have some basics but I don't consider myself as a developer at all :p
Here's my problem: I cloned a repo ( this one ) in order to work on a brand new portfolio and test the whole enchilada, but i ran into some errors, as I'm not familiar at all with the eslint setup.
After cloning the repo, I try to gatsby develop and I ran into a few error messages like this one:
Generating development JavaScript bundle failed
/home/asus/code/chrisnopa/gatsby-projects/portf-boilerplate/src/hoc/withProvider.js
4:25 error Missing file extension for "store/createStore" import/extensions
✖ 1 problem (1 error, 0 warnings)
File: src/hoc/withProvider.js
Here's the content of my .eslintrc file :
"parser": "babel-eslint",
"env": {
"browser": true,
"jest": true,
"es6": true,
"node": true
},
"extends": [
"airbnb",
"prettier"
],
"plugins": [
"prettier"
],
"globals": {
"graphql": true
},
"rules": {
"react/jsx-filename-extension": 0,
"react/require-default-props": 0,
"react/jsx-one-expression-per-line": 0,
"arrow-body-style": 0,
"import/no-unresolved": 0,
"prettier/prettier": ["error", {
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}]
}
}
I added this line to the part "Rules" : "import/extensions": [".js", ".jsx", ".json", ".ts", ".tsx"]
and it fixed everything except for one error. Here is the message in my console :
Generating development JavaScript bundle failed
.eslintrc:
Configuration for rule "import/extensions" is invalid:
Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '".js"').
File: src/pages/index.js
failed Building development bundle - 4.029s
Any idea on what I am doing wrong here, and on how to fix this would be much appreciated!
Updated eslint-plugin-import to v2.11.0 (or above)
Related
How do you turn off an eslint rule, for example no-inferrable-types which comes from the extension "eslint:recommended"?
For example if my .eslintrc.json contains:
"extends": [
"eslint:recommended",
.....
"#typescript-eslint/no-inferrable-types": [
"error",
{
"ignoreParameters": false,
"ignoreProperties": false
}
],
Set the value to "off" , as described here:
https://eslint.org/docs/latest/user-guide/configuring/rules
For example:
"#typescript-eslint/no-inferrable-types": "off",
First of all, some facts:
Node.js requires that all local imports include the imported module's extension (e.g. import hello from './hello.js', not import hello from './hello').
TypeScript will compile imports with or without the .js extension, which means a missing .js extension is a runtime error.
TypeScript doesn't transform imports to add the .js extension or convert .ts to .js.
In my Node.js project, I want to make missing a missing .js extension be a build-time error using the import/extensions ESLint rule. However, when I enable this rule using the following configuration:
{
"root": true,
"env": {
"node": true
},
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"settings": {
"import/resolver": {
"typescript": {},
"node": {
"extensions": [".js"]
}
}
},
"rules": {
"import/extensions": ["error", "ignorePackages"]
}
}
running eslint gives me the following error:
/sandbox/src/index.ts
1:19 error Missing file extension "ts" for "./hello.js" import/extensions
Source files:
// index.ts
import hello from "./hello.js";
hello();
// hello.ts
export default function hello() {
console.log("Hello");
}
CodeSandbox link: https://codesandbox.io/s/elated-germain-13glp7
I fixed this with the following config:
{
"root": true,
"env": {
"node": true
},
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"rules": {
"import/extensions": ["error", "ignorePackages"],
"import/no-unresolved": "off"
}
}
The main thing is to disable the "import/no-unresolved" rule and remove "settings"."import/resolver"."node". ("import/no-unresolved" is redundant as unresolved imports are resolved at the compilation stage.) Other items removed here were already being added as a result of extending the #typescript-eslint plugins.
I found an eslint plugin that can fix missing .js extensions for imports in .ts files, instead of just showing an error:
https://github.com/AlexSergey/eslint-plugin-file-extension-in-import-ts
https://www.npmjs.com/package/eslint-plugin-file-extension-in-import-ts
Install:
npm i -D eslint-plugin-file-extension-in-import-ts
Add to .eslintrc file:
{
"plugins": [
"file-extension-in-import-ts"
],
"rules": {
"file-extension-in-import-ts/file-extension-in-import-ts": "error"
}
}
NOTE: I ran into an issue similar to https://github.com/import-js/eslint-plugin-import/issues/1292 when using this package, and it will incorrectly try to add .js extensions on these paths when fixing automatically.
You could try ts-add-js-extension package to append .js extension to the transpiled JavaScript files. After you install you can do
ts-add-js-extension add --dir={your-transpiled-outdir}
I installed ESLint and set these settings in setting.json but EsLint does not start properly globally for VS Code.
Invalid Options: - Unknown options: envs, globals, parserOptions, rules
- 'envs' has been removed. Please use the 'overrideConfig.env' option instead.
- 'globals' has been removed. Please use the 'overrideConfig.globals' option instead.
- 'parserOptions' has been removed. Please use the 'overrideConfig.parserOptions' option instead.
- 'rules' has been removed. Please use the 'overrideConfig.rules' option instead.
These are my settings:
"eslint.options": {
"envs": [
"es6",
"browser",
"node",
"mocha"
],
"globals": [
"expect"
],
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": "error",
"curly": "error",
"quotes": [
"warn",
"single"
],
"no-undef": "error"
}
},
In case you are still looking for an answer, I just had the same issue.. You need to wrap your eslint options into an overrideConfig object. In this case the aimed object in the error message overrideConfig.(...) will be provided correctly.
Similar issue here
I'm trying to turn off lint warning for my eslint at VS code.
My code is contains.
console.log('blabla..');
eslint said as below.
error Unexpected console statement no-console
Even though already add no-restricted-syntax at my .eslintrc.json, no fixed.
Here is my .eslintrc.json
{
"env": {
"es6": true,
"node": true,
"amd": true,
"mocha": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module"
},
"rules": {
"linebreak-style": [
"error",
"windows"
],
"no-restricted-syntax": [
"error",
{
"selector": "CallExpression[callee.object.name='console'][callee.property.name=/^(log|warn|error|info|trace)$/]",
"message": "Unexpected property on console object was called"
}
]
}
}
What did I mistake?
Allowing the console.log to stay in code is requiring a separate rule.
You need to add 'no-console' statement to your eslint config rules.
Like so:
rules: {
"no-console": 0
}
A better practice is to warn you about all the console.log in your code, like so:
rules: {
"no-console": 1
}
I followed the advice of Elad and went into the package.json to add the rule of "no-console": 0 and at first it didn't seem like it worked but this is because I needed to restart the development server. If it seems like it's not working, make sure you restart the development server because if you change anything in the package-json, you have to restart your server.
You can add // eslint-disable-line if you need to ignore a specific (or multiple) line
This was my process
Install node.js/npm https://www.npmjs.com/get-npm
Install eslint npm i -g eslint
Go to Tools -> Options -> HTML/JS -> ESLint
Set ESLint path to C:\Program Files\nodejs
Set Conf path to Z:.eslintrc.json
There are no Action Items for ESLint, however when I run it from the command line, I get errors for the file.
I configured in this way in ubuntu 16.04 and Netbeans 8.2
After follow your steps
I searched where was installed my eslint (at my case at /usr/bin/eslint)
You need a config eslint file (I create one at my home folder a file .eslintrc.json)
{
"env": {
"browser": true,
"node": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
3
],
"linebreak-style": [
"error",
"unix"
],
"no-console": "off",
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
My config in netbeans is like this:
And when you check the code is (when you move the mouse over the red segment it shows the errors):
Hope this help you
Greetings