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.
Related
Deno format on save isn't working for me. Initially my .vscode/settings.json was this:
{
"deno.enable": true
}
Then based on this Stack Overflow question I tried this and it didn't work.
{
"deno.enable": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "denoland.vscode-deno"
}
I also tried this based on this comment in a GitHub issue and it didn't work.
{
"deno.enable": true,
"deno.lint": true,
"deno.unstable": false,
"editor.formatOnSave": true,
"[typescript]": { "editor.defaultFormatter": "denoland.vscode-deno" },
}
This is my ~/Library/Application Support/Code/User/settings.json.
{
"editor.minimap.enabled": false,
"editor.tabSize": 2,
"editor.fontSize": 14,
"eslint.validate": ["javascript", "typescript"],
"workbench.startupEditor": "none",
"workbench.colorTheme": "One Dark Pro Darker",
"atomKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": true,
"terminal.explorerKind": "external",
"gitlens.currentLine.enabled": false,
"gitlens.hovers.currentLine.over": "line",
"gitlens.codeLens.enabled": false,
"gitlens.statusBar.enabled": false,
"gitlens.hovers.enabled": false,
"gitlens.blame.avatars": false,
"gitlens.blame.heatmap.enabled": false,
"gitlens.changes.locations": [
"gutter",
"overview"
],
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.lightbulb.enabled": false,
"editor.scrollBeyondLastLine": false,
"breadcrumbs.enabled": false,
"security.workspace.trust.untrustedFiles": "open",
"explorer.confirmDragAndDrop": false,
"files.insertFinalNewline": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"window.restoreWindows": "none",
"explorer.autoReveal": false,
"editor.formatOnSaveMode": "modifications",
"editor.formatOnSave": true
}
Commenting out "editor.formatOnSave" doesn't fix it.
The docs aren't very helpful and googling around hasn't been either.
I've tried quitting and re-opening VSCode before trying all of this.
Running deno fmt in the command line does work.
You have configured a user setting which is preventing formatting: "editor.formatOnSaveMode"
The description for the setting is this:
Controls if format on save formats the whole file or only modifications. Only applies when #editor.formatOnSave# is enabled.
The setting has three options as of VS Code v1.71.2:
"file": Format the whole file.
"modifications": Format modifications (requires source control).
"modificationsIfAvailable": Will attempt to format modifications only (requires source control). If source control can't be used, then the whole file will be formatted.
You have currently configured it to "modifications".
I guess that — in your Deno workspace — there is either no source control configured or the file(s) that you are saving are not eligible change candidates, so no formatting action occurs when you save the file(s).
In order to get the behavior that you want, you need to configure the following settings:
"editor.formatOnSave": Set to true (This is already configured in your user settings.)
"editor.formatOnSaveMode": Set to either "file" or "modificationsIfAvailable" (Because you configured this to "modifications" in your user settings, I'm guessing that the one you'll want is "modificationsIfAvailable", and you can either update your user setting or override this value in the workspace settings.)
"deno.enable": Set to true (This should be configured in the workspace.)
"editor.defaultFormatter": Set to "denoland.vscode-deno" (This should be configured in the workspace.)
If you just want something to copy + paste, use this for your workspace settings:
{
"deno.enable": true,
"editor.defaultFormatter": "denoland.vscode-deno"
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modificationsIfAvailable"
}
Install Deno extension: https://github.com/denoland/vscode_deno
Then on your .vscode/setting.json add the following settings
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
},
"editor.defaultFormatter": "denoland.vscode-deno",
"editor.formatOnSave": true,
"editor.formatOnPaste": false,
By doing a fresh install of vscode_deno the above should work without any further configuration.
I'm trying to get ESLint to format with the formatOnType option. I know that the usual setup for the settings.json file is
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript"
],
}
Since VSCode has an inbuilt formatter that can run for each new line of code using the formatOnType option, I tried to configure the default formatter to be VSCode, in order to let this happen, I also enabled the format option for eslint.
{
"editor.formatOnType": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"eslint.format.enable": true,
"eslint.validate": [
"javascript"
],
}
This way I can eliminate the codeActionsOnSave setting, since VSCode is supposed to run the formatter on its own. However the above setting doesn't work as is.
To cross-check, I changed the formatOnType option to formatOnSave
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"eslint.format.enable": true,
"eslint.validate": [
"javascript"
],
}
Now it works perfectly, but it defeats the entire purpose of me trying to set ESLint as the default formatter, which was to get it to run on each new line, as possible by the formatOnType option.
P.S. I already have the .eslintrc.json file setup with the Airbnb defaults
I am trying to create some settings to auto lint and format Python files when saving. I have the settings I desire for Python but when editing other files such as XML, VSCode will automatically format them as well. Is there a way I can get VSCode to only format the Python files?
Here are my settings for formatting and linting:
"python.linting.pylintEnabled": true,
"python.linting.pylintArgs": [
"--max-line-length=240",
"--disable=C0111,unused-import"
],
"python.formatting.provider": "black",
"python.formatting.blackArgs": [
"line-length", "250"
],
"python.linting.lintOnSave": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
You could try this, it works for me prevent my SQL files from being formated.
Credit to the original post here.
"editor.formatOnSave": false,
"[python]": {
"editor.formatOnSave": true,
},
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.
I have a question about the VSCode CSS/HTML suggestions. I would like it to work like in WebStorm.
First problem: when I type whole property name there are no suggestions.
But when I type di and select correct property and press tab/enter I have suggestions but in WebStorm it's always. Even if I press backspace and space again. In VSCode after backspace I cant see any suggestions any more.
Second problem: in HTML I don't see any suggestions (.css saved)
Extensions which I use:
IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS, HTML CSS Support and SCSS IntelliSense
These are my user settings.
{
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"workbench.iconTheme": "material-icon-theme",
"material-icon-theme.folders.theme": "specific",
"material-icon-theme.hidesExplorerArrows": false,
"material-icon-theme.folders.color": "#90a4ae",
"editor.formatOnSave": true,
"editor.wordWrap": "on",
"eslint.enable": false,
"git.autofetch": true,
"git.enableSmartCommit": true,
"files.autoSave": "off",
"workbench.editor.enablePreview": false,
"html-css-class-completion.enableEmmetSupport": true,
"trailing-spaces.trimOnSave": true,
"workbench.colorTheme": "Atom One Dark",
"php.validate.run": "onType",
"php.suggest.basic": true,
"editor.formatOnPaste": true,
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"blade": "html",
"javascript": "javascriptreact"
},
"editor.tabCompletion": "on",
"editor.find.autoFindInSelection": true,
"editor.snippetSuggestions": "top"
}
I wonder if it's the fault of my configuration or the lack of any extensions or maybe I have too many of them (21).