hy, i have problems with with reactjs and react-native pages in vscode.
example = "expected indentation of 10 spaces but found 20".
i installed eslint and prettier and it's didnt
that's my .eslintrc:
{
"env": {
"browser": true,
"es2020": true,
"node": true
},
"extends": [
"plugin:react/recommended",
"airbnb"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"rules": {
"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
"no-tabs": 0,
"react/prop-types": 0,
"react/jsx-indent": [2, "tab"],
"react/jsx-indent-props": [2, "tab"],
}
}
but i think there is a problem in my setting.json
how can i fix it?
Go to "Files" > "Preferences" > "Settings" then search "indent".
Search for "tab size" and make it 4.
Search for "auto indent" and select "full".
I hope this will work for you.
To solve the problem, look at the bottom right side of Vscode and make sure you have Javascript as defined language for the current project or tab. If not, click on what you have there and match it the right programming language to .js file extension. I hope that could help someone.
look at the bottom right of your vscode
Related
My eslint config stopped linting my code, it doesn't show errors or anything, I'm confused is there something wrong with my config? Do I need to add some configs for eslint:recommend for it to work? I just followed the react plugin steps, I appreciate the answers.
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"indent": ["error", 2],
"semi": ["error", "always"],
"max-len": [2, { "code": 80, "tabWidth": 2, "ignoreUrls": true }],
"react/jsx-max-props-per-line": ["error", { "maximum": { "single": 1, "multi": 2 } }],
"react/jsx-first-prop-new-line":"always"
},
"plugins": [
"react"
],
I found the problem...
"react/jsx-first-prop-new-line":"always"
the above line is expecting a number for it to work 0 1 2
"react/jsx-first-prop-new-line": 2
2 Meaning "On" is the correct way to write it
I'm trying to remove unused imports and declarations as answered in this SO thread for Angular. I'm trying to achieve the goal using eslint-plugin-react, but not found any option to remove the unused imports and daclarations from the entire project, with a single command.
Here is my .eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12
},
"plugins": [
"react",
"#typescript-eslint",
"unused-imports"
],
"rules": {
"indent": [
"warn",
"tab"
],
"linebreak-style": [
"warn",
"windows"
],
"quotes": [
"warn",
"double"
],
"semi": [
"warn",
"always"
],
"#typescript-eslint/no-unused-vars": "on",
"unused-imports/no-unused-imports-ts": "on"
}
}
Or is there a way to do the same using ESLint or Typescript Hero extensions in VS Code?
Using unused-imports plugin and unused-imports/no-unused-imports-ts rule, eslint --fix will remove the imports.
Here is an example repo which --fix removes the unused imports.
https://github.com/moshfeu/eslint-ts-unused-imports
Old answer
eslint has a built-in fix option.
eslint ... --fix
If rules contains no-unused-vars, eslint will "fix" the unused import by removing them (along with other auto fixes).
You can also use shortcuts in VSCode, if needs to be done quick and without extra effort:
Option + Shift + O for Mac
Alt + Shift + O for Windows
TL;DR
Use unused-imports/no-unused-imports instead of no-unused-vars, as rule name.
If you're using the ESLint version, eslint-plugin-unused-imports, you may want to change the rule name to unused-imports/no-unused-imports instead of the blanket no-unused-vars.
{
"rules": {
"unused-imports/no-unused-imports": "error"
}
}
Refer to the author's GitHub for detailed usage.
For me, no-unused-var does not come with an auto fixer (it'll merely mentioned then number of errors/warnings but when I switch to unused-imports/no-unused-imports, all of the issues are automagically fixed.
Add this to your VS Code settings.json:
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true,
"source.sortMembers": true
}
Everytime you save a file it'll automatically remove the unused imports. It's a good method of house keeping for future edits but won't help existing unused imports, unless you go to those files directly.
Solution originally posted by Damir Drempetić here: https://dev.to/bornfightcompany/easily-sort-imports-and-remove-unused-declarations-on-each-save-in-vs-code-35k1
Edit: This is an ESlint problem. I've included my ESLint setup at the end of this post.
I'm fairly new to TypeScript -- I have been refactoring someone else's React code, moving it to TypeScript for a work project when I ran into this line
const memoryOptionsResponse = window.webchatMethods.getMemory(chatId);
TypeScript complains about 'window.webchat', saying
Property 'X' does not exist on 'Window & typeof globalThis
After some googling, the answer would seem to be to put this at the root level of the module
declare global {
interface Window {
webchatMethods:any;
}
}
However now TS complains with the following error.
This Stack Overflow page suggests something similar, but again it has declare global and ESLint balks.
After half an hour trying to fix this, I've decided to turn to you for advice -- if anyone knows a good solution, I'd appreciate it!
// .eslintconfig
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"extends": [
"eslint:recommended",
"prettier",
"plugin:react/recommended"
],
"plugins": [
"prettier",
"react",
"react-hooks"
],
"env": {
"es6": true,
"node": true,
"mocha": true,
"browser": true
},
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/prop-types": 1,
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/no-unescaped-entities": "warn",
"react/no-find-dom-node": 0,
"comma-dangle": ["error", "never"],
"global-require": 0
}
}
// .eslintignore
test
node_modules
It looks like what's missing is the piece that tells babel how to deal with typescript. I would check out typescript-eslint.
Recently I updated my react project using "create-react-app" (React 16.9)
Everything worked just OK before the update, but suddenly I get following ESLint error: (In the output tab)
[Error - 16:42:12]
Failed to load plugin 'react' declared in 'client\.eslintrc': Cannot find module 'eslint-plugin-react'
Require stack:
- C:\Or\Web\VisualizationTool\VisualizationTool\__placeholder__.js
Referenced from: C:\Or\Web\VisualizationTool\VisualizationTool\client\.eslintrc
Happened while validating C:\Or\Web\VisualizationTool\VisualizationTool\client\src\hoc\Layout\Layout.jsx
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-react' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-react' isn't installed correctly.
My .eslintrc file:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": [
"react-app",
"eslint:recommended",
"plugin:react/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"settings": {
"react": {
"pragma": "React",
"version": "16.8"
}
},
"plugins": [
"react"
],
"rules": {
"quotes": [
"error",
"single",
{
"allowTemplateLiterals": true
}
],
"semi": "off",
"default-case": [
"error",
{
"commentPattern": "^no default$"
}
],
"no-new-wrappers": 0,
"no-mixed-operators": 0,
"require-atomic-updates": "off",
"comma-dangle": "off",
"no-unused-vars": "off",
"no-useless-constructor": 0,
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/no-unescaped-entities": 0,
"react/display-name": 0,
"jsx-a11y/href-no-hash": "off",
"jsx-a11y/anchor-is-valid": "off",
"no-useless-escape": 0,
"no-console": 0,
"no-debugger": 0,
"no-empty": 0,
"linebreak-style": 0,
"import/first": 0,
"import/imports-first": 0,
"no-shadow": 0,
"disable-next-line": 0,
"no-case-declarations": 0,
}
}
I have both ESLint and eslint-plugin-react installed both globally and locally, anything else I am missing here?
I had the same problem in VS code. Add the following settings in VS code ESLint settings:
{
"eslint.workingDirectories": [
"Dir1",
"Dir2"
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
]
}
Note: Dir1 and Dir2 are two directories with their respective .eslintrc files.
npm install eslint-plugin-react#latest --save-dev
Thanks! I had the same problem, installing this worked for me
I also had a similar error (I can't be sure the reason was the same but this is how I found the issue).
So make sure the Path of the Require Stack (in the error) doesn't point outside your project directory.
So you have a root directory of your project (where you have the node_modules folder and such). In the terminal $ cd .. (go to the folder that holds your project) and there do this:
$ ls -a
If you see a file called .eslintrc.js, then remove it ($ rm .eslintr.js). Then just reload your project and the problem (at least in my case) will be gone.
Try to check your ESLint plugin Working directories given that you have a new one for your project with the create-react-app update. Had the same issue and I fixed mine by checking my working directories in the ESLint plugin settings.
Found it.
1. Keep only the "eslint:recommended" in the "extends" section. Remove all others.
2. Removed the "plugins" section.
3. Restart the VSCode.
4. Works like a charm!
My updated .eslintrc file looks like this:
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"commonjs": true,
"node": true,
"es6": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"settings": {
"react": {
"pragma": "React",
"version": "16.9"
}
},
"rules": {
"quotes": [
"error",
"single",
{
"allowTemplateLiterals": true
}
],
"semi": 0,
"default-case": [
"error",
{
"commentPattern": "^no default$"
}
],
"react/jsx-uses-vars": 0,
"react/react-in-jsx-scope": 0,
"no-new-wrappers": 0,
"no-mixed-operators": 0,
"require-atomic-updates": "off",
"comma-dangle": "off",
"no-unused-vars": "off",
"no-useless-constructor": 0,
"react/no-unescaped-entities": 0,
"react/display-name": 0,
"jsx-a11y/href-no-hash": "off",
"jsx-a11y/anchor-is-valid": "off",
"no-useless-escape": 0,
"no-console": 0,
"no-debugger": 0,
"no-empty": 0,
"linebreak-style": 0,
"import/first": 0,
"import/imports-first": 0,
"no-shadow": 0,
"disable-next-line": 0,
"no-case-declarations": 0,
}
}
I came across this style guide and trying to adopt some of its rules.
The first rule mentioned about
Only include one React component per file. However, multiple
Stateless, or Pure, Components are allowed per file. eslint:
react/no-multi-comp.
So in my .eslintrc
{
"parser": "babel-eslint",
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"no-set-state": "off"
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"globals": {
"localStorage": true,
"fetch": true
},
"settings": {
"react": {
"pragma": "React",
"version": "16.4.1"
}
}
}
I added this to rules
"rules": {
"no-set-state": "off",
"react/no-multi-comp": [true, { "ignoreStateless": true }]
},
Am I doing this correctly? Because when i read the docs, I saw a <enabled> I have no idea what that means.
<enabled> looks for value one of the 0,1,2 or one of the off,warn,error meaning:
From the docs:
"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when
triggered)
Using Visual Studio Code, and installing the ESLint plugin, you should be able to look under Output > ESLint
That the <enabled> is looking for 0, 1, or 2.
Change accordingly.