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.
Related
I need to check the grammar of various docstrings, is there a way to do that directly in Visual Studio Code (or any other editor) without copying and pasting each docstring in a grammar checker like Grammarly?
At the bottom of the extension settings for Grammarly, under Grammarly>Files: Include you could add python files to be checked, by adding:
**/*.py
Note, this would include the whole python file and not just the docstrings.
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
}
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 have code that when formatted with Prettier ESLint gives me an error
ORIGINAL:
$(document).trigger('HideDropDown').trigger('UpdateDropDowns');
FIXED with Prettier
$(document)
.trigger('HideDropDown')
.trigger('UpdateDropDowns');
ESLINT complains that I need extra spaces as such:
$(document)
.trigger('HideDropDown')
.trigger('UpdateDropDowns');
Is this something that needs to be adjusted through Prettier or ESLint? I do prefer only two spaces rather than 4 but I am not sure how to adjust it so that ESLint doesn't complain about it.
In my case I figured out that the following setting would allow ESLint and Prettier work together well:
"MemberExpression": 1 // default is 2
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.