I have an SCSS file that contains a calc() function.
When i use a calc function without spaces around the operator like so calc(var(--primary-color-h)+5) the transpiled CSS result doesn't work. Only when i set spaces around the operator does it work; like this calc(var(--primary-color-h) + 5)
How would i instruct VSCODE to created spaces around the operator upon save.
I have prettier, scss Formatter and StyleLint installed. But neither seems to fix it.
tnx,
RDG
You can use Stylelint and the following two rules:
function-calc-no-unspaced-operator
function-whitespace-after
These will flag the lack of space before and after the + operator, respectively. See this demo.
This rules are turned on the SCSS standard config, which you can extend in your Stylelint configuration object:
{
"extends": "stylelint-config-standard-scss"
}
How would i instruct VSCODE to created spaces around the operator upon save
You can use the editor.codeActionsOnSave option from the official Visual Studio Code extension for Stylelint. And the following to your VS Code settings file:
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
Related
I'm editing GML files (GameMaker Studio) in VSCode. There's a wonderful plugin, GML Support which adds autocomplete for inbuilt GML functions and instances variables along with a bunch of other cool things.
However, VSCode doesn't seem to recognise local variables in GML (see screen grab below. Dot notation works fine)
I had a look at the VSCode's Programmatic Language Extension for variable name auto-completion but still don't get how I could register the variable declaration (i.e. var fooBar = 23;) with VSCode's Language Server.
Ideally, I'd like the Language Server to respect variable scope for GML files:
global variables - any var declarations for files under script folder
any local variable declarations - all var declarations in the surrounding {...}
What would be the easiest way to add variable name completion as described above?
Thanks in advance!
Edit: looked at vscode-python to see how registerCompletionItemProvider (based on VSCode Language Extension doco) could be used. Unfortunately, still not clear to me as vscode-python seem to rely on Jedi to provide symbols?
So any points appreciated!
If you want to enable simple auto-completion, you can add the following to your settings.json (Command Palette ➜ Open Settings (JSON)):
"[gml-gms81]": { "editor.quickSuggestions": true },
"[gml-gms1]": { "editor.quickSuggestions": true },
"[gml-gms2]": { "editor.quickSuggestions": true },
which works for a workaround:
For a proper solution, well, you'll need to use the registerCompletionItemProvider and index the file on demand or as you go.
The official example demonstrates the use.
For intricacies of processing GML syntax, you can peck at the code in the Ace-based external editor that I made. Processing variable definitions specifically requires you to skip over strings, comments, and loop over values (var name[=value][, name2[=value2]]) with relative degree of confidence (which can be accomplished through a balanced parser).
I'm using prettier in VS Code for typescript. It always remove extra parenthesis, for example
(new Controller()).setData(data).run();
will always be format into
new Controller().setData(data).run();
Which rules handle this deletion? I did see a similar rule in eslint: no-extra-parens. However, I am not using this rule in my eslint file.
I am using prettier with VSCode, How can I configure it to format my code like this :
function test()
{
if()
{
MYCODE GOES HERE;
}
}
I want the { and } on new lines, and an empty line after { and before }.
Currently, it moves the curly brackets to same lines if condition or function name, and also remove the empty lines after/before { and }.
Prettier is considered an " opinionated " formatter, which means it doesn't let you choose things like that. If you want more control over the formatting, you can use a different formatter.
The built-in VS code formatter allows you to do what you're looking for, just search the settings for " function new line " and similar options.
There are of course many other formatting extensions available in the VS code marketplace as well. Whichever you choose, you will have to select it has your default formatter in your VS code settings.
As mentioned in this answer, VS Code's formatter itself works quite well, but if you want this to be part of workflow, then using ESLint might make things easier. There's a rule called brace-style.
You can then run eslint ./path/to/your/file --fix to format your code, or eslint . --fix to format code in the entire project directory.
Disclaimer: I use ESLint for code formatting most of the time and it works for me. I actually use it to find & fix problems too so it's like killing two birds with one stone, but note that ESLint is more about finding problems in the code and fixing them, so using ESLint just for code formatting might not be the best idea.
I've set up a Vue.js project using vue-cli and work on it in VS Code and Vetur. ESLint is configured with the standard profile. I'd like the 'Format Document' command to produce a format which is valid for the eslint.
I've been able to solve the issue for single/double quotes and semi-columns with following .prettierrc.json:
{
"semi": false,
"singleQuote": true
}
Now I'm trying to fix the issue, where no space is being added before method parenthesis:
Definition function () becomes function()
Method call showLoginDialog () becomes showLoginDialog()
I've tried changing the default formatter as described here
Does a default prettierrc which respects eslint standard exist?
If not, how can the above mentioned issue with spaces be fixed?
[edit] I've pushed the branch containing the .prettierrc.json config: https://github.com/taconaut/Sppd.TeamTuner/commit/acd93ab9e06e2e77849af7a346609ba6bf5d639c. The only part (I'm aware of) which doesn't work is the above mentioned issue with spaces between function and parenthesis? AFAICT this should have been taken care of with "spaceBeforeFunctionParen": true which doesn't seem to have any effect.
We don't use semicolons in TypeScript. Each time Intellisense in VS code (v1.18.1) inserts a line, it terminates it with ;. Example would be an import statement.
Is it possible to configure VS Code not to append semicolons? Very inefficient right now to have to delete them manually.
TSLint semicolon rule (has autofix)
TSLint extension for vscode
tslint.json rules section:
"semicolon": [true, "never"]
settings.json Ctrl+,
"tslint.autoFixOnSave": ["semicolon"]
There is an open issue about it https://github.com/Microsoft/TypeScript/issues/19882
If you're using Prettier add to settings.json
"prettier.semi": false
And then in tslint.json
"semicolon": [true, "never"],
TypeScript 3.6 is now able to detect whether your file uses semicolons or not, which can be leveraged in VS Code for quick fixes, refactorings, transformations (e.g. auto import) and other features. It is called Semicolon-Aware Code Edits.
Editors like Visual Studio and Visual Studio Code can automatically apply quick fixes, refactorings, and other transformations like automatically importing values from other modules. These transformations are powered by TypeScript, and older versions of TypeScript unconditionally added semicolons to the end of every statement; unfortunately, this disagreed with many users’ style guidelines, and many users were displeased with the editor inserting semicolons.
TypeScript is now smart enough to detect whether your file uses semicolons when applying these sorts of edits. If your file generally lacks semicolons, TypeScript won’t add one.