I'm newer on vim and your forks. To have a smoother transition I'm using Lunar Vim, but I need to change some option about the formatter, for example:
How I need to format:
<img src={ item.image } alt ={ item.descripton } />
But when I save, the Vim format like:
<img src={item.image} alt ={item.descripton} />
(Without spaces)
I need to change this, or remove the auto formatter.
There are two ways to do this, you can do it with the easy way (answer of Jorge Dorino).
File: /home/user/.config/lvim/config.lua
lvim.format_on_save = true -- Disable this line
Or you can keep this line and activate the prettier formatter https://prettier.io/docs/en/options.html , and configure your own rules to html files formatting.
(You need to install prettier or prettierd before do this)
File: /home/user/.config/lvim/config.lua
local formatters = require "lvim.lsp.null-ls.formatters"
formatters.setup {
{ exe = "prettierd", filetypes = { "html" } }
}
Related
I'm using neovim and Telescope as a finder (find_files, live_grep, file_browser), by default Telescope is ignoring hidden files and files included in .gitignore - how can I add exception (e.g. .gitlab-ci file/folder) to this list? so Telescope will still ignore hidden files except .gitlab-ci file/folder?
Use default filter ignore pattern for that like that
telescope.setup {
....
defaults = {
....
file_ignore_patterns = {
"node_modules", "build", "dist", "yarn.lock"
},
}
}
I know you can find this in someone's vimrc files or telescope docs. But may help some newbies.
Telescope uses ripgrep to search through files. By default, ripgrep ignores several groups of files, including hidden files (dotfiles) and files ignored by git. Adding --no-ignore-vcs and --hidden flags will make it to search through those files.
Arguments for ripgrep can be configured via defaults.vimgrep_arguments.
In your case, to search through hidden files, which are not in .gitignore --hidden flag should be added:
require('telescope').setup{
defaults = {
vimgrep_arguments = {
'rg',
'--color=never',
'--no-heading',
'--with-filename',
'--line-number',
'--column',
'--smart-case',
'--hidden',
},
}
You can always test the command from the terminal before changing the Telescope configuration:
rg ... --hidden <search string>
As --hidden will enable search through all hidden files, you might want to look into .ignore or .rgignore files. They tell ripgrep which files to ignore during search. See ripgrep's documentation for more info.
After several weeks of intense reading and testing, I have found the for me easiest solution here.
In order to find HIDDEN FILES, I have added the following lines to
.config/nvim/init.vim
nnoremap fff <cmd>Telescope find_files <cr>
nnoremap ffh <cmd>Telescope find_files hidden=true<cr>
When yo launch Neovim UI, pressing fff pops up the Telescope find_file screen, and when you press ffh, you can search for HIDDEN files.
To search for hidden files in LIVE_GREP, the work was a bit more difficult.
From my perspective, the most elegant solution is to first create the following file : .config/nvim/lua/find_hidden.lua
Inside goes :
local telescope = require("telescope")
local telescopeConfig = require("telescope.config")
-- Clone the default Telescope configuration
local vimgrep_arguments = { unpack(telescopeConfig.values.vimgrep_arguments) }
-- I want to search in hidden/dot files.
table.insert(vimgrep_arguments, "--hidden")
-- I don't want to search in the `.git` directory.
table.insert(vimgrep_arguments, "--glob")
table.insert(vimgrep_arguments, "!**/.git/*")
telescope.setup({
defaults = {
-- `hidden = true` is not supported in text grep commands.
hidden = true,
vimgrep_arguments = vimgrep_arguments,
},
pickers = {
find_files= {
hidden = true,
-- `hidden = true` will still show the inside of `.git/` as it's not `.gitignore`d.
find_command = { "rg", "--files", "--hidden", "--glob", "!**/.git/*" },
},
},
})
----- This activates the search for hidden files in live_grep
require("telescope").setup {
pickers = {
live_grep = {
additional_args = function(_ts)
return {"--hidden"}
end
},
},
}
The add the following the following lines to your init.vim :
:lua require('find_hidden')
nnoremap gre <cmd>Telescope live_grep <cr>
To sum it up: with the find_hidden.lua file and the following lines in your init.vim, you can easily search for hidden and non-hidden files both in telescope_find_files and telescope_live_grep :
:lua require('find_hidden')
nnoremap fff <cmd>Telescope find_files <cr>
nnoremap ffh <cmd>Telescope find_files hidden=true<cr>
nnoremap gre <cmd>Telescope live_grep <cr>
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
// }
},
I have VSCode 1.20.1 installed with Beautify by michelemelluso. When we format LESS files, how do we keep // comments on their own lines rather than bumping up to previous lines. The following happens in my LESS files...
unformatted
.demoa {
text-align:left;
}
//Comment
.demob {
text-align:right;
}
formated
.demoa {
text-align:left;
}//Comment
.demob {
text-align:right;
}
Thanks for any tips!
I had a similar problem. Try adding the following settings to your .jsbeautifyrc file and see if it works:
"max_preserve_newlines": 10,
"preserve_newlines": true,
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.
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