I am using the awesome vim-go plugin for coding in Go with vim. (https://github.com/fatih/vim-go)
The feature that I love is the auto-indent on save. I'd like to get the same behavior for javascript files. Do you know any way to easy replicate this in js?
Many thanks
You don't even need a plugin to auto indent in vim. As soon as you open the file in vim, press these keys:
gg
Your cursor should move to the beginning of the file. And then type this:
=G
which is basically saying, "remove trailing spaces from the cursor position to the end of the file". Happy coding!
There exists a general autoformatting plugin for vim called vim-autoformat which integrates the js-beautifier (the engine behind the online application http://jsbeautifier.org/) and more.
It provides an :Autoformat command, which you can bind to the BufWrite event like so
au BufWrite * :Autoformat
EDIT
For if you're only interested in indenting your file (not full-fledged formatting): vim-autoformat falls back to auto indenting your file if js-beautify is not installed.
Related
I prefer my own style of code formatting as opposed to Visual Studio's default settings. I've turned off auto-formatting options in Tools→Options. In most cases, it works.
However, after using any of the built-in refactorings, Visual Studio clobbers my settings with its default settings. How do I keep VS from doing that?
I had this problem while writing VB in an aspx page.
The solution was to go to 'Tools > Options > Text Editor > Basic > VB Specific' and turn 'Pretty Listing' OFF.
Note - in Visual Studio 2015 this can be found at:
Tools > Options > Text Editor > Basic > Advanced
Disable pretty listing. It is the option that re-formats what you are doing. I had the same discomfort with it and after doing it, my code stays how i want and it doesn't go back to previous settings.
As suggest by #TheMatrixRecoder took a bit of finding for me so maybe this will help someone else.
Unitick these options to prevent annoying automated formatting when you places a semicolon or hit return at the end of a line.
You might have had Power Tool installed.
In this case you can turn it off from 'Tools > Options > Productivity Power Tools > PowerCommands > General'
In my case, it was ReSharper.
Test if ReSharper
StackOverflow: How can I disable ReSharper in Visual Studio and enable it again?
Prevent ReSharper from reformatting code
StackOverflow: Is there a way to mark up code to tell ReSharper not to format it?
Update 2017-03-01
It was ReSharper in the end:
Update 2020-12-18
On the latest version of ReSharper, there are more options: untick everything on this page, and ensure all dropdowns are set to the equivalent of None.
ReSharper "typing assist" is like a 3-year-old trying to "help" build a card castle. A simple backspace or an enter key will (poorly) reformat entire blocks of code, requiring it to be undone or painfully formatted back to the original.
And if that is not enough, this is the bit that adds delays when typing so sometimes it feels like trying to run in skis.
The reformat on semicolon or closing brace cannot be turned off. I find it infuriating the Microsoft would have the temerity to tell anyone how to format code; the most illegible code I have ever seen was while working there.
I want adjacent assignments to be vertically aligned; VS reformats them to one space on either side of the equal sign irrespective of the length of the variable on the left. This is intolerable. And turning it off on the editor options is ignored; given comments like the opener above I am certain this is deliberate.
Consistency is only a virtue when it leads to desirable outcomes. This is not one.
VS2015 settings that helped me prevent auto formatting:
(and Tools > Options > Text Editor > Basic > Advanced, just like Tango91 suggested)
In VS2017 you can change it after selecting your coding language in the settings menu. There is an option called "new Lines" in the "Formatting"-submenu.
I see that many answers here solve the problem for a specific situation.
For my situation I continually found that the IDE would automatically format JavaScript code within an ASP page.
To disable, I unchecked this box:
In addition, I found it very helpful to use the search query in the toolbar (CTRL+Q) and just search for the text format on paste. As you can see with the scroll bar, there are quite a few options to check!
I doubt that you can disable re-formatting after refactoring. Refactoring changes code and since it's only text I doubt what you'd want is that it just dumps unformatted text into your source. Wouldn't it be a little easier to just set the code style VS adheres to to the style you like and follow?
Follow TOOLS->OPTIONS->Text Editor->CSS->Formatting
Choose "Compact Rules" and uncheck "Hiearerchical indentation"
It can be the case of Clang Format.
Previously, the entire file is automatically formatted on file save, and it drove me nuts (for the repositories which Clang Format is not enabled).
Such behavior is gone after turning "Tools -> Option -> LLVM/Clang -> ClangFormat -> Format On Save -> Enable" to False.
I was pissed off every time I pasted anything in cshtml file in Visual Studio 2015, 2017. I tried different settings and finally found the proper one:
Options => Text Editor => HTML => Advanced => Paste (Format on paste) => False
You can tweak the settings of the code formatting. I always turn off all extra line breaks, and then it works fine for how I format the code.
If you tweak the settings as close as you can to your preference, that should leave you minimal work whenever you use refactoring.
In addition to Tango's answer for the actual solution, there may be people actually want to stay current with auto-formats but not have it screw up your relevant changes. I would suggest that you modify the file to have auto-format activate, check in those changes, then proceed with the actual changes you wish to make.
That way your code can stay up to date, but your check in will be relevant.
You might need to check on Tools-> Options-> Xaml Styler -> Format xaml on save
On the navigation options at the top select "Tools" and then select "Manage Extensions".
I had CodeMaid, Visual Assist, and Rosalyn installed. Seems like an update start to cause these auto formatting issues. I disabled them and do this fixed it.
I recently added TinyMCE 4.0b2 to a web application I've been developing.
I needed to have visual aids turned on for editing, however turned off when printing and spent a fair amount of time looking for a solution through their forums, StackOverflow and google to no avail!
So... I decided to investigate the issue myself!
To get this to work I had to manually 'adjust' the print command of the print plugin.
The following fix applies to TinyMCE v.4.0b2, the version available at time of writing; it may or may not work with previous and future versions of TinyMCE.
The print plugin file can be found in the js/tinymce/plugin/print/ directory.
Open the plugin.min.js file in your favourite editor and you'll see something like this:
tinymce.PluginManager.add("print",function(e){e.addCommand("mcePrint",function(){e.getWin().print();}),e.addButton("print",{title:"Print",cmd:"mcePrint"}),e.addMenuItem("print",{text:"Print",cmd:"mcePrint",icon:"print",shortcut:"Ctrl+P",context:"file"})});
After poking around the tinymce source code I found the hasVisual editor property and mceToggleVisualAid command. I then added these two to the printing plugin as
if(e.hasVisual){e.execCommand("mceToggleVisualAid");}
just prior to the code calling
e.getWin().print();
The finished product looks like so:
tinymce.PluginManager.add("print",function(e){e.addCommand("mcePrint",function(){if(e.hasVisual){e.execCommand("mceToggleVisualAid");} e.getWin().print();}),e.addButton("print",{title:"Print",cmd:"mcePrint"}),e.addMenuItem("print",{text:"Print",cmd:"mcePrint",icon:"print",shortcut:"Ctrl+P",context:"file"})});
I hope this helps someone struggling with this issue in future.
I seem to run into this randomly. It usually displays the file normally, but sometimes it's all scrunched onto one line. I can't figure out what's causing it.
N.B.: In the current version of Chrome, this is actually done by clicking on the {} icon ("pretty print") on the lower left of the developer tools pane.
Ah, figured it out. The line endings on the problem file got set to Mac format somehow, while the rest of the files were Windows format. Not sure how the format swapped but it's easy to convert back (in Notepad++ just go Edit -> EOL Conversion).
You already answered your own question, but this is a good place to note that Chrome (as of v12, currently in dev channel) has a built-in pretty-print function that can make quick work of the typical one-line JavaScript files that all well-behaved websites generate. In Web Inspector's Scripts tab, select a file via the usual dropdown, and right click on the source code. Selecting "De-obsfucate Source" will format the file in a reasonable way, and even allow you to set breakpoints inside the newly reformated code. It's quite helpful.
I'd like to use 2 spaces for my indents instead of 4. I can change the default behavior of C mode using:
(setq c-basic-offset 2)
How do I change this in javascript mode?
js-indent-level can be used in the default javascript-mode, which is included by default starting in emacs 23.2.
(setq js-indent-level 2)
should do what you're looking for. If you're using an older version of emacs, you may be in java-mode. I think this mode responds to c-basic-offset, however I may be wrong.
I wish someone had told me about Custom a lot sooner! Perhaps this will help another mere mortal like me ;)
Invoke Custom:
M-x customize
Then, choose "Programming," and then "Languages," and then select a language/mode to customize. Edit the options as you see fit. When done, choose either "Save for current session" or "Save for future sessions."
If you're using js2-mode (which is more powerful IMHO), then the command is:
(setq-default js2-basic-offset 2)
Source.
You might also want to set emacs to use spaces instead of tabs
(setq-default indent-tabs-mode nil)
You can also use
M-x customize-variable
and type
js-indent-level
(js- [TAB] shows a list of options). Then change the Js Indent Level as wanted and click [State:] and save.
In my javascript.el file (/usr/share/emacs/site-lisp) I found
javascript-indent-level 4
So if you are using the same lisp-mode you can change it by running
(setq javascript-indent-level 2)
Using EditorConfig could be a good idea too. And of course, Emacs had a mode for it editorconfig-emacs.
It's also available in the package manager (M-x package-list-packages) through Melpa or Marmalade.
If you want to change it on a per-file basis, put this at the top of your file:
// -*- mode: js; js-indent-level: 2; -*-
None of these solutions worked for me after upgrading to Emacs 26 (I already had js-indent-level set to 2 but my tab width went back to 8), but what did work was setting the tab-width variable to 2, which seems to replace the old default-tab-width variable.
I found this in M-x customize by searching for tab width.
My problem is somewhat strange. I have started developing a web page with Aptana Studio build 2.0.5.1278522500. Everything went fine up to the moment when I wanted to start writing JavaScript in a separate .js file - there's no code assist for it. In the preferences it's enabled, and - that's the strange part - it works perfectly well in the .html files (when typing code in the script tag). The only thing that could remotely tell there's something wrong is the fact, that when I type, say, "document" and hit the '.' key, the cursor disappears for a split of a second.
Did anyone have the same problem? Is there any solution to that? I'd like code assist for JS very much, without it Aptana somewhat loses it's appeal.
As CodeMonkey mentioned we can do the same at Aptana Stuidio version 3. I mean follow this path: (Preferences->General->Editors->File Associations). Select js at top list but because at studio 3 we should select JavaScript Source Editor as default. It did not work change it to another option save and again bring it back to JavaScript Source Editor (It happened for me). Now you can use it.
I found an answer to my question, I'll post because maybe it'll help someone. To get the code assist working I just changed file the default editor for .js files from JavaScript editor to Aptana JS editor (Preferences->General->Editors->File Associations, then selected *.js in the top list and Aptana JS Editor in the bottom list, then clicked the "Default" button). Now it works like a charm.
I got a similar problem on Aptana 3 Studio. I cannot reproduce the problem now and there is no option for Aptana JS Editor in 3. I think the key to solve the problem is: used the template to generate a new file, don't try to just rename a blank normal file, if so, you need to closed the file and reopen it.
Associating .js files with Aptana did not resolve this problem.
I noticed that when I type jquery(this). , I get code assistance and there was no assistance when I types $(this). So I fixed this thing temporarily by placing this statement
$ = jQuery;
at the start of my .js file, thus declaring the $ as an equivalent to the jquery function.
While writing Javascript code in HTML editor, you don't need to do that becuase you have included the jQuery reference at the top which has the above setting ($ = jquery).