Sublime Text 2: Auto fix indentation for javascript?

JavascriptSublimetext2

Javascript Problem Overview


Here's some sample code I have, currently I'm set to only indent using 4 spaces at a time. Is there a way to highlight a block of javascript and press a single button or menu option to format it nicely like so:

Before:

app.get('/csvtest', function (req, res) {
  MyModel.find(function (err, mymodel) {
    if (!err) {
      var csv = [];
      _.each(mymodel, function(obj) {
       csv.push(obj['mymodel']);
      });
      res.send(csv.join());
    } else {
      console.log(err);
    }
  });
});

After:

app.get('/csvtest', function (req, res) {
    MyModel.find(function (err, mymodel) {
        if (!err) {
            var csv = [];
            _.each(mymodel, function(obj) {
                csv.push(obj['mymodel']);
            });
            res.send(csv.join());
        } else {
            console.log(err);
        }
    });
});

Javascript Solutions


Solution 1 - Javascript

Here is a tool for this. Found it on the sublime forums.

  • Install Package control

  • Run Package Control: Install Package from the command palette. Type Ctrl + Shift + P (Windows) or Command + Shift + P to open the command palette

  • Search for jsFormat and hit enter

  • Ctrl + Alt + f to format

Solution 2 - Javascript

You could give JsFormat a go. ctrl+alt+f formats the selected text.

Solution 3 - Javascript

You can select all your code (ctrl+A) and use the in-app functionality, Reindent (Edit -> Line -> Reindent). It will format your code with looking at the Sublime's tab/intent setting.

Alternatively: You can use JsFormat formatting plugin for Sublime Text 2 if you would like to have more customizable settings on how to format your code to addition to the Sublime Text's default tab/indent settings.

https://github.com/jdc0589/JsFormat

More info how to install JsFormat to your Sublime IDE: You can easily install JsFormat with using Package Control (Preferences -> Package Control) Open package control then type install, hit enter. Then type "js format" and hit enter, you're done. (The package controller will show the status of the installation with success and errors on the bottom left bar of Sublime)

Setting the short cut: Add the following line to your key bindings (Preferences -> Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

I'm using ctrl+alt+2, you can change this short cut key whatever you want to.

My opinion: JsFormat is a good one, definitely worth to try it!

Solution 4 - Javascript

If you specifically want to go from 2 to 4 spaces, click on the tab menu in the lower right corner. Click "convert indentation to tabs", change width to 4, then "convert indentation to spaces."

Solution 5 - Javascript

The fastest way to do this, in general, is with a regex:

  • Press CTRL+H
  • Enable the Regular Expression button to the bottom-left (or press ALT+R)
  • Enter ^(\s+) in Find What
  • Enter \1\1 in Replace With
  • Click Replace All to the right

This will double the number of prefixed spaces (bringing 2 spaces to 4). The replace window can then be left open to easily apply this to multiple files.

Solution 6 - Javascript

It looks like Sublime Text 2 already has what you want (maybe they added this feature more recently).

Whether you're wanting to change the number of Spaces or you're wanting to convert Spaces to Tabs, you can use this path: View > Indentation

Within that dropdown menu you have the option to Convert Indentation to Tabs, to Convert Indentation to Spaces, or to choose how many Spaces the Tab Width (1-8) should be.

Hope this helps!

Solution 7 - Javascript

Install jsFormat using PackageControl by selecting jsFormat from the Install Package menu.

Then do this to auto-format your code:

Ctrl + Alt + F

It is also helpful to review the jsLint recommendations for formatting. You can install the jsLint package and validate with formatting options enabled.

Ctrl + L

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRobeezyView Question on Stackoverflow
Solution 1 - JavascriptRobert KarlView Answer on Stackoverflow
Solution 2 - JavascriptBubblesView Answer on Stackoverflow
Solution 3 - JavascriptGokhan TankView Answer on Stackoverflow
Solution 4 - JavascriptMathleticsView Answer on Stackoverflow
Solution 5 - JavascriptRyallView Answer on Stackoverflow
Solution 6 - JavascriptJames RutledgeView Answer on Stackoverflow
Solution 7 - Javascriptcosbor11View Answer on Stackoverflow