Visual studio Code autoimport doesn't work - visual-studio-code

I am using VSCode autoimport on daily basis with this extension
soates autoimport.
https://github.com/soates/Auto-Import/issues/104.
It suddenly stopped to work. I have tried reinstall vscode, changing extension version, disabling plugins, clearing cache ...etc
I have tried this https://www.youtube.com/watch?v=1yu5tB4KOis and also tried add
checkjs: true to my jsconfig.json. Its very hard to live without auto import.
these are my settings.json
{
"dart.flutterSdkPath": "C:\\Users\\rolni\\AppData\\Roaming\\flutter_windows_v1.12.13+hotfix.9-stable\\flutter\\bin",
"explorer.confirmDelete": false,
"workbench.colorCustomizations": {
"[Material Theme Darker]": {
"statusBar.debuggingBackground": "#212121"
}
},
"material-icon-theme.folders.associations": {
"global_state": "global",
"ui": "layout",
"bloc": "controller"
},
"workbench.iconTheme": "material-icon-theme",
"debug.node.autoAttach": "on",
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace",
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"notebook.kernelProviderAssociations": [],
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top",
"explorer.confirmDragAndDrop": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"highlight-matching-tag.customEmptyElements": null,
"emmet.excludeLanguages": [
"markdown"
],
"emmet.includeLanguages": {
"javascript": "html"
},
"autoimport.filesToScan": "**/*.{ts,tsx,js,jsx}",
"autoimport.showNotifications": true,
"extensions.ignoreRecommendations": true,
"workbench.editor.enablePreview": false,
"outline.showVariables": false,
"debug.javascript.autoAttachFilter": "disabled",
"debug.javascript.terminalOptions": {
"trace": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"terminal.integrated.shell.windows": "C:\\Program Files\\PowerShell\\7-preview\\pwsh.exe",
"debug.onTaskErrors": "debugAnyway",
"[go]": {
"editor.insertSpaces": false
},
"go.formatTool": "gofmt",
"go.useLanguageServer": true,
"gopls": {
"usePlaceholders": true, // add parameter placeholders when completing a function
},
"todo-tree.tree.showScanModeButton": false,
"todo-tree.highlights.customHighlight": {
"TODO": {
"icon": "check",
"type": "line",
"iconColour": "yellow",
"foreground": "red",
"background": "yellow"
},
"FIXME": {
"icon": "beaker",
"iconColour": "red",
"foreground": "white",
"background": "red"
}
},
"debug.inlineValues": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"tabnine.experimentalAutoImports": true,
"gitlens.hovers.currentLine.over": "line",
"terminal.integrated.tabs.enabled": true,
"go.toolsManagement.autoUpdate": true,
"workbench.colorTheme": "Material Theme",
"git.enableSmartCommit": true,
"todo-tree.general.tags": [
"BUG",
"HACK",
"FIXME",
"TODO",
"XXX",
"[ ]",
"[x]"
],
"todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
"terminal.integrated.defaultProfile.windows": "PowerShell",
"editor.formatOnSave": true,
}
Can't also debug extension all my breakpoints are unbound...can't figure out how to debug it to find root cause of problem.
This log is in my output Log (Extension Host)
[error] [vscode.json-language-features] provider FAILED
[2021-07-05 13:23:44.550] [exthost] [error] Canceled: Canceled
at b.makeCancelError (c:\Users\rolni\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\json-language-features\client\dist\node\jsonClientMain.js:1:64563)
at b.handleFailedRequest (c:\Users\rolni\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\json-language-features\client\dist\node\jsonClientMain.js:1:64414)
at c:\Users\rolni\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\json-language-features\client\dist\node\jsonClientMain.js:1:24756
EDIT:
I have tried remove plugins, directories, settings, but still
autoimport extension is not enabled even it says yes. Its even missing
the log in extension host output.

For JavaScript projects
VSCode in general starts to fail after a while, it OFTEN doesn't suggest imports from package dependencies and even starts to stop hinting auto import for local project src folder files...
As soon as you open the file it will all of a sudden become available...
It's not a plugin issue, it's just VS code, it's starting to get bloated...
For TypeScript projects
It's not so bad, they seem mainly focused on TS these days, but when it goes wrong it goes wrong. I've started un-installing, go to install folders make sure nothing is there and re-install and it works again. No login sync.
Alternative (which I am not a fan off but just works... grrr)
PHPStorm / WebStorm, it gets the import right every time.
And ctrl click on sub methods of class's will auto open that file and locate you on that method. VSCode will just open that file, if it can find it...
With auto complete (in JS Projects) on variables assigned to a class. I think VS Code will only do that if the file is open in the editor.
I keep both open now, VSCode for speed of editing but when (not if) VSCode start to play up, I switch over. Also for the stacking of file tabs feature in PHPStorm instead of a scroll bar of tabs. I find it easier to just switch over to PHPStorm and back again instead of that scroll thing.

Related

VS Code split terminal issues with Powershell only

hope this finds you well. I feel like my issue something simple but googling and searching through here I couldn't find someone with this exact issue. It's something small but my ocd is killing me about it. In VS Code anytime I try to "split" my powershell terminal it gives me this issue
My default terminal is Powershell and this only happens if the first terminal instance is Powershell. So for example, I can split a terminal between git bash and powershell if I select the git bash terminal and split it like so.
I'm pretty sure the issue is the double quotes around my path. ""C:\Users\Austin Lee"" does not exist. I tried switching the starting directory with terminal.integrated.cwd = "" in my settings.json based on an answer I had seen somewhere, but that didn't fix it. I'm willing to uninstall and reinstall VS Code but I'm not sure this would fix the issue. If anyone has any suggestions please let me know.
also adding my settings.json from VS code. If anything looks weird please let me know haha. if anyone needs any more info I can provide whatever you need, and I really appreciate the input. Also don't know if it matters but I am using oh my posh on powershell for theming and terminal icons but I could split a terminal before, so I'm not really sure when this problem started or if an extension is messing it up, but I disabled all installed extensions and the issue is still happening
"editor.defaultFormatter": "esbenp.prettier-vscode",
"security.workspace.trust.untrustedFiles": "open",
"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.fontFamily": "Hasklug Nerd Font",
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"liveServer.settings.donotVerifyTags": true,
"git.autofetch": true,
"editor.formatOnSave": false,
"workbench.iconTheme": "vscode-icons",
"prettier.semi": false,
"typescript.preferences.quoteStyle": "double",
"editor.bracketPairColorization.enabled": true,
"workbench.colorTheme": "Dracula",
"remote.SSH.remotePlatform": {
"172.105.135.48": "linux"
},
"terminal.integrated.profiles.windows": {
"PowerShell": {
"source": "PowerShell",
"icon": "terminal-powershell"
},
"Command Prompt": {
"path": [
"${env:windir}\\Sysnative\\cmd.exe",
"${env:windir}\\System32\\cmd.exe"
],
"args": [],
"icon": "terminal-cmd"
},
"Git Bash": {
"source": "Git Bash"
},
"Ubuntu (WSL)": {
"path": "C:\\WINDOWS\\System32\\wsl.exe",
"args": [
"-d",
"Ubuntu"
]
},
"Windows PowerShell": {
"path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
}
},
"files.exclude": {
"**/bin": true,
"**/obj": true
},
"explorer.compactFolders": false,
"[csharp]": {
"editor.defaultFormatter": "ms-dotnettools.csharp"
},
"vsicons.dontShowNewVersionMessage": true,
"editor.stickyScroll.enabled": true
}```

Can't word wrap on vs code?

I have tried almost everything but could not figure out how could i remove the horizontal scrollbar from my vs code i have changed every setting but could not figure out how to on my word wrap on vs code. At first it worked but suddenly it stopped working a month before could not figure out what could be the reason maybe some extension. Any help would be appreciated.
Following is code for my setting.json and screen shot of my settings and the horizontal scroll bar.
{
"editor.mouseWheelZoom": true,
"code-runner.runInTerminal": true,
"liveServer.settings.donotShowInfoMsg": true,
"C_Cpp.updateChannel": "Insiders",
"code-runner.saveFileBeforeRun": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"debug.terminal.clearBeforeReusing": true,
"code-runner.clearPreviousOutput": true,
"latex-workshop.view.pdf.viewer": "browser",
"workbench.colorTheme": "Visual Studio Dark",
"workbench.iconTheme": "vscode-icons",
"diffEditor.wordWrap": "on",
"emmet.triggerExpansionOnTab": true,
"editor.accessibilitySupport": "on",
"bracket-pair-colorizer-2.depreciation-notice": false,
"editor.wrappingColumn": 0,
"kite.showWelcomeNotificationOnStartup": false,
"terminal.integrated.profiles.windows": {
"PowerShell": {
"source": "PowerShell",
"icon": "terminal-powershell"
},
"Command Prompt": {
"path": [
"${env:windir}\\Sysnative\\cmd.exe",
"${env:windir}\\System32\\cmd.exe"
],
"args": [],
"icon": "terminal-cmd"
},
"Git Bash": {
"source": "Git Bash"
},
"Ubuntu-18.04 (WSL)": {
"path": "C:\\WINDOWS\\System32\\wsl.exe",
"args": [
"-d",
"Ubuntu-18.04"
]
}
},
"terminal.integrated.defaultProfile.windows": "PowerShell",
"security.workspace.trust.untrustedFiles": "open",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"files.associations": {
"*.css": "css"
},
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
"workbench.startupEditor": "none",
"editor.wordWrap": "on"
}
Q: You'd like to see word wrap in the editor window, as you're editing an HTML file in VSCode, correct?
Q: And you DON'T want the editor to insert line breaks in the actual HTML - you just don't want to have to scroll left and right. Correct?
Q: Have you tried Alt-Z? Or View > Toggle word wrap?
NOTE: be sure the HTML editor pane is "Selected" when you try "Alt-Z".

How can I add PHP executable to VSCODE?

I have been searching web for a long for a correct way to use vscode editor for PHP debug and get confused with lot of result. When I run > start debug F5 from menu on vscode within a php page I am getting this prompt
when I click the edit in settings.json, I am getting this
{
"workbench.colorTheme": "Solarized Dark",
"workbench.editorAssociations": {
"*.ipynb": "jupyter-notebook"
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"workbench.startupEditor": "none",
"[php]": {
"editor.defaultFormatter": "kokororin.vscode-phpfmt"
},
"notebook.cellToolbarLocation": {
"default": "right",
"jupyter-notebook": "left"
},
"editor.fontSize": 15,
"editor.cursorBlinking": "smooth",
"editor.cursorSmoothCaretAnimation": true,
"editor.formatOnType": true,
"auto-close-tag.fullMode": true,
"auto-close-tag.insertSpaceBeforeSelfClosingTag": true,
"auto-close-tag.SublimeText3Mode": true,
"python.languageServer": "None",
"html.format.templating": true
}
Now from web search I found I must add this line to the above json script
"php.validate.executablePath": "C:xampp/php/php.exe"
My php has also successfully running xdebug which I manage to start with help of web search. Now only thing which I miss (hope so) is to add the above path to vscode setting which I don't know where to add. Please help me to get this to get done. Thanks in advance.

ESLint does not format

I have simple project, just a few html and js files. Installed ESLint extension to VS code and set ESLint to be a default formater:
also, this setting is turned to all
And here is my settings.json file:
"window.zoomLevel": 1,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"],
"git.enableSmartCommit": true,
"eslint.alwaysShowStatus": true,
"files.autoSave": "off",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"git.ignoreWindowsGit27Warning": true,
"eslint.options": {
"eslint brace-style": [
"error",
"allman",
{
"allowSingleLine": true
}
]
},
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"eslint.format.enable": true
}
When pressing save ESLint does not work on my js file (no brackets, spacing, etc. is corrected). I used ESLint before in React application, so it worked a year ago.
I have found an answer to my own question :)
I got a notification later on that
ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.eslint
So I pressed here:
on ESLint and allowed this extension to do its job.

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.