VSCode removing React from imports on save - visual-studio-code

after switching to vscode 1.68.1
every time on saving the file its automatically removing the React from the import
at first i though this could be an eslint issue as i am using eslint for formatting but after removing eslint plugin issue remains the same
here is my settings.json
{
"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
"files.eol": "\r\n",
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"prettier.arrowParens": "avoid",
"prettier.embeddedLanguageFormatting": "off",
"prettier.enable": false,
"eslint.format.enable": false,
"[css]": {
"editor.defaultFormatter": "aeschli.vscode-css-formatter"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}
and here is the .eslintrc
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "airbnb",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react", "react-hooks"
],
"rules": {
"linebreak-style": ["error", "windows"],
"react/forbid-prop-types": 0,
"react/prop-types": 0,
"max-len": ["error", { "code": 220 }]
},
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src/"]
}
}
}
};

Try adding these rules in eslintrc:
{
"rules": {
"react/jsx-uses-react": 0,
"react/react-in-jsx-scope": 0
}
}
OR
Try adding "jsx": "react" to your jsconfig:
{
"compilerOptions": {
"baseUrl": ".",
"jsx": "react",
"paths": {
"*": ["*", "src/*"]
}
}
}
This helps VS-Code understand that React is implicitly referenced by the jsx elements in your file.
I had the same problem in multiple projects, after adding these rules, solves the problem for me.

VS Code expects that every project declares a tsconfig.json or jsconfig.json and if none is provided, it defaults it to
{
"compilerOptions": {
"jsx": "react"
}
}
This effectively means that if you have React imports in your code, they will be preserved.
To adopt the latest react 17+ standard with the _jsx transform, the environment type needs to be react-jsx.
{
"compilerOptions": {
"jsx": "react-jsx"
}
}

{
// ...
"rules": {
// ...
"react/jsx-uses-react": "on",
"react/react-in-jsx-scope": "on"
}
}
Add these rules to your eslint config

add type on your tsx file, to prevent removed automatically by vscode
import React from 'react';
type _react = typeof React
.eslint
{
rules: {
'react/jsx-uses-react': 0, // ignore validation must include react scope in jsx/tsx
'react/react-in-jsx-scope': 0, // ignore validation must include react scope in jsx/tsx
'no-unused-vars': 'off', // disable default eslint unused variable
'#typescript-eslint/no-unused-vars': [ // ignore validation variable with prefix _
'warn',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_'
}
]
}
}

I also had the same problem, when removing the extensions I found it was vscode, downgrading to version 1.67.2 solved it

Try removing the "source.organizeImports": true line from your settings, or setting it to false.
I think VS Code thinks the React import is unnecessary because its only used implicitly (which can be a problem if your compiler requires an explicit import to bundle correctly).

Related

VSCode ESLint Prettier formatOnSave being undone

I'm was trying to resolve some cross-platform issues in our linting (in my case a line-ending issue between Windows and IOs platforms).
Line ending problem is resolved (had to do with a files.eol setting) but when I save my file, some linting is getting reverted, like so
below are my workspace and linting config. What is fighting back at me here?
.eslintrc.js
module.exports = {
root: true,
extends: '#react-native-community',
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint', 'unused-imports'],
overrides: [
{
files: ['*.ts', '*.tsx', '*.js'],
rules: {
'prettier/prettier': [
'error',
{
endOfLine: 'auto',
},
],
'#typescript-eslint/no-shadow': ['error'],
'no-shadow': 'off',
'no-undef': 'off',
'no-console': 'warn',
'#typescript-eslint/no-unused-vars': 'off',
'react/no-unstable-nested-components': ['warn', {allowAsProps: true}],
'unused-imports/no-unused-imports': 'error',
'unused-imports/no-unused-vars': [
'warn',
{
vars: 'all',
varsIgnorePattern: '^_',
args: 'after-used',
argsIgnorePattern: '^_',
},
],
},
},
],
};
.prettierrc.js
module.exports = {
bracketSpacing: false,
bracketSameLine: true,
singleQuote: true,
trailingComma: "all",
arrowParens: "avoid",
};
myproject.code-workspace
{
"folders": [
{
"path": "."
}
],
"settings": {
"compilerOptions": {
"baseUrl": "",
"paths": {
"lib/*": ["src/lib/*"]
}
},
"editor.formatOnSave": true,
"editor.rulers": [],
"editor.tabSize": 2,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)", // tw`...`
"tw=\"([^\"]*)", // <div tw="..." />
"tw={\"([^\"}]*)", // <div tw={"..."} />
"tw\\.\\w+`([^`]*)", // tw.xxx`...`
"tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
],
"eslint.format.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
},
"extensions": {
"recommendations": [
"mikestead.dotenv",
"dsznajder.es7-react-js-snippets",
"eamodio.gitlens",
"dbaeumer.vscode-eslint",
"austenc.tailwind-docs",
"esbenp.prettier-vscode",
"adpyke.codesnap"
]
}
}
Ok problem was the workspace settings editor.formatOnSave and the editor.codeActionsOnSave.
My formatting is handled by the linting so I didn't need the VSCode formatter fighting with the linting.

Prettier autosaving (esbenp.prettier-vscode) conflict with prettier/prettier rule

I want to use ESLint along with Prettier. Everything is fine except when I press Ctrl + S to save the file, Prettier changes file in a way which is not compatible with prettier/prettier rule in ESLint.
Content of .vscode/settings.json:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.printWidth": 70,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}
Content of .eslint.json:
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["google", "prettier"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["#typescript-eslint", "prettier"],
"rules": {
"prettier/prettier": ["error"]
}
}
I know if I remove "editor.formatOnSave": true, from settings.json all of problems get resolved but I don't like the saved format because lines of code are too long and I like to break long line into multiple line.
The problem is that Prettier is using printWidth of 70 characters but ESlint have a max-len of 80 characters.
You should modify one of them to keep them sync, e.g. you can change printWidth inside settings.json to make Prettier compatible with ESlint("prettier.printWidth": 80).
Content of ./vscode/settings.json:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.printWidth": 80,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}

ESLint rule conflicts with Prettier rule

I am totally new to VSCode and this is my first setting. I know that this is a very common problem but I couldn't find a suitable solution for it.
This is my understanding so far. Please correct me if I am wrong.
I want to use ESLint for finding errors in Javascript code and Prettier for formatting all languges. But it seems that we could also format our javascript code with ESLint! There are some useful rules that I like to use it and it seems Prettier don't have those like ( space-in-parens ).
So I decided to use ESLint as my formatter in Javascript. Now I can see that there are a lot of tutorial for "How to integrates ESLint with Prettier" in web. The idea is to extend Prettier rules with a plugin and add those ESLint specific rules to it. Reasonable!
I ended up with the following settings. Please take a look at my settings for using ESLint and Prettier below:
my eslint config file:
module.exports = {
env: {
browser: true,
es6: true,
},
extends: ["prettier"],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
},
plugins: [
"prettier"
],
"rules": {
"space-in-parens": ["error", "always"],
"quotes": ["error", "single"],
"prettier/prettier": "error"
}
};
my user setting file:
{
"terminal.integrated.shellArgs.linux": [
"-l"
],
"remote.SSH.remotePlatform": {
"dev-all": "linux"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.alwaysShowStatus": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": [
"javascript"
]
}
and finally my package.json file:
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-prettier": "^3.1.3",
"prettier": "^2.0.4"
}
}
Now the problem is that whenever I save my javascript code, formatting toggles! for example with the first save, I have "single quote" and with the next save I have "double quote". I thinks my understanding of the whole idea is wrong. Could you explain it for me and tell me how to correct it. I am spending so much time to figure it. By the way, I have also installed two extensions in vscode: "ESLint" and "Prettier".
This is potentially because of conflicting rules between ESLint and Prettier plugins. Now you have two options
Either let ESLint know that you want to use Prettier as a formatter.
https://dev.to/s2engineers/how-to-make-eslint-work-with-prettier-avoiding-conflicts-and-problems-57pi
2.You can configure ESlint and Prettier together and resolve the conflicting
rules without any conflicts.
https://blog.theodo.com/2019/08/empower-your-dev-environment-with-eslint-prettier-and-editorconfig-with-no-conflicts/
I have decided to let ESLint do formatting for me in JavaScript and prettier for all other languages. You could find my setting on my git.
To solve conflict
install eslint configuration for prettier
npm install eslint-config-prettier
And include it in the extends option in the file .eslintrc.js
extends: [
...,
"prettier",
],
You can follow these settings by Sumit Saha. Your conflicting will be gone. These settings give more power to eslint over prettier. I am copy-pasting those.
In the .vscode/settings.json file :
{
// config related to code formatting
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"[javascriptreact]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"javascript.validate.enable": false, //disable all built-in syntax checking
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.tslint": true,
"source.organizeImports": true
},
"eslint.alwaysShowStatus": true,
// emmet
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
And, in the .eslintrc file:
{
"extends": [
"airbnb",
"airbnb/hooks",
"eslint:recommended",
"prettier",
"plugin:jsx-a11y/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 8
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"rules": {
"react/react-in-jsx-scope": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": 0,
"react/state-in-constructor": 0,
"indent": 0,
"linebreak-style": 0,
"react/prop-types": 0,
"jsx-a11y/click-events-have-key-events": 0,
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", ".jsx"]
}
],
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 4,
"semi": true,
"endOfLine": "auto"
}
]
},
"plugins": ["prettier", "react", "react-hooks"]
}
Well, I am happy with TSLint along with ESLint.
And I have a habit of doing Ctrl+Shift+F often during writing code.
Also, you can try indent-rainbow, bracket pair colorizer and my favourite, peacock.

VSCode Settings, EsLint and Prettier conflict

I'm having a super annoying issue where a settings conflict of some sort is preventing the lint from adjusting the file as it should. I am using Wes Bos' ESLint/Prettier configuration. For example, I have a Vue file:
<script>
import { mapState, mapActions } from "vuex";
export default {
data: () => ({
valid: false <-------- Also receive eslint(comma-dangle) error here
}),
computed: {
...mapState("account", ["status"]),
},
methods: {
...mapActions("account", ["login", "logout"]),
},
created() {}
};
</script>
However in my .eslintrc I have this rule, because I prefer script code to be indented once:
"vue/script-indent": [
"warn",
2,
{
"baseIndent": 1
}
],
When I save the file to allow Prettier to reformat and fix those errors, I can see the comma-dangle and indent issues be fixed for a split second before they revert back and show all of the errors again. Where is the conflict occurring?
ESLint/Prettier is very new to me, and I'm just trying to get a good system in place! Any help would be greatly appreciated.
Other related files:
VSCode settings.json
{
"breadcrumbs.enabled": true,
"editor.autoClosingBrackets": "always",
"editor.autoClosingQuotes": "always",
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.fontFamily": "FiraCode-Retina",
"editor.fontWeight": "500",
"editor.letterSpacing": 0.5,
"editor.lineHeight": 20,
"editor.minimap.enabled": false,
"editor.tabSize": 2,
"emmet.includeLanguages": {
"erb": "html",
"javascript": "javascriptreact",
"vue-html": "html",
"vue": "html",
"scss": "scss"
},
"files.associations": {
"*.js.erb": "javascript"
},
"gitlens.codeLens.authors.enabled": false,
"gitlens.codeLens.recentChange.enabled": false,
"gitlens.hovers.currentLine.over": "line",
"html.format.indentInnerHtml": true,
"javascript.preferences.quoteStyle": "single",
"search.useReplacePreview": false,
"terminal.integrated.fontWeightBold": "normal",
"workbench.colorTheme": "Atom One Dark",
"workbench.editor.tabCloseButton": "left",
"workbench.iconTheme": "material-icon-theme",
"vim.statusBarColors.normal": "#f4f4f4",
// These are all my auto-save configs
"editor.formatOnSave": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": [
"javascript",
"javascriptreact"
],
}
package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vuex-orm/core": "0.33.0",
"#vuex-orm/plugin-axios": "^0.7.0",
"axios": "^0.19.0",
"convert-units": "^2.3.4",
"core-js": "^2.6.5",
"dayjs": "^1.8.16",
"echarts": "^4.3.0",
"fibers": "^4.0.1",
"lodash": "^4.17.15",
"material-design-icons-iconfont": "^5.0.1",
"sass": "^1.23.0",
"sass-loader": "7.1.0",
"vee-validate": "^3.0.11",
"vue": "^2.6.10",
"vue-headful": "^2.0.1",
"vue-router": "^3.0.3",
"vuedraggable": "^2.23.2",
"vuetify": "2.1.9",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.0",
"#vue/cli-plugin-eslint": "^3.12.0",
"#vue/cli-service": "^3.12.0",
"#vue/eslint-config-airbnb": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-cli-plugin-vuetify": "^1.0.1",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
}
}
I think the cause of the conflict is this setting in settings.json:
"editor.formatOnSave": true,
the editor is set to "editor.tabSize": 2, and the default prettier setting is
"none" for the trailing comma. So it must be overriding whatever settings you had for eslint that runs on save. You can try setting:
"editor.formatOnSave": false,
alternatively you can change the editor.tabSize setting and add
"prettier.trailingComma": "es5",
Same issue, it's working for me.
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}

VS Code project code formatting using ESLint

I'm using VS Code for a React project and have VS Code configured to format on save and to Require a 'prettierconfig' to format (the Prettier: Require Config setting from the VSCode Prettier extension). I also have the ESLint plugin enabled.
That seems to mean my project's .prettierrc config file drives the formatting on save and .eslintrc.json provides linting warnings. But in at least one case (below) some formatting issues are left unresolved on save.
The code below, as formatted, shows eslint(indent) squiggly warnings in VS Code. Upon save (Ctrl + S), some get resolved, but some do not.
Specifically, the incorrect indent spacing of the first <div> gets fixed on save and that eslint(indent) warning disappears. However, the later eslint(indent) warnings do NOT get resolved on save. But they DO, however, get resolved when (on Windows) I click Ctrl +Shift+ P, then find and click the "ESLint: Fix all auto-fixable Problems".
When I save the file again those changes are reverted and the warning appears again.
So "format on save" applies different formatting than "ESLint: Fix all auto-fixable Problems". Is there a way to reconcile these? I would like all the eslint(indent) issues to resolve on save.
Does anyone know what ESLint settings drive "ESLint: Fix all auto-fixable Problems"?
const MyModule = () => {
...
return (
// "eslint(indent)" warning on next line gets resolved on save
<div>
{!menus.find(function(permission) {
return permission.level === 'ADMIN';
}) ? (
// "eslint(indent)" warnings below DO NOT get resolved on save
// ... but they DO get resolved on "ESLint: Fix all auto-fixable problems"
// ... then they reappear on save
<div>
<Redirect to="/" />
</div>
) : (
<div>
<Results />
</div>
)}
</div>
);
};
export default MyModule;
My .eslintrc.json contents:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier",
"prettier/react"
],
"rules": {
"react/prop-types": 0,
"no-console": 1,
"no-control-regex": 0,
"indent": ["warn", 2],
"quotes": ["warn", "single"],
"space-in-parens": 1,
"prefer-destructuring": 0,
"prefer-const": 0
},
"parser": "babel-eslint",
"plugins": ["react", "import", "jsx-a11y"],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
My .prettierrc:
{
"useTabs": false,
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true
}
Like the other posted suggested, I use a setup where eslint runs prettier for me. I already had prettier disabled for my js/ts files so I knew that wasn't the issue. It turns out it was the built in formatter for vscode and turning off editor.formatOnSave fixed the issue.
My project's settings.json. This disables the formatter only for typescript files. Eslint will still fix your files as long as you have the eslint auto fix settings enabled.
{
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
}
}
Rather than turning off formatOnSave, you could instead set the default formatter to eslint:
{
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
}
Here are the rest of my settings just for reference.
My user settings.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"prettier.disableLanguages": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"markdown"
]
}
.eslintrc
{
"root": true,
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"project": "tsconfig.json",
"warnOnUnsupportedTypeScriptVersion": false
},
"plugins": ["#typescript-eslint", "jest", "prettier"],
"extends": [
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint"
],
"rules": {
"prettier/prettier": [
"error",
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 110
}
]
}
}
Instead of using both prettier and eslint formatters, just use the eslint formatter and add your prettier options inside your eslintrc file. Here's an example
https://prettier.io/docs/en/integrating-with-linters.html
// .eslintrc.json
...
"rules": {
"prettier/prettier": [
1,
{
"useTabs": false,
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true
}
]
}
...