vscode change javascript indent size - javascript

I'm wondering if there is a way to change the indent size when formatting javascript in VSCode.
I found this
git commit that adds quite a few formatting options for JS but I don't see any ability to change indent size.
Anyone know of a way to do this?
--Edit--
I have already tried to change the indent size at the bottom of the editor.
Toolbar Image (can't embed images yet...)
I have also tried changing the detect indentation setting.
"editor.detectIndentation": false
But when I format it still uses two spaces.

I use a plugin called JS-CSS-HTML Formatter. It does exactly that, the ability to change editor settings for different file types.
https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter

Related

Is it possible to edit the font-family of tooltips on a browser?

rikaikun (with symbol 理 at the top right corner) is Chrome's addons to show the description of a word being highlighted.
Question
Unfortunately rikaikun does not show the stroke order of the Kanji characters. As the stroke order is important, if possible, I want to hijack it, change the font-family to KanjiStrokeOrders font (available here).
Is it possible to do so? How?
If that were actually a tooltip, the answer would be "no". Tooltips are rendered by the OS, and do not support any formatting.
However, what's shown in the picture isn't a tooltip! It's an HTML element injected into the document by the extension. It clearly already has some CSS styling applied to it (e.g, coloring certain words), so I see no reason why you couldn't extend that.

How to determine font-weight bold without using getComputedStyle

I'm in the process of making an HTML text parser and I would like to be able to determine when a text node appears as a header (visually, not HTML headers).
One thing that can usually be said about headers are that they are emphasized - usually in one of two ways: Bold font or larger font size.
I could get both corresponding CSS values using getComputedStyle(), but I want to avoid this because the parser needs high performance (has to run smoothly on, for example, Chromebooks) and getComputedStyle() is not particularly fast when looking through hundreds or thousands of nodes.
Figuring out a font size isn't too hard - I can just select the node with range and check its client rects from range.getClientRects().I haven't figured out a smart way to check font weight though, which is why I'm here.
Can anyone think of higher-performance way of doing this than by using getComputedStyle()?
I'm aware this might not be possible - just looking to see if someone can think of an ingenious way to solve this problem.
Edit
This is for a Google Chrome extension only.
What you're aiming to do here is really messy. Since you want to determine if text is bold visually, on some devices, depending on how they render text, the whole system may just break!
A suggestion I have is to use the HTML5 Data atrributes - find out more here - and use it like so:
<div class="header" data-bold="yes">This will appear bold?</div>
Then, using JavaScript you can just go over all div elements with the data-bold attribute.
I hope this helped ;)

JavaScript colorscheme in vim?

I am using the Mac OS X terminal.
Most of the default color schemes I try in vim use terrible red colors for my JavaScript code.
Most of the code appears red. Does anyone know how to set the colors for JavaSript files in vi?
Whatever you do with custom syntax files and colorschemes will be useless if you don't tweak the color settings of Terminal.app and/or switch to iTerm2 or MacVim.
Most colorschemes are made for the GUI versions of vim or for vim running in a terminal that supports 256 colors.
Terminal.app only supports 16 colors and the basic colors are horrible, you can tweak them with TerminalColoreopard but you still have only a very limited palette to work with when tweaking your colorscheme.
So, that's one part of the problem.
Another one is probably that your document's filetype is set to html which prevents you to have good JS syntax highlighting and proper omni completion. You can change that by typing :set ft=html.javascript.
The last part of your problem is that you use inline JavaScript.
--- EDIT ---
It's 2016, now, and Terminal.app has no problem whatsoever displaying 256 colors so there's no need for that "TerminalColoreopard" hack anymore.
--- ENDEDIT ---
I've modified 2 files to fit my javascript workflow.
Yi Zhao's Javascript syntax: I've added AJAX, DOM keywords, methods and others.
ir_black: I called it Nazca, and it has some lines combined with with my syntax makes the js files look a lot better than the stock syntax.
Please check them out, they are not perfect but if you can fix it, add more features, please share.
UPDATE: Modification to your colorscheme is no longer required since the new version of the script hilinks all the new introduced highlights to existing keywords. Follow it in github
This question is a lot like this one:
Javascript syntax highlighting in vim

how can I get my text area to auto format text

I want to know how to make a text area in a browser into a programmers text editor.
For anyone that uses textmate -- I basically want it web-based.
for anyone that uses notepad++ -- same idea as above.
I know how to make a text area
using html.
what I dont know is how to tag the text areas.
for instance. in notepad++ and textmade, I can insert the <> tags and it will highlight the text blue.
How can I achieve this, live, in a browser.
I already know how to parse it after the text has been posted.
I want it to be parsed while the user is typing it.
EditArea is pretty good.
In addition to EditArea there's CodeMirror and Mozilla's Bespin
EDIT: I misunderstood the question a little. Jump to ORIGINAL ANSWER if you are curious.
EDIT2: My answer is how to provide SYNTAX HIGHLIGHTING (what is specified in the question itself). Highlighting individual characters unrelated to the syntax requires trivial javascript. This is also distinct from 'auto format' which is commonly interpreted to mean 'adjust my indent levels so it all looks good'.
This is a difficult task, but not as impossible as it seems. Once again, TextMate comes to our rescue but in a different fashion.
In TextMate, open the bundle editor and look at the language definition for HTML. Those are regexes that process the document and assign a 'scope' to each piece.
'Simply' parse that language definition format into the various components, and then use the regexes themselves like TextMate does to assign a scope/color. Piece of cake, right? :)
I would personally start with the most lightweight open source rich text editor you can find, then hack it into that. Or ya know, whatever floats your boat.
I hope that gave you some good ideas.
ORIGINAL ANSWER:
For Firefox, you can install the plugin 'It's All Text' from here:
https://addons.mozilla.org/en-US/firefox/addon/4125/
It works for me with 3.6.12. Set the path in preferences to TextMate (or whatever), and optionally set a hotkey or adjust the other settings to your liking. Be default, when your cursor is over a Textarea, a small button saying "Edit" will appear and open the contents of the Textarea in your editor. Saving will put the data back into the Textarea.
I hope this helps.
JSMinNpp plugin just for javascript auto-formatting
http://sourceforge.net/projects/jsminnpp/

HtmlEditor and increase/decrease font size with Midas commands

I came across some cross-browser weirdness while trying to integrate the ExtJs HtmlEditor into our project:
If you decrease/increase the font size in Firefox3.6, it wraps the selected text in a '' tag with a size attribute (e.g. 'visitor'). If you do the same in Chrome6 or Safari4, it wraps it into a '' tag with 'style=font-size...' attribute ( e.g. 'visitor'). Therefore, once you change the font size in Firefox, you won't be able to modify it in Safari or Chrome and vice versa.
This is done by the browser's Midas engine (as documented here: http://www.mozilla.org/editor/midas-spec.html). The implementation calls:
document.execCommand('FontSize', false, value); // value is the font size as a numeric value
So, there is not much I can change about it. I was about to write my own implementation of the font size changer, but after I went down the route I recognized that that would be a rather complicated implementation.
Has anyone else encountered that problem? Are there any good solutions for this one?
As long as you will save the source somewhere on a server, i would like to recommend to leave the editor as is.
On the server-side you normally will validate the source, so the validation will be a good time to transform the source to a unique style.

Categories

Resources