Sublime Text 2 Code Formatting - sublimetext

First let me say I come from a Microsoft background and Visual Studio is my bread and butter. It has a command (keybind is arbitrary) that auto-formats any code syntax. The same command works in HTML, CSS, Javascript, C#, etc.
I have tried plugins for ST2 and so far I've found most don't work on a Windows box and if they do, it's for a very specific purpose like just Javascript.
I have tried (and opened Issues where appropriate):
https://github.com/victorporof/Sublime-HTMLPrettify
https://github.com/jdc0589/JsFormat (this one actually works)
https://github.com/welovewordpress/SublimeHtmlTidy
Have any Windows users of ST2 found anything that works to format CSS/HTML/Javascript, preferably in one shot?
Edit: Since this question is getting lots of views with no activity, I'll say that I am still looking for a plugin that can format various script types within the same command.
October 2013
Still haven't found anything that covers JS+CSS+HTML well however I have settled on JsFormat as by far the most effective and bug free with the least amount of configuration for just JavaScript.

A similar option in Sublime Text is the built in Edit->Line->Reindent. You can put this code in Preferences -> Key Bindings User:
{ "keys": ["alt+shift+f"], "command": "reindent"}
I use alt+shift+f because I'm a Netbeans user.
To format your code, select all by pressing ctrl+a and "your key combination". Excuse me for my bad english.
Or if you don't want to select all before formatting, add an argument to the command instead:
{ "keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false} }
(as per comment by #Supr below)

Sublime CodeFormatter has formatting support for PHP, JavaScript/JSON/JSONP, HTML, CSS, Python. Although I haven't used CodeFormatter for very long, I have been impressed with it's JS, HTML, and CSS "beautifying" capabilities. I haven't tried using it with PHP (I don't do any PHP development) or Python (which I have no experience with) but both languages have many options in the .sublime-settings file.
One note however, the settings aren't very easy to find. On Windows you will need to go to your %AppData%\Roaming\Sublime Text #\Packages\CodeFormatter\CodeFormatter.sublime-settings. As I don't have a Mac I'm not sure where the settings file is on OS X.
As for a shortcut key, I added this key binding to my "Key Bindings - User" file:
{
"keys": ["ctrl+k", "ctrl+d"],
"command": "code_formatter"
}
I use Ctrl + K, Ctrl + D because that's what Visual Studio uses for formatting. You can change it, of course, just remember that what you choose might conflict with some other feature's keyboard shortcut.
Update:
It seems as if the developers of Sublime Text CodeFormatter have made it easier to access the .sublime-settings file. If you install CodeFormatter with the Package Control plugin, you can access the settings via the Preferences -> Package Settings -> CodeFormatter -> Settings - Default and override those settings using the Preferences -> Package Settings -> CodeFormatter -> Settings - User menu item.

I can't speak for the 2nd or 3rd, but if you install Node first, Sublime-HTMLPrettify works pretty well. You have to setup your own key shortcut once it is installed. One thing I noticed on Windows, you may need to edit your path for Node in the %PATH% variable if it is already long (I think the limit is 1024 for the %PATH% variable, and anything after that is ignored.)
There is a Windows bug, but in the issues there is a fix for it. You'll need to edit the HTMLPrettify.py file - https://github.com/victorporof/Sublime-HTMLPrettify/issues/12

Maybe this answer is not quite what you're looking for, but it will fomat any language with the same keyboard shortcut.
The solution are language specific keyboard shortcuts.
For every language you want to format, you must find and download a plugin for that, for example a html formatter and a C# formatter. And then you map the command for every plugin to the same key, but with a differnt context (see the link).
Greets

Related

ctrl+f2 keyboard shortcut does not work in VSCode on macOs

I have ctrl+f2 mapped to toggle bookmark in my vscode keyboard shortcuts.
{ "key": "ctrl+f2", "command": "bookmarks.toggle", "when": "editorTextFocus" },
It work correctly on Linux and Windows, but not on macOs.
I have enabled the setting to switch function keys (f1, f2, etc) to behave as standard function keys.
I have then unmapped ctrl+f2 in macOs keyboard shortcut settings.
But still ctrl+f2 keyboard shortcut is not registering with vscode.
Troubleshooting VS-Code Keybinding Issues
The best way to troubleshoot an issue with Keybindings in V.S. Code is to use the tool that was created for solving keybinding issues
The tool is simply named: "Keyboard Shortcut Troubleshooting Tool"
The tool comes with V.S. Code "out of the box", as a result; no downloading, or installation is needed. To use the tool you just activate it from the Quick Input Menu that drops open by pressing the F1-Key. If you cannot find it your self I posted instructions below, and an image. If you can find it yourself, then skip the "Activating the Troubleshooting Tool" Section, and go ahead and read, "Effectively Troubleshooting Issues with the Troubleshoot Keyboard-Shortcut Tool"
Activate V.S. Code's Troubleshooting Tool
Hit the F1-Key
When the quick input drops open type the following into the text input:
"Toggle Keyboard Shortcuts Troubleshooting"
Select the option: Developer: Toggle Keyboard Shortcuts Troubleshooting
It should automatically open the OUTPUT panel, which is located in the same panel that your terminal is. Make sure that the OUTPUT is set to LOG(Window) in the drop down. (I took a picture and posted it below if you can't find the Keyboard Shortcut Troubleshooter).
The image might have funny declensions because I am on a dual monitor setup with 1 1080x1920 curved screen and one 1080x720 screen.... I cropped it to a STD HD 1920 width.
HELPFUL SIDE NOTE:
"This tool may be the most verbose program ever written, as far as I can tell, it logs data to the OUTPUT Console each & every time you activate a keyboard event. Truth be told, I find this tool to be extremely distracting, and very annoying. Because of this, it is important to note, that even if you switch out of your OUTPUT console to your terminal or something. The Troubleshooter is still actively logging to the OUTPUT Console. Make sure when you are finished to turn it off."
Turning off the Keyboard Troubleshooter, requires the same process as turning it on.
Using V.S. Code's Troubleshooter
STEP-1: Close VS Code
This is not to be confused with reload V.S. Code. The only mechanism that VS-Code has for reloading its-self, doesn't provide the same functionality as closing, and reopening V.S. Code. The two are similar, but they are not equal (discussion for another time).
actually stop its process from running by hitting the X in the upper right corner of the title-bar, or hit
**[Alt + F4].
Step-2: Reopen V.S. Code W/O Any Extensions
Don't worry, you won't have to uninstall anything. You will start V.S. Code from the command-line though. Open up your bash terminal, or Powershell, and enter the following command:
$ code --disable-extensions
V.S. Code should start almost immediately
If the V.S. Code CLI doesn't open your editor, or this doesn't disable your extensions, you should refer to this link
Step-3: Start the Keyboard Shortcut Troubleshooter
I already explained this step above, so their is no reason to go over it again. Do make sure you have your panel open, and the OUTPUT tab is selected. You should see a bunch of logging being output, in the VS-Code output (that is redundant sounding), logging when you use any keybinding. The drop-down should have Log(Window) showing, as the current log selected.
Step-4: Test Your Keybinding
At this point you can use your keybinding, and get results. They might not be the results that you were hoping for, but the troubleshooter should give you details as to what is happening when you use your keyboard shortcut (aka bound-key, aka key-binding).
Step-5:
Fix the issue by opening the Keyboards Shortcuts configuration file by opening the quick input, (like I described above for the troubleshooter), and type Keyboard Shortcuts. Their will be two options, one is the default Keybindings that cannot be written too, the other is a configuration file, where you are allowed to overwrite all of the default keybindings if you choose. Look in the default keybinding.json file and make sure the keybinding that you feel is assigned to a certain task, really is assigned to it. Look in the regular keybindings.json file, and make sure if anything is written in it, that those keybindings are not affecting the keybinding that is not working for you. Use the information from the troubleshooter to help guide you through the process.
These links below further elaborate on V.S. Code keybindings:
V.S. Code Community Docs (Community Contributed)
V.S. Code Official Docs (Keybindings)

How to change UI language in Visual Studio Code?

How to change UI language in Visual Studio Code (1.0 released April 2016)?
Open VScode
Press F1 and type 'display'
Choose 'Configure display language'
Select your language. On top are installed languages, below are other languages. The one you select will be installed as an extension.
Accept to restart.
you can see that the language you choose has been added to the extensions by selecting 'extension' icon on the left toolbar (look for 'xxx language Pack')
More info Here
Previous original answer (for older vscode):
Open VSCode
Press F1 and type 'language'
Choose "Configure language" in the menu
Change the 'locale' value. See 'here' for available languages.
Example: "locale":"en-US"
Save
Restart vscode
Since my Chinese (or whatever language this is in your screenshot) is pretty bad I describe how to set the display language to american English without using VSCode.
Close VSCode
Open the file locale.json with a text editor (I suggest not to use VSCode).
On Windows the file is located under C:\Users\UserName\AppData\Roaming\Code\User
On Linux it's under $HOME/.config/Code/User
On a Mac it's under $HOME/Library/Application Support/Code/User
Change the file content to
{
"locale":"en-US"
}
Open VSCode again
See "Display Language" https://code.visualstudio.com/docs/getstarted/locales
I had trouble with this and the answer from Eric Bole-Feysot did not help as it is missing an important step.
Open VS Code
Press F1
Type "configure display language"
Select "configure display language" from the options displayed beneath the inputbox
Change JSON to
"locale": "en-US"
Close window and be prompted to save.
Re-start VS code
Hope that helps.
For Windows user,
Go to following folder,
C:\Users\UserName\AppData\Roaming\Code\User
Edit locale.json or create it, if not exist with following content
{
"locale":"en"
}
Supported locales can be found in the following links
https://go.microsoft.com/fwlink/?LinkId=761051
Cheers
Preferences->Extension
search "LanguageName Language Pack"
(example) "English Language Pack"
Install
Please refer to VSCode Display Language.
Change language for temporary folder
click: File->Preferences->Settings, User seting json file will open and add " "locale"="en" ", save the file and restart.
Or you can use a command: >>> code . --locale=[lang] (lang refer to language code)
Permanently change language
Press Ctrl+Shift+P to bring up the Command Palette then start typing "config" to filter and display the Configure Language command. Add " "locale"="en" " into the Jason file, save and restart
In Visual Studio Community for Mac 7.0 go to
Settings->Visual Style->User Interface Language
For mac OS user:
At $home/Library/Application Support/Code/User,
create a new file with name "locale.json" (it wasn't there for me), and type:
{
"locale": "en-US"
}
Worked for me. The latter part is the same to others' answer I guess, just there wasn't "locale.json" for me so I tried creating it myself, found it worked.
As a Ubuntu user, the only option that seemed available to me was to start Visual Studio Code at the command line, explicitly specifying the language:
code --locale en
(The interface had been in French, due to the language I'd applied for my operating system. I'm trying to learn French, but having VSCode in French was a bit much, I still need to earn money writing software 😛)
https://code.visualstudio.com/docs/getstarted/locales

is it possible to map Vim key bindings for windows, just like vimium for chrome

is it possible to map Vim key bindings for windows? just like vimium for chrome. I don't like the mouse sometimes.
using vimium, I can press 'f' to generate 'names' for the link, and just press the name to open the link, it's awesome!
This is an AutoHotKey script that implements some of the vim functions in all applications.
Also LabelControl provides some label support, like vimium, but it's not always that useful.
you can use hunt-n-peck .
you should download binaries from continous integration artifacts.
this is the hunt-n-peck binaries zip link HuntAndPeck taken from repository's continuous integration artifacts.
I don't know about any existing tool, but macro tools like AutoHotkey allow to implement that. For a purely modal solution like in Vim, you'd need to save the mode state (and probably also indicate it somehow), which is difficult. Creating vim like functionality with autohotkey ahk outlines a solution (for navigation) that relies on another simultaneously pressed key instead.
To answer the stated question: Yes, and there exists several, but they have limitations. The best way that I know of is using AutoHotkey, which can be used to add several of Vim's features.
Due to how Vim commands work, it is only partially possible, as implemented in several forms. For several examples you can search for e.g. "autohotkey vim".

Sublime Text 2 - Key Binding for Open Recent?

How can I map Open Recent, or "open last file" to a keyboard shortcut?
This is my pitiful attempt so far:
{ "keys": ["super+shift+r"], "command": "open_recent"}
I tried looking at the console (Ctrl-`) while using Open Recent but it doesn't display anything.
In general, how does one go about adding key bindings? And is there a more appropriate place that Stack Overflow for this question?
Thanks!
Key bindings should be added to the User key-binding preferences. Adding to the default settings will also work, but the settings will be overwritten when a new version of Sublime Text 2 is installed.
Your attempt matches the general structure of a Sublime Text key-binding, but "open_recent" isn't a valid command. From what I can find in the documentation, I think the Open Recent menu keeps track of the different file names then calls open on whichever file is selected, instead of calling an open_recent command.
If there isn't a way to get the name of the most recent file, you could probably write an extension that kept track of the most recent file and then opened it, but that probably be a fairly kludgy solution.
The command is reopen_last_file. So you should add something like this:
{ "keys": ["ctrl+shift+r"], "command": "reopen_last_file" },
Little PS: I'm using ctrl+shift+t, so that the shortcut for reopening the last document is consistent across my browser, IDE and editor.
I suggest you try out a couple of packages:
https://github.com/spadgos/sublime-OpenRecentFiles
or:
https://github.com/paccator/GotoRecent
And the easiest way to install them is with this package control, package:
http://wbond.net/sublime_packages/package_control/installation
That should give you what you want...

Is there a Firefox add-on to use vim to edit textboxes?

or "How do I answer questions on SO in Firefox using gVim inside the textboxes?"
It's All Text!
From the extension page:
At the bottom right corner of any edit
box, a little edit button will appear.
Click it. If this is the first time
you've used "It's All Text!" then you
will be asked to set your preferences,
most importantly the editor.
The web page will pop up in your
selected editor. When you save it,
it'll refresh in the web page. Wait
for the magic yellow glow that means
that the radiation has taken effect!
Vimperator makes Firefox act very much like VIM:
Vimperator is a free browser add-on for Firefox, which makes it look and behave like the Vim text editor. It has similar key bindings, and you could call it a modal web browser, as key bindings differ according to which mode you are in.
Once you have the cursor in a text box, hit Ctrl-I to open in your editor, which defaults to gvim.
The current answers don't work anymore now that Mozilla removed XUL in favour of WebExtensions. With recent firefox versions, there are the following options (sorted in descending order by the current popularity on addons.mozilla.org).
GhostText provides instant synchronization between editor and textbox via editor-specific plugins. The project is on github and the vim extension is written in Tcl.
withExEditor is cross-platform but requires a native application written in node.js. In addition to editing text fields it also allows viewing the source of the page, MathML, SVG and the current selection. The project on github and the native node.js application
Textern requires a (currently) Linux-only native application written in Python. Synchronizes the content of the text field while you type in the editor. The extension and the native app can be found on github
Tridactyl is probably what you're looking for nowadays.
It's the spiritual successor to the likes of Pentadactyl and Vimperator, which are not available for the current version of Firefox.
If you want something more like It's All Text, where the editing area appears right on top of the browser text area rather than launching an editor window, and you're willing to use Neovim, check out firenvim.
It's All Text! will let you use whatever editor you want. To use vim with it, you'll need a small shell script to open it in a terminal:
#!/bin/sh
exec xterm -e /usr/bin/vim "$#"
If you have GVim, you won't need the shell, script, obviously.
ViewSourceWith is another addon worth lookng at. It supports more than just edit boxes and text. For example, you can configure it to open images in the GIMP.
Another feature that I find useful is that it can pop-up a dialog box that shows all the js and css scripts used on the page. You can then choose to view/edit file in your preferred editor.
For answering questions on SO, you may also want to get the Vim Markdown Syntax file
The "It's all Text" extension, perhaps?
http://addons.mozilla.org/en-US/firefox/addon/4125
If you use vimperator and have the markdown syntax file installed, a useful line for your .vimperatorrc is:
au LocationChange .* :set editor="gvim -f"
au LocationChange stackoverflow\.com :set editor="gvim -f -c 'set ft=mkd'"
This will tell vim to do syntax highlighting for markdown when you are on stackoverflow.com, but not when you are any other site. There are similar hacks for wikipedia/mediawiki etc. Enjoy :)
One way to do this is to use the vimperator extension - of course, that does a lot more than what you're looking for.
At the time of writing it is experimental, but the jV extension looks good. To quote from the page:
This extension makes all html textareas into a very stripped-down version of Vi[m]. It's modal, supports infinite undo, has register support, search, visual mode, and various movement and editing commands.
When using Vimperator in Windows (I am using Vista) you may need to double-escape the path to gvim.exe to use it as the external editor. Single escaping did not work for me as Vimperator unescapes it twice. Eg:
:set editor="C:\\\\Program\\ Files\\ (x86)\\\\Vim\\\\vim72\\\\gvim.exe" -f
Then while in a text box you use Ctrl+I and it will open gvim for editing. When you save and exit it will update the text box.
There is an experimental way to directly embed the real vim in firefox using embedded editor - though it requires mozplugger and will only work on Linux.
Try out the wasavi extension. You might want to check out the all versions page to make sure you try out the latest version. (Copy of this answer.)
You can also use the ViewSourceWith addon to achieve the same. Just right-click on any text input and you can edit it using Vim.
As said by others,
as a Vi/(g)Vim user you'll probably want to look at the Vimperator addon, which also provides the what you ask:
inside a textbox, hit <C-i> to launch the external editor.
(can be defined in _vimperatorrc: set editor=gvim -f )
A hint for Mac users: if you want to use "It's all text" with vim, the easiest way is to use http://code.google.com/p/macvim/ . Point "It's all text" to the mvim script that's provided along with the .app (you can place this script anywhere, I choose /usr/bin/ so that I can load mvim from the command line)
Pterosaur is a Firefox plugin that allows you to use Vim in all input fields. It uses an actual Vim process in the background so it has all the functionality you expect, including reading your .vimrc configuration and your plugins.
With Firefox-57 on Linux, I installed textern https://addons.mozilla.org/en-US/firefox/addon/textern/, and found it to be a suitable replacement for ViewSourceWith for editing text boxes.

Resources