I am trying to format a js file with prettier but it seems prettier is breaking the code syntax. I want to achieve this
(expectated result) but the red lines appear. On save I get the following result. While running the code I get the following error TypeError: {} is not a function (error image). I tried the following but none seems to work in my case.
Why do I keep getting Delete 'cr' [prettier/prettier]?
Visual Studio Code [eslint] Delete 'CR' [prettier/prettier] on windows
I am using the following .prettierrc.js
module.exports = {
tabWidth: 2,
bracketSpacing: true,
endOfLine: "auto",
jsxBracketSameLine: true,
printWidth: 100,
semi: false,
singleQuote: false,
trailingComma: "none"
}
In my .eslintrc.json file I have the following rules set for prettier
"prettier/prettier": [
"error",
{
"bracketSpacing": true,
"endOfLine": "auto",
"jsxBracketSameLine": true,
"printWidth": 100,
"semi": false,
"singleQuote": false,
"trailingComma": "none"
}
],
I have tried changing LF to CRLF and vice versa that appears in the bottom section of vscode but no success. What else am I missing?
Related
I am using the extension clang-format in vscode to format my c and cpp files. Followed by the instructions on the internet, i set the setting file like below, but i can't figure out how to change the default indent width.
"terminal.integrated.defaultProfile.linux": "bash",
"clang-format.style": "Google",
"clang-format.language.c.enable": true,
"clang-format.language.cpp.enable": true,
"clang-format.executable": "/usr/bin/clang-format-12",
"[c]": {
"editor.defaultFormatter": "xaver.clang-format",
"editor.wordBasedSuggestions": false,
"editor.suggest.insertMode": "replace",
"editor.semanticHighlighting.enabled": true,
},
"[cpp]": {
"editor.defaultFormatter": "xaver.clang-format"
}
}
"clang-format.style": "{ BasedOnStyle: Google, IndentWidth: 4}"
All extension options are described here vscode-clang-format-provider/package.json.
All clang-format style options are described here Clang-Format Style Options.
I need to apologize in advance because I am totally confused at the moment. I've been wrangling with my .eslintrc.json (at the end of my post) for several hours now.
All I want, is to set single quotes. To my understanding single quotes are part of the default settings of "eslint:recommended". But when I execute Prettier, double quotes are being set.
Next thing I tried was setting single quotes in rules for "prettier/prettier". That's not working either. Prettier is still setting double quotes.
Last of my options was setting single quotes directly in rules as "quotes: ["error": "single"].
Strangely enough though, double quotes are being shown as linting errors while editing.
I am running out of options.
Maybe someone can help me.
Here's my .eslintrc.json:
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true,
"node": true
},
"extends": ["eslint:recommended", "prettier"],
"plugins": ["prettier", "#babel", "vue"],
"parserOptions": {
"ecmaVersion": 2022,
"parser": "#babel/eslint-parser",
"sourceType": "module"
},
"rules": {
"no-console": "off",
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"prettier/prettier": [
"error",
{
"singleQuote": true,
"onlyUseLocalVersion": false
}
]
}
}
Finally I tried to set
{
"prettier.singleQuote":true
}
in coc-settings.json (:CocConfig) and now it works.
That shouldn't be necessary if singleQuote is already set in .eslintrc. So I consider setting singelQuote in coc-settings.json rather a workaround than a real solution.
What I want to know
How to set a keyboard shortcut to replace "" with ''.
Or is there a default shortcut to replace "" with ''?
Purpose
I use Visual Studio Code on a Mac. I often replace "" with ''.
For example,
const foo = "foo";
const bar = "bar";
⬇️
const foo = 'foo';
const bar = 'bar';
I usually use Visual Studio Code's replace function with a regular expression like this.
I want to register a keyboard shortcut for this operation because I do it frequently.
What I tried / Issue
I opened keybindings.json and tried to set a keyboard shortcut in it. But I have no idea what to write.
[
{
"key": "shift+cmd+'",
"command": "actions.find" // ?????????
}
]
What should I write in there? Or is there a default shortcut to replace "" with ''?
Edit:
According to Jeff Brower's answer (thank you!), "args" can be helpful for my purpose. I'm trying to change his/her code.
I wrote in keybindings.json like this but it doesn't work:
{
"key": "shift+cmd+'",
"command": "editor.action.startFindReplaceAction",
"args": {
"query": "\"(.+)\"",
"replace": "'$1'",
"triggerSearch": true,
"isRegex": true,
"matchWholeWord": true,
"isCaseSensitive": false
}
}
According to the answers of this question, there is no built-in way to do this. However, I did get a similar keybinding to work. This searches all files in the workbench:
{
"key": "ctrl+shift+'",
"command": "workbench.action.findInFiles",
"args": {
"query": "\"((?:\\\\[\"'\\\\bfnrt]|[^\\\\\"'\\n\\r])*)\"",
"replace": "'$1'",
"triggerSearch": true,
"isRegex": true,
"matchWholeWord": true,
"isCaseSensitive": true
}
}
The main caveat is that it doesn't automatically perform the replacement, but it does fill in the fields of the find and replace.
I also improved the regular expression a bit to handle javascript-style escaping, and allow empty strings (unit tests). To use your original regular expression, replace the whole string with:
"\"(.+)\""
It can be done with an extension, I'll show the code for that. An extension allows you to set a keybinding if that is what you want.
But it is easy to accomplish what you want with these steps.
Select any ".
Cmd+Shift+L to select all occurrences of ".
Type '.
The working part of the extension code:
let disposable = vscode.commands.registerCommand('yourExtensionName.someCommandName', async function () {
const fileName = vscode.workspace.asRelativePath(vscode.window.activeTextEditor.document.uri);
vscode.commands.executeCommand('workbench.action.findInFiles',
{
query: "\"(.+)\"",
replace: "'$1'",
triggerSearch: true,
isRegex: true,
filesToInclude: fileName
// preserveCase: true,
// useExcludeSettingsAndIgnoreFiles: true,
// isCaseSensitive: true,
// matchWholeWord: true,
// filesToExclude: "./*.css"
}).then(() => {
setTimeout(() => {
vscode.commands.executeCommand('search.action.replaceAll');
}, 1000);
});
});
context.subscriptions.push(disposable);
Demo:
The extension works with the findInFiles command, since actions.find will not take arguments. But it is restricted to the current file. It finds the current fileName:
const fileName = vscode.workspace.asRelativePath(vscode.window.activeTextEditor.document.uri);
and uses that in the filesToInclude argument.
I found out that installing Django 1.0.2 extention on VS code disables the default html.autoClosingTags, meaning that, even if this is set to True, it won't autoclose HTML tags.
Does anyone knows how to fix it?
Or at least another extention highlighting django syntax that does not disable html.autoClosingTags.
UPDATE:
As suggested by #Nadim Al Abdou
In my settings.json (File>Preferences>Settings> settings.json) there was:
{
"python.pythonPath": "C:\\Applicazioni_Tommaso\\Anaconda3\\pythonw.exe",
"workbench.startupEditor": "newUntitledFile",
"workbench.colorTheme": "Atom One Dark",
"workbench.tree.indent": 30,
"terminal.integrated.cwd": "C:\\users\\tommaso",
"window.zoomLevel": 0,
"workbench.editor.enablePreview": false,
},
I turn it into:
{
"python.pythonPath": "C:\\Applicazioni_Tommaso\\Anaconda3\\pythonw.exe",
"workbench.startupEditor": "newUntitledFile",
"workbench.colorTheme": "Atom One Dark",
"workbench.tree.indent": 30,
"terminal.integrated.cwd": "C:\\users\\tommaso",
"window.zoomLevel": 0,
"workbench.editor.enablePreview": false,
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
"emmet.includeLanguages": {"django-html": "html"},
},
close and re-open vs code, but it does not work.
Update:
This does not work because I am editing the User settings
press ctrl+p
insert >open settings in the search bar
select preferences: Open User Settings (JSON)
while it is now clear that I should edit the Default settings
press ctrl+p
insert >open settings in the search bar
select preferences: Open Default Settings (JSON)
where I actually found the "files.associations": { line.
The problem is I cannot edit the file, beacuse as I try to, vscode shows the message: "cannot edit in read only editor".
What can I do to insert the line "emmet.includeLanguages": {"django-html": "html"}, ?
you need to edit your global settings.json file like so
1.
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
2.
"emmet.includeLanguages": {"django-html": "html"},
I created this extension in one day, I'm adding more features, I saw you are adding:
"emmet.includeLanguages": { "django-html" : "html" }
I tried adding it and is working for me. To be honest I'm not sure Why this is not working for you, Did you resolve it?
Can you try updating VSCode please? This info is helpful for me.
Another way is moving up the line, exactly before:
"files.associations": {
Thanks,
Roberth.
I can't figure out the proper format to use in specifying that specs for the scale_and_crop image processor in a thumbnail alias.
I've tried many variations, most recently this one:
'year_thumb': {
'scale_and_crop': (
('size', (120, 0)),
('crop', 'scale'),
('upscale', True),
)
},
Not sure how to get this right.
So, unfortunately I never reconciled the setting of image processor arguments in code vs. in thumbnail alias settings, but here's how I accomplished the same, or similar thing:
'year_thumb': {
'size': (120, 0),
'autocrop': True,
'crop': 'smart',
'upscale': True,
},