How to stop new lines when formatting code - visual-studio-code

EDIT: It is Beautify that is adding the new lines. Not sure which rule though.
Is there a way to stop parameter lists and import lists from adding new lines per each list item when formatting code with?
E.g stop this:
function view(state$) {
return state$.map(({weight,height,bmi}) =>
div([
renderWeightSlider(weight),
renderHeightSlider(height),
h2('BMI is ' + bmi)
])
);
}
from becoming this:
function view(state$) {
return state$.map(({
weight,
height,
bmi
}) =>
div([
renderWeightSlider(weight),
renderHeightSlider(height),
h2('BMI is ' + bmi)
])
);
}
When right-clicking and selecting "format document"?
It also does it with imports like so:
import {
makeDOMDriver,
h1,
a
} from '#cycle/dom';
However it is unwanted.

create or edit .jsbeautifyrc file in your root from you vscode project and put in to the file this json property
{
"brace_style": "collapse,preserve-inline"
}
this will also prevent to format all JavaScript object

Include "brace_style": "collapse,preserve-inline" as Yitzchak said inside the .json settings file located here:
C:\Users\***\AppData\Roaming\Code\User\settings.json

2021 Update for Eze_82's answer:
Instead of just "brace_style": "collapse,preserve-inline", you now need to include the following in the settings.json file of VSCode:
"beautify.config": {
"brace_style": "collapse,preserve-inline"
}
The location of the settings.json is still the same.

Related

How make Veture extension in VS code format .vue file so that html attributes are preserved on a single line?

I am using VS Code and Veture extension when writing .vue files.
Currently the formatter automatically places all html attributes on a new line. Like so
<v-item-group
class="shopCategoriesImageGroup"
multiple
v-for="(item, index) in getProductCategoryIcons"
:key="index"
>
I would like to keep them on one line. Desired result:
<v-item-group class="shopCategoriesImageGroup" multiple v-for="(item, index) in getProductCategoryIcons":key="index" >
From VS Code setting panel Veture has these formatting options:
none
prettyhtml
js-beutify-html
prettier
Following the docs:
https://vuejs.github.io/vetur/formatting.html
I tried using prettier, configured html whitespacing, no luck there. These does not seem to be a configuration option that allows for html attribute preservation on a single line.
The desired effect appears only if I use none as a formatter. But that requires me to manually format the code.
Any idea what configuration options I should set so that the code formats on a single line automatically on save ?
Or should I try another extension ?
Solved It !!!
You have to set the print width property to a bigger number. Like this:
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 250, // No line exceeds 250 characters
}
}
Found the information here: https://github.com/vuejs/vetur/issues/114 thanks to Phill's comment.
UPDATED
VETUR changed default html formatter to "prettier", it says in documentation...
// settings.json from vscode
"vetur.format.defaultFormatterOptions": {
"prettier": {
"printWidth": 120
}
// "prettyhtml": {
// "printWidth": "80",
// "wrapAttributes": true,
// "sortAttributes": true
// }
},

Show only available imports from file

I have recently switched from webstorm to vscode and I am struggling to set it up for my needs.
Right now I am wondering if there is any extension/setting that will show only available imports from the imported file.
Here is an example:
import { InternalDataObject } from 'internal-node-module'
import actionTypes from './pay-structure.action-types'
const { GET_JOB_STAMP } = actionTypes
export {
getMissionFees,
}
const getMissionFees = () => ({
type: GET_JOB_STAMP,
promise: InternalDataObject.payStructure.getJobFeeStamp,
})
When I press ctrl + space in the brackets I can see thousands of options, but I would like to see only one: getMissionFees
Thanks in advance!
There is a setting for that:
"editor.snippetSuggestions": "none"
It ontrols whether snippets are shown with other suggestions and how they are sorted. Possible values: top, bottom, inline, none.

Prevent VS Code from changing indentation on Enter

Let's assume I have a JavaScript file with the following content and the cursor placed at the pipe symbol (|):
class ItemCtrl {
getPropertiesByItemId(id) {
return this.fetchItem(id)
.then(item => {
return this.getPropertiesOfItem(item);
});
}|
}
If I now hit enter, the code changes in the following way:
class ItemCtrl {
getPropertiesByItemId(id) {
return this.fetchItem(id)
.then(item => {
return this.getPropertiesOfItem(item);
});
}
|
}
It wrongly aligns the closing curly brace with the return statement, when it should be aligned with the method definition. I know that the formatting inside the function is not the best but I still would rather disable that feature to prevent weird things like that from happening.
I already set editor.autoIndent to false but it still keeps happening. Is there any other way, how I can turn this feature off entirely? (or make it work in a smarter way)
In VS Code 1.17, this bug caused "editor.autoIndent": false to not work
This should be fixed in VS Code 1.18

How can I prevent tinyMCE's paste event?

I need to prevent the paste event of tinyMCE if the length of the current content of editor plus the length of the words to be pasted exceed the specified limit. How can I do it? Thank you.
I was wrong. I dont need to prevent or disable paste in tinyMCE to do this. I used their paste plugin and modified the content before it is pasted.
function(pl, o) {
...
if(len > limit) {
o.content = '';
}
}
I think it's better to use the paste_preprocess function.
It's a old question, but others may stumble on this problem.
Here is the solution:
paste_preprocess: function (plugin, args) {
args.content = ''; // modify or do anything with the clipboard data
},
Do it inside, init

Prevent TinyMCE from removing span elements

Here is the problem demonstration
You can try it here: http://fiddle.tinymce.com/SLcaab
This is TinyMCE default configuration
less all the plugins
with extended_valid_elements: "span"
1 - Open the Html Source Editor
2 - Paste this html into the Html Source Editor:
<p><span>Hello</span></p>
<p>Google 1</p>
<p>Google 2</p>
3 - Click update in the Html Source Editor to paste the html in the editor
4 - Remember there is a span around 'Hello'.
5 - Place your cursor just before Google 2 and press backspace (the two links should merge inside the same paragraph element).
6 - Look at the resulting html using the Html Source Editor.
Result (problem): No more span in the html document even though we added 'span' to the extended_valid_elements in the TinyMCE settings.
Note: I removed all the plugins to make sure the problem is at the core of TinyMCE.
Edit 1 - I also tried: valid_children : "+p[span]" - still does not work
Edit 2: Only reproduced on WebKit (OK on Firefox and IE)
Insert extended_valid_elements : 'span' into tinymce.init:
tinymce.init({
selector: 'textarea.tinymce',
extended_valid_elements: 'span',
//other options
});
I have the same problem and I find solutions. Tiny MCE deleted SPAN tag without any attribute. Try us span with class or another attribute for example:
<h3><span class="emptyClass">text</span></h3>
In TinyMCE 4+ this method good work.
Tinymce remove span tag without any attribute. We can use span with any attribute so that it is not removed.
e.g <span class="my-class">Mahen</span>
Try this for 3.5.8:
Replace cleanupStylesWhenDeleting in tiny_mce_src.js (line 1121) with this::
function cleanupStylesWhenDeleting() {
function removeMergedFormatSpans(isDelete) {
var rng, blockElm, wrapperElm, bookmark, container, offset, elm;
function isAtStartOrEndOfElm() {
if (container.nodeType == 3) {
if (isDelete && offset == container.length) {
return true;
}
if (!isDelete && offset === 0) {
return true;
}
}
}
rng = selection.getRng();
var tmpRng = [rng.startContainer, rng.startOffset, rng.endContainer, rng.endOffset];
if (!rng.collapsed) {
isDelete = true;
}
container = rng[(isDelete ? 'start' : 'end') + 'Container'];
offset = rng[(isDelete ? 'start' : 'end') + 'Offset'];
if (container.nodeType == 3) {
blockElm = dom.getParent(rng.startContainer, dom.isBlock);
// On delete clone the root span of the next block element
if (isDelete) {
blockElm = dom.getNext(blockElm, dom.isBlock);
}
if (blockElm && (isAtStartOrEndOfElm() || !rng.collapsed)) {
// Wrap children of block in a EM and let WebKit stick is
// runtime styles junk into that EM
wrapperElm = dom.create('em', {'id': '__mceDel'});
each(tinymce.grep(blockElm.childNodes), function(node) {
wrapperElm.appendChild(node);
});
blockElm.appendChild(wrapperElm);
}
}
// Do the backspace/delete action
rng = dom.createRng();
rng.setStart(tmpRng[0], tmpRng[1]);
rng.setEnd(tmpRng[2], tmpRng[3]);
selection.setRng(rng);
editor.getDoc().execCommand(isDelete ? 'ForwardDelete' : 'Delete', false, null);
// Remove temp wrapper element
if (wrapperElm) {
bookmark = selection.getBookmark();
while (elm = dom.get('__mceDel')) {
dom.remove(elm, true);
}
selection.moveToBookmark(bookmark);
}
}
editor.onKeyDown.add(function(editor, e) {
var isDelete;
isDelete = e.keyCode == DELETE;
if (!isDefaultPrevented(e) && (isDelete || e.keyCode == BACKSPACE) && !VK.modifierPressed(e)) {
e.preventDefault();
removeMergedFormatSpans(isDelete);
}
});
editor.addCommand('Delete', function() {removeMergedFormatSpans();});
};
put an external link to tiny_mce_src.js in your html below the tiny_mce.js
It's possible to use the work around by writing it as a JavaScript script which prevents WYSIWIG from stripping empty tags. Here my issue was with including Font Awesome icons which use empty <i> or <span> tags.
<script>document.write('<i class="fa fa-facebook"></i>');</script>
In the Tinymce plugin parameters enable:
Use Joomla Text Filter.
Be sure your user group have set "No filtered" Option in global config > text filters.
Came across this question and was not happy with all the provided answers.
We do need to update wordpress at some point so changing core files is not an option. Adding attributes to elements just to fix a tinyMCE behaviour also doesn't seem to be the right thing.
With the following hook in the functions.php file tinyMCE will no longer remove empty <span></span> tags.
function tinyMCEoptions($options) {
// $options is the existing array of options for TinyMCE
// We simply add a new array element where the name is the name
// of the TinyMCE configuration setting. The value of the array
// object is the value to be used in the TinyMCE config.
$options['extended_valid_elements'] = 'span';
return $options;
}
add_filter('tiny_mce_before_init', 'tinyMCEoptions');
I was having same issue. empty SPAN tags are being removed. The solution i found is
verify_html: false,
Are you running the newest version of TinyMCE? I had the opposite problem - new versions of TinyMCE would add in unwanted span elements. Downgrading to v3.2.7 fixed the issue for me, that might also work for you if you are willing to use an old version.
Similar bugs have been reported, see the following link for bugs filtered on "span" element:
http://www.tinymce.com/develop/bugtracker_bugs.php#!order=desc&column=number&filter=span&status=open,verified&type=bug