Uploaded image for project: 'Appcelerator Studio'
  1. Appcelerator Studio
  2. TISTUD-6541

Studio Formatter behaves incorrectly causing JSHint errors

    Details

    • Story Points:
      9
    • Sprint:
      2014 Sprint 12 Studio

      Description

      I have noticed that the formatter used within the Studio application has a number of issues that are causing me and my team a lot of difficulties when working with different tools and attempting to maintain a high level of code quality.

      1. Studio reformats functions and var declarations within functions incorrectly. I say incorrect as it can cause JSHint errors afterwards also existing formatting applied, say by developer A, gets reformatted by Studio when developer B edits the documents.

      Here is an example of a small function example that has been formatted with Sublime Text 2 and passes JSHint. It is also the style that I wish to use, which also is recommended in many books regarding code quality with JavaScript.

      FormattingCorrect.js

      /**
       * Test File for Appcelerator Studio Formatting Bug
       *
       * @author Ketan Majmudar
       */
       
      /**
       * Example Function that maintains a space after the function parantheses and the braces.
       * variable declaration within is indented for readibility and also allows for git merges
       * to be easily reviewed. The
       *
       * "use strict"; is used internally and is another issue when the Studio foramtter is used,
       *  it throws errors when using JSLint and should respect certain code style guide conventions.
       *
       */
       
      function exampleFunction() {
          "use strict";
          var myVar1,
              myVar2,
              myVar3;
       
          switch (myVar1) {
          case true:
              myVar3 = true;
              break;
          case false:
              myVar3 = false;
              break;
          default:
              myVar3 = null;
          }
          Ti.API.log(myVar1 + myVar2 + myVar3);
      }
       
      exports.exampleFunction = exampleFunction;
      

      If this is copy/pasted into Studio, and you use the Source Format option, by default or with custom settings, a few things happen that break the styling and flow.

      The "use strict"; statement is placed immediately to the right of the opening brace, the variables are all moved onto a single line, and switch statements re-indent themselves.

      This is very frustrating when you are working on multiple branches of a project and the commits are going back and forth due to formatting changes made by the product. Take a look at what Studio does to the code example:

      FormattingBroken.js

      /**
       * Test File for Appcelerator Studio Formatting Bug
       *
       * @author Ketan Majmudar
       */
       
      /**
       * Example Function that maintains a space after the function parantheses and the braces.
       * variable declaration within is indented for readibility and also allows for git merges
       * to be easily reviewed. The
       *
       * "use strict"; is used internally and is another issue when the Studio foramtter is used,
       *  it throws errors when using JSLint and should respect certain code style guide conventions.
       *
       */
       
      function exampleFunction() {"use strict";
          var myVar1, myVar2, myVar3;
       
          switch (myVar1) {
              case true:
                  myVar3 = true;
                  break;
              case false:
                  myVar3 = false;
                  break;
              default:
                  myVar3 = null;
          }
          Ti.API.log(myVar1 + myVar2 + myVar3);
      }
       
      exports.exampleFunction = exampleFunction;
      

      The case should be indented with the switch, the vars should stay on a newline and the "use strict"; should not move.

      This raises a wider question as why we can't use JSBeautifer rules/tags for certain settings. The formatting options and rules probably would better serve us if they adopted more of this standard approach that is more widely adopted. (just an idea).

      My main issue is this current reformatting.

      Key Issues that need to be addressed:

      • "use strict"; should not reflow immediately after the brace
      • var declarations on newlines should not all be placed on a single line
      • switch statements should not indent cases.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                cwilliams Christopher Williams
                Reporter:
                stereoket Ketan Majmudar
              • Watchers:
                6 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: