Alternate Styles

Home - Alternate Styles

This page describes various config options for alternative indentation styles.

Most indentation should be correct using js3-mode. It natively supports both standard comma-first and comma-last styles without overthinking it. However, some indentation styles are inconsistent with others, and so some popular styles can be turned on using config options.

Note

It should not be necessary anymore to use 'lazy commas' mode and friends. Wanting this behavior should be more or less auto-detected and naturally supported.

Contents:

• js3-consistent-level-indent-inner-bracket
• js3-indent-dots
• js3-lazy-dots
• js3-lazy-commas
• js3-lazy-operators
• js3-lazy-semicolons

---

It is recommended that if you use js3-lazy-commas or js3-lazy-operators, then you should use both, due to the funky indentation it causes otherwise

To turn on both, add the following to your .emacs file:

(custom-set-variables
  ;; Your init file should contain only one such instance.
  ;; If there is more than one, they won't work right.
 '(js3-lazy-commas t)
 '(js3-lazy-operators t)
 '(js3-expr-indent-offset 2)
 '(js3-paren-indent-offset 2)
 '(js3-square-indent-offset 2)
 '(js3-curly-indent-offset 2))

js3-consistent-level-indent-inner-bracket

This basically turns off all the fancy indentation used in js3-mode, and mostly just tries to indent everything by one step from its parent.

js3-indent-dots

By default, js3-mode does not indent continued expression lines beginning with a dot. For example:

  this.bind('enterframe', function () {
    return 1;
  })
  .bind('keydown', function (e) {
    return 2;
  })

By turning on js3-indent-dots, you will have the following style:

  this.bind('enterframe', function () {
    return 1;
  })
      .bind('keydown', function (e) {
    return 2;
  })

js3-lazy-dots, described below, will do this:

  this.bind('enterframe', function () {
    return 1;
  })
    .bind('keydown', function (e) {
    return 2;
  })

Turn this on by putting the following in your .emacs file:

(custom-set-variables
  ;; Your init file should contain only one such instance.
  ;; If there is more than one, they won't work right.
 '(js3-indent-dots t)

js3-lazy-dots

By default, js3-mode supports the following dot-first style with js3-indent-dots: (indent to the previous dot)

foo.bar()
   .baz()

By also turning on js3-lazy-dots, you can use the following style: (indent once)

foo.bar()
  .baz()

Turn this on by putting the following in your .emacs file:

(custom-set-variables
  ;; Your init file should contain only one such instance.
  ;; If there is more than one, they won't work right.
 '(js3-indent-dots t)
 '(js3-lazy-dots t)

js3-lazy-commas

By default, js3-mode supports the following comma-first style:

var obj1 = { prop1: { prop1: "val1"
                    , prop2: "val2"
                    }
           , prop2: "val3"
           }

By turning on js3-lazy-commas with the recommended settings, you can use the following style:

var obj2 = {
    prop1: {
        prop1: "val1"
      , prop2: "val2"
    }
  , prop2: "val3"
}

Turn this on by putting the following in your .emacs file:

(custom-set-variables
  ;; Your init file should contain only one such instance.
  ;; If there is more than one, they won't work right.
 '(js3-lazy-commas t)
 '(js3-expr-indent-offset 2)
 '(js3-paren-indent-offset 2)
 '(js3-square-indent-offset 2)
 '(js3-curly-indent-offset 2))

js3-lazy-semicolons

By default, js3-mode supports the following style for for loop defs broken up into lines with leading semicolons:

for ( i = 0
    ; i < 10
    ; i++
    ) { }

By turning on js3-lazy-semicolons with the recommended settings, you can use the following style:

for (
    i = 0
  ; i < 10
  ; i++
  ) { }

Turn this on by putting the following in your .emacs file:

(custom-set-variables
  ;; Your init file should contain only one such instance.
  ;; If there is more than one, they won't work right.
 '(js3-lazy-semicolons t)
 '(js3-paren-indent-offset 2))

js3-lazy-operators

By default, js3-mode supports the following operator-first style:

var result1 = ( 5
              + 7
              / 2
              * 5
              )

By turning on js3-lazy-operators with the recommended settings, you can use the following style:

var result2 = (
    5
  + 7
  / 2
  * 5
)

Turn this on by putting the following in your .emacs file:

(custom-set-variables
  ;; Your init file should contain only one such instance.
  ;; If there is more than one, they won't work right.
 '(js3-lazy-operators t)
 '(js3-expr-indent-offset 2)
 '(js3-paren-indent-offset 2)
 '(js3-square-indent-offset 2)
 '(js3-curly-indent-offset 2))

---

Home