Does anyone knows how can I adjust Eclipse Formatter to align (or wrap) the strings inside brackets?
I would like t`he format keep the code aligned like this:
#Component(
immediate = true,
property = {
"com.liferay.portlet.display-category=category.sample",
"com.liferay.portlet.header-portlet-css=/css/main.css",
"com.liferay.portlet.instanceable=true",
"javax.portlet.display-name=PortletModule",
"javax.portlet.init-param.template-path=/",
"javax.portlet.init-param.view-template=/view.jsp",
"javax.portlet.name=" + PortletModulePortletKeys.PORTLETMODULE,
"javax.portlet.resource-bundle=content.Language",
"javax.portlet.security-role-ref=power-user,user"
},
service = Portlet.class
)
But when I do save (with formatting on save actions), the code auto adjusts to this:
#Component(
immediate = true,
property = { "com.liferay.portlet.display-category=category.sample",
"com.liferay.portlet.header-portlet-css=/css/main.css", "com.liferay.portlet.instanceable=true",
"javax.portlet.display-name=PortletModule", "javax.portlet.init-param.template-path=/",
"javax.portlet.init-param.view-template=/view.jsp",
"javax.portlet.name=" + PortletModulePortletKeys.PORTLETMODULE,
"javax.portlet.resource-bundle=content.Language", "javax.portlet.security-role-ref=power-user,user" },
service = Portlet.class
)
Any ideas?
You can create a new Formatter profile at:
Window > Preferences > Java > Code Style > Formatter
then edit it according to your need, I was also looking to format my Portlet, so I share you my-formatter.xml, just import it and edit the Maximum line width as you need (inside the Line Wrapping options), 91 works for me.
I hope this will help.
Related
im korean beginner developer... help... T^T
i want to make auto complete like snippets in my custom vs code extension.
now my code,
const snippetBase = `axios.({
url: "${service.url}",
method: "${service.description}",
`
const editor = vscode.window.activeTextEditor
const selection: any = editor?.selection
editor?.edit(builder => {
builder.replace(
selection,
snippetBase + snippetHeaders(snippetRes.data.header) + snippetBody(snippetRes.data.body)
)
})
then, my extension auto complete image
I want to focus my cursor automatically inside the format after the snippet is shown.
Just like picture below.
snippets image
help me plz!!
It sounds from your comment that you want the edit to act as a snippet. Then you need to make a SnippetString and use the editor.insertSnippet() command which can take that SnippetString as an argument. This should work for you:
const editor = vscode.window.activeTextEditor
const selection = editor?.selection
const axiosSnippet = new vscode.SnippetString("axios.({\n")
axiosSnippet.appendText("\turl: \"")
axiosSnippet.appendPlaceholder(service.url)
axiosSnippet.appendText("\",\n")
axiosSnippet.appendText("\tmethod: \"")
axiosSnippet.appendPlaceholder(service.description)
axiosSnippet.appendText("\",\n")
editor.insertSnippet(axiosSnippet, selection)
axiosSnippet.appendPlaceholder(service.url); is the key to this, as it will select that placeholder first and then allow you to tab to the next placeholder axiosSnippet.appendPlaceholder(service.description).
[I don't know the structure of the rest of your snippet,e.g., snippetHeaders(snippetRes.data.header). If it is just text than you can use the appendText method with \n for newlines.
I'm building a simple code editor to help children learn HTML. One feature I'm trying to add is that when users mouseover their rendered code (in an iframe), the corresponding HTML code in the editor is highlighted. So, for example, if a user mouses-over an image of kittens, the actual code, , would be highlighted in the editor.
Mousing-over the iframe to get the html source for that element is the easy part, which I've done (using document.elementFromPoint(e.clientX, e.clientY in the iframe itself, and posting that up to the parent) - so that's not the part I need help with. The part I can't figure out is how to search for and highlight that string of selected code in the code editor.
I'm using Codemirror 6 for this project, as it seems as it will give me the most flexibility to create such a feature. However, as a Codemirror 6 novice, I'm struggling with the documentation to find out where I should start. It seems like the steps I need to complete to accomplish this are:
Search for a range in the editor's text that matches a string (ie.'<img src="kittens.gif"').
Highlight that range in the editor.
Can anyone out there give me some advice as to where in the Codemirror 6 API I should look to start implementing this? It seems like it should be easy, but my unfamiliarity with the Codemirror API and the terse documentation is making this difficult.
1. Search for a range in the editor's text that matches a string (ie.'<img src="kittens.gif"').
You can use SearchCursor class (iterator) to get the character's range where is located the DOM element in your editor.
// the import for SearchCursor class
import {SearchCursor} from "#codemirror/search"
// your editor's view
let main_view = new EditorView({ /* your code */ });
// will create a cursor based on the doc content and the DOM element as a string (outerHTML)
let cursor = new SearchCursor(main_view.state.doc, element.outerHTML);
// will search the first match of the string element.outerHTML in the editor view main_view.state.doc
cursor.next()
// display the range where is located your DOM element in your editor
console.log(cursor.value);
2. Highlight that range in the editor.
As described in the migration documentation here, marked text is replace by decoration. To highlight a range in the editor with codemirror 6, you need to create one decoration and apply it in a dispatch on your view. This decoration need to be provide by an extension that you add in the extensions of your editor view.
// the import for the 3 new classes
import {StateEffect, StateField} from "#codemirror/state"
import {Decoration} from "#codemirror/view"
// code mirror effect that you will use to define the effect you want (the decoration)
const highlight_effect = StateEffect.define();
// define a new field that will be attached to your view state as an extension, update will be called at each editor's change
const highlight_extension = StateField.define({
create() { return Decoration.none },
update(value, transaction) {
value = value.map(transaction.changes)
for (let effect of transaction.effects) {
if (effect.is(highlight_effect)) value = value.update({add: effect.value, sort: true})
}
return value
},
provide: f => EditorView.decorations.from(f)
});
// this is your decoration where you can define the change you want : a css class or directly css attributes
const highlight_decoration = Decoration.mark({
// attributes: {style: "background-color: red"}
class: 'red_back'
});
// your editor's view
let main_view = new EditorView({
extensions: [highlight_extension]
});
// this is where the change takes effect by the dispatch. The of method instanciate the effect. You need to put this code where you want the change to take place
main_view.dispatch({
effects: highlight_effect.of([highlight_decoration.range(cursor.value.from, cursor.value.to)])
});
Hope it will help you to implement what you want ;)
Have a look at #codemirror/search.
Specifically, the source code implementation of Selection Matching may be of use for you to adapt.
It uses Decoration.mark over a range of text.
You can use SearchCursor to iterate over ranges that match your pattern (or RegExpCursor)
Use getSearchCursor, something like this:
var cursor = cmEditor.getSearchCursor(keyword , CodeMirror.Pos(cmEditor.firstLine(), 0), {caseFold: true, multiline: true});
if(cursor.find(false)){ //move to that position.
cmEditor.setSelection(cursor.from(), cursor.to());
cmEditor.scrollIntoView({from: cursor.from(), to: cursor.to()}, 20);
}
Programmatically search and select a keyword
Take a look at getSearchCursor source code it it give some glow about how it works and its usage.
So use getSearchCursor for finding text and optionally use markText for highlighting text because you can mark text with setSelection method of editor.
Selection Marking Demo
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
styleSelectedText: true
});
editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});
And it seem this is what you are looking for:
codemirror: search and highlight multipule words without dialog
RegExpCursor is another option that you can use:
new RegExpCursor(
text: Text,
query: string,
options?: {ignoreCase?: boolean},
from?: number = 0,
to?: number = text.length
)
Sample usage at:
Replacing text between dollar signs for Mathml expression.
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
// }
},
The Thunderbird Lightning extension shows the time on the left side of the Week and Day views as shown here...
I would like the time to show 2 different time zones (e.g. local time and Pacific Time) as shown here...
Is there a configuration parameter to do this? Is there another extension which can tweak this? If not, how do I hack the Thunderbird extension to do this?
For reference, Outlook has this functionality. Also, this answer shows how to hack the Lightning extension.
I didn't solve the problem for the general case. I simply caused the time to be displayed in the current time zone and the previous hour to be displayed. In my case, the current time zone is USA Mountain time and the previous hour ends up being USA Pacific time.
The file calendar-multiday-view.xml in the following jar file must be edited while Thunderbird is not running.
C:\Users\nreynold.ORADEV\AppData\Roaming\Thunderbird\Profiles\profile\extensions\{e2fda1a4-762b-4020-b5ad-a41df1933103}\chrome.jar
The method makeTimeBox() must be changed as indicated by comments:
function makeTimeBox(timestr, time2str, size) { // Add time2str parameter
var box = createXULElement("box");
box.setAttribute("orient", orient);
box.setAttribute("align", "left"); // Add
if (orient == "horizontal") {
box.setAttribute("width", size);
} else {
box.setAttribute("height", size);
}
var label = createXULElement("label");
label.setAttribute("class", "calendar-time-bar-label");
label.setAttribute("value", timestr);
label.setAttribute("style", "color: #4080C0; font-weight: bold;"); // Replace "align"
box.appendChild(label);
var label = createXULElement("label"); // Add
label.setAttribute("class", "calendar-time-bar-label"); // Add
label.setAttribute("value", time2str); // Add
box.appendChild(label); // Add
return box;
}
Add the following method after makeTimeBox().
function makeTime(hour) {
var h = hour % 12;
if (h == 0)
h = 12;
var s = hour >= 12 ? " pm" : " am";
var result = h + s;
return result;
}
Remove the following line which appears a few lines below makeTimeBox()
var formatter = Components.classes["#mozilla.org/intl/scriptabledateformat;1"].
getService(Components.interfaces.nsIScriptableDateFormat);
Change the following line...
var timeString;
... to be ...
var timeString, time2String;
About 25 lines lower, replace the following lines...
timeString = formatter.FormatTime("",
Components.interfaces.nsIScriptableDateFormat.timeFormatNoSeconds,
theHour, 0, 0);
box = makeTimeBox(timeString, durPix);
... to be ...
timeString = makeTime(theHour) + " MT";
ptHour = theHour - 1;
ptHour += 23;
ptHour %= 24;
ptHour += 1;
time2String = makeTime(ptHour) + " PT";
box = makeTimeBox(timeString, time2String, durPix);
I am not aware of any existing add-ons that do this, but I can tell you how it is done. First of all create a typical skeleton Thunderbird extension, in the Firefox world this is called a "legacy" extension in case you are searching for docs. It should contain an install.rdf and a chrome.manifest. I'm assuming you choose view-zones as the identifier in chrome.manifest.
Next you need to create a CSS file that will allow you to override the calendar-time-bar binding. Note that with this method there can only be one extension that overrides the binding. The contents will look like this:
calendar-time-bar {
-moz-binding: url(chrome://view-zones/content/bindings.xml#calendar-time-bar) !important;
}
This will override the time bar with your binding, which you will create in the bindings.xml file. It extends the builtin time bar, but adds some code after the relayout to add those extra labels. The CSS file needs to be referenced in the chrome.manifest file with a style directive and can extend chrome://calendar/skin/calendar-views.css. Then you will have to create the xml file for chrome://view-zones/content/bindings.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<bindings id="calendar-multiday-view-bindings"
xmlns="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="calendar-time-bar"
extends="chrome://calendar/content/calendar-multiday-view.xml#calendar-time-bar">
<implementation>
<method name="relayout">
<body><![CDATA[
this.__proto__.__proto__.relayout.call(this);
let XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
let topbox = document.getAnonymousElementByAttribute(this, "anonid", "topbox");
for (let box of topbox.childNodes) {
let timelabel = box.appendChild(document.createElementNS(XUL_NS, "label"));
timelabel.setAttribute("value", "10:00 PT");
}
]]></body>
</method>
</implementation>
</binding>
</bindings>
I've left the label static for now, but you can think of some logic that would change the "10:00 PT" to the actual time based on the other label or the same algorithm used in the actual method. You can also add classes and styling to make it look different.
That said, maybe you'd be interested in adding this feature to core Lightning instead? I think it would be a nice addition. I'm pretty sure we had a bug open for this but I can't find it at the moment, so if you are interested maybe you could file a bug and I can give you more information on how to get set up. In that case it would be a matter of changing the binding to show more than one label and adding user-visible preferences to be able to chose the timezone.
I recently started to use CKEditor, i have come across to somewhat a weird problem, i have downloaded two plugins ,the "texttransform" and "autogrow",my config file looks like this ,,,
****CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
CKEDITOR.config.extraPlugins = 'texttransform'
config.extraPlugins = 'autogrow';
};****
The problem is, at one time only one plugin is active and functionality of other plugin disappears, for example,when i added autogrow, the control buttons of texttransform disappears,and they only work when i remove the line "config.extraPlugins = 'autogrow';" from my config file, any thoughts?
You are setting the configuration incorrectly. You must set config.extraPlugins only once, with two plugin names:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'autogrow,texttransform';
};
See also the documentation.