Js-beautify: 데이지 체인 들여쓰기는 과도한 들여쓰기로 이어집니다.

구성과 함께 전체 입력 및 예상 출력을 제공할 수 있습니까? 예상 조각(솔직히 부정확해 보이는)을 닫는 블록과 연관시키는 데 어려움을 겪고 있습니다. 감사 해요!

이 분야의 많은 것들이 그러하듯, 이것은 물론 객관적인 진실이라기 보다는 개인의 취향과 습관의 문제입니다.

처리 후 다음과 같이 표시될 수 있습니다.

(function () {
    'use strict';

    angular
        .module('module', [])
        .directive('appVersion', ['version',
            function (version) {
                return function (scope, elm, attrs) {
                    elm.text(version);
                };
            }
        ])
        .directive('foo', [

            function () {
                return {};
            }
        ])
        .directive('bar', [

            function () {
                return {};
            }
        ]);
})();

나는 이것을 원한다:

(function () {
    'use strict';

    angular
    .module('module', [])
    .directive('appVersion', ['version',
        function (version) {
            return function (scope, elm, attrs) {
                elm.text(version);
            };
        }
    ])
    .directive('foo', [
        function () {
            return {};
        }
    ])
    .directive('bar', [
        function () {
            return {};
        }
    ]);
})();

이것은 내 구성입니다.

{
    "indent_level": 0,
    "indent_with_tabs": true,
    "preserve_newlines": true,
    "max_preserve_newlines": 5,
    "jslint_happy": true,
    "brace_style": "collapse",
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_before_conditional": true,
    "break_chained_methods": true,
    "eval_code": false,
    "unescape_strings": false,
    "wrap_line_length": 0,

    // jsbeautify options
    "format_on_save": true,
    "use_original_indentation": true
}

+1

당신이 말하는 문제는 하나의 들여쓰기입니다.

    angular
        .module('module', [])

잠시 시간을 내어 여러분이 보고 싶어 하는 것에 가까이 다가가는 멋진 느낌을 드리겠습니다. 과거에는 우리가 가까이 갈 수 없었을 것입니다. :웃다:

들여쓰기는 특정 문장의 일부인 요소를 명확하게 유지하기 위한 것입니다. 일반적인 경우 들여쓰기는 기본적으로 정확합니다. 이 특정한 경우에, 당신은 하나의 매우 긴 문장을 가지고 있지만, #200당 미화사는 그것이 그 이후에 중요한 문장이 아니라는 것을 알지 못합니다. beautifier는 완전히 구성 가능한 포맷터가 아닙니다. 일반적인 경우를 해결하기 위한 것입니다.

이 토론에 깊이를 더하기 위해 이 예를 살펴보고 형식이 어떻게 표시되어야 하는지 알려주세요.

alpha
    .cooker(function() {
        some
            .thing()
            .should()
            .happen();
        elsewhere
            .some_other_thing()
            .should()
            .happen();
    })
    .thenclose()
beta(zeta);
omega
    .cage(function() {
        random
            .things()
            .should()
            .happen();
        elsewhere
            .some_other_thing()
            .should()
            .happen();
    })
    .thendie()

잠시 시간을 내어 여러분이 보고 싶어 하는 것에 가까이 다가가는 멋진 느낌을 드리겠습니다.

전적으로! =)

들여쓰기와 관련하여 귀하의 예는 다음과 같아야 한다고 생각합니다.

alpha
.cooker(function() {
    some
        .thing()
        .should()
        .happen();
    elsewhere
        .some_other_thing()
        .should()
        .happen();
})
.thenclose()
beta(zeta);
omega
.cage(function() {
    random
        .things()
        .should()
        .happen();
    elsewhere
        .some_other_thing()
        .should()
        .happen();
})
.thendie()

여기에서 격언은 중괄호와 동일합니다. 시작과 끝은 들여쓰기가 같아야 합니다. 또한 Douglas Crockford의 코드 규칙 은 과도한 들여쓰기를 방지하기 위해 정확히 switch 를 규정합니다.

js-beautify가 기본적으로 crockford를 따르지 않는다는 점을 제외하고는 위의 내용을 jslint를 통해 실행하면 .cooker( 의 들여쓰기가 잘못되었다고 불평할 것입니다.

귀하의 예에서는 beta(zeta); 가 간과되는 것이 너무 쉬운 것처럼 보입니다.
또한 일부 데이지 체인 들여쓰기가 표시되고 일부는 표시되지 않습니다. beautifier는 어떤 논리를 들여쓰기하고 어떤 논리를 사용하지 않는지 결정하기 위해 어떤 논리를 사용해야 합니까?

나는 이것을 열어 둘 것입니다 - 당신이 제공하는 예제는 AngularJS 기반으로 보이므로 이 관용구는 시간이 지남에 따라 더 널리 받아들여질 수 있습니다. 그러나 그것은 우리가 곧 통합할 수 있는 것이 아닙니다.

정말 죄송합니다. 들여쓰기를 잘못했습니다. 그들 중 어느 것도 들여 쓰기로되어 있지 않았습니다. 그리고 beta(zeta); 를 간과하지 않으려면 다음과 같이 빈 줄을 사용합니다.

alpha
.cooker(function() {
    some
    .thing()
    .should()
    .happen();

    elsewhere
    .some_other_thing()
    .should()
    .happen();
})
.thenclose();

beta(zeta);

omega
.cage(function() {
    random
    .things()
    .should()
    .happen();

    elsewhere
    .some_other_thing()
    .should()
    .happen();
})
.thendie();

서두에 말했듯이 개인적인 취향의 문제라고 생각합니다. 특히 싱글 라인 체인의 경우 들여쓰기를 줄이는 경향이 있습니다. 그러나 여러 줄의 경우가 매우 나쁘고 혼합된 스타일을 사용하는 것은 끔찍할 것이므로 항상 들여쓰기를 줄이는 전략을 고수할 것입니다.

#485를 볼 수 있습니다. 이번 수정으로 다음은 미화를 통과할 때 변경되지 않은 상태로 유지됩니다.

(function () {
    'use strict';

    angular
        .module('module', [])
        .directive('appVersion', ['version', function (version) {
            return function (scope, elm, attrs) {
                elm.text(version);
            };
        }])
        .directive('foo', [function () {
            return {};
        }])
        .directive('bar', [function () {
            return {};
        }]);
})();

여전히 당신이 원하는 것은 아니지만, beautifier는 더 이상 함수 선언을 개행으로 만들지 않을 것입니다.

이 요청을 +1해야 합니다. 이것은 Promise로 작업할 때 특히 편리합니다.

Promise.resolve()
.then(function() {
  return foo.bar()
})
.then(function() {
  return foo.baz();
})
.then(function() {
 //...
}) //...
//...

이 연결은 잠시 동안 계속될 수 있습니다. 특히 더 복잡한 api 끝점을 작성할 때 더욱 그렇습니다. 맨 아래를 볼 때쯤이면 가까이에 있는 항목과 관련하여 들여쓰기가 완료되는 방식에 대해 끊임없이 당황하게 됩니다.

나는 모든 닫는 들여쓰기가 다음으로 가까운 것과 한 수준의 깊이 차이가 되는 것이 중요하다고 생각합니다.

:+1:

나는 모든 닫는 들여쓰기가 다음으로 가까운 것과 한 수준의 깊이 차이가 되는 것이 중요하다고 생각합니다.

나에게 이것은 추가 들여 쓰기가 오해의 소지가 있고 궁극적으로 실수임을 증명하는 핵심입니다. 나는 어떤 사람들은 어떤 의미가 있다고 느낄 수도 있다는 것을 깨닫습니다.

Promise.resolve()
  .then(function() {
    return foo.bar()
  })

어떤 의미에서 then() 는 Promise.resolve() 와 부모-자식 관계가 있음을 반영하는 것 같지만 그것이 사실이라면 각 후속 then() 에도 해당 관계가 있습니다. 이전 then() . 물론 그런 부모-자식 관계는 _없게_ 있고, 마치 있는 것처럼 들여쓰기하는 것은 큰 혼란을 일으킬 것이므로 아무도 하지 않습니다. 그러나 첫 번째 then() 들여쓰기는 큰 것이 아니라 _작은_ 엉망이 됩니다. 단지 어떤 사람들은 그 작은 혼란을 기꺼이 참는 것처럼 보이지만 우리 중 일부는 다음과 같은 경우 코드에 _아무_ 엉망이 없는 것을 선호합니다. 우리는 그것을 도울 수 있습니다.

들여쓰기가 제공하는 시각적 표시를 갖는 것이 좋을 수 있지만 이 경우 들여쓰기의 의미를 오버로드하고 있습니다. 새 범위를 표시할 뿐만 아니라 연결된 메서드도 표시합니다. 그러나 우리는 이미 연결된 메서드를 나타내는 . 를 가지고 있으며 . 가 줄의 텍스트 시작 부분에 있기 때문에 실제로 필요한 모든 (의사) 들여쓰기를 제공합니다. 당신이 그것에주의를 기울이는 한.

따라서 이것은 _정말_ _ 그냥 _ 개인 취향의 문제가 아니라 두 접근 방식의 장점과 단점의 문제입니다. (물론 개인적인 취향이 _포함되어 있습니다. 일부 사람들은 특정 단점이나 특정 이점에 대해 신경 쓰지 않을 수 있기 때문입니다. 그러나 단순히 "나는 _x_를 선호합니다" 또는 "나는 _y_를 선호합니다.)

나는 여분의 들여 쓰기의 단점이 중요하지만 이점은 다른 방식으로 가질 수 있다는 경우가 강하다고 생각합니다.

연결된 메서드에 대한 추가 들여쓰기의 단점:

• 들여쓰기는 더 이상 범위를 나타내는 신뢰할 수 있는 지표가 아닙니다.
• 닫는 구두점은 당신이 실수를 했다고 생각할 수 있습니다.

혜택:

• . 자체가 제공하는 것보다 메서드 체인에 대한 더 큰 시각적 표시를 얻습니다(그러나 . 로 표시를 _do_ )

+1

+1 이것은 jslint에서 Expected exactly one space between '{a}' and '{b}' 오류로 이어집니다.

예시:

gulp.task('changelog', function () {
    return gulp.src('CHANGELOG.md', {
            buffer: false
        })
        .pipe(conventionalChangelog({
            preset: 'angular' // Or to any other commit message convention you use.
        }))
        .pipe(gulp.dest('./'));
});

오류:

4   Expected 'buffer' at column 9, not column 13.    buffer: false
5   Expected '}' at column 5, not column 9.  })

올바른 방법(jslint의 경우):

gulp.task('changelog', function () {
    return gulp.src('CHANGELOG.md', {
        buffer: false
    })
        .pipe(conventionalChangelog({
            preset: 'angular' // Or to any other commit message convention you use.
        }))
        .pipe(gulp.dest('./'));
});

나는 주로 promise chaining에서 불필요한 추가 들여쓰기를 피하기 위해 이것을 옵션으로 사용하는 것을 매우 선호합니다.

  // fetch `config.json` and then set as constant
  $http.get('config.json').then(function(response) {
    angular.module('myApp').constant('CONFIG', response.data);
  })
  .then(function() {
    angular.bootstrap(document, ['myApp']);
  })
  .catch(function(err) {
    var message = (err && err.data || err && err.message);
    console.error('Unable to bootstrap application.', err);
    window.alert('Unable to bootstrap application.' + (message ? '\n\n' + message : ''));
  });

추가 들여쓰기는 다음과 같다고 생각합니다.

try {
    // 4 spaces
  } // 2
  catch () {
    // 4
  }

들여쓰기 블록을 감싸는 자식 토큰이 초기 변수의 새 줄에 있으면 의미가 있습니다.

    .module('module', function() {
      // .module starts on new line, so this block has 2 indents
    })

대

  angular.module('module', function() {
    // .module is on the same line as the initial variable angular, so this block has 1 indent
  })

그러나 한 줄에 모두 들어갈 수 있다면 이중 들여쓰기가 발생하지 않아야 합니다.

(그대로 위의 내용은 다음과 같이 린트/예상됩니다.)

angular.module('module', function() {
    // double indent
  });

나는 이것을 향상으로 표시했습니다.
나는 그것이 좋은 생각이라고 주장하는 것이 아니라 단지 시간이 없을 뿐입니다.

모든 "+1" 사용자와 댓글을 단 사람들은 자유롭게 풀 리퀘스트를 제공하십시오.

+1 원하는

나는 이것을 위해 PR을 열었습니다.

https://github.com/beautify-web/js-beautify/pull/927

지속적 통합이 최종적으로 PR 상태를 업데이트하면 병합할 준비가 되어 있어야 합니다.

+1 이건 존나 지루해