Js-beautify: 변수 선언의 쉼표 첫 번째 스타일 지원

우리가 JS와 Python을 모두 지원한다는 점을 고려할 때 패치(심각하게 구식임)는 기껏해야 불완전합니다.

우리는 풀 리퀘스트에 열려 있지만 개인적으로 "쉼표 우선" 안티 패턴을 고려합니다. 기본적으로 js-beautifier는 널리 받아들여지는 "관용어" JS를 준수하는 합리적인 옵션과 함께 JS가 어떻게 보여야 하는지에 대해 독단적입니다. 내 생각에 쉼표 우선은 아름답지 않고 널리 받아들여지지도 않습니다. 더욱이 이것은 매우 적은 이득을 위해 미화 코드(이미 엄청나게 복잡함)를 심각하게 복잡하게 만들 것입니다.

indent=4 설정된 경우 어떤 들여쓰기가 적절합니까? 일관성의 관점에서 저는 다음과 같이 주장합니다.

var a = 1
    , b = "foo"
    , c = false;

이것은 분명히 예상 출력이 아닙니다. 탭 들여쓰기를 사용하면 어떻게 보일까요?

세미콜론은 어디에 살고 있습니까? 결국? 아무데도? (둘 다 봤고 더 많이 봤음)

이 요지는 구식이지만 원하는 변경 사항을 더 쉽게 이해할 수 있도록 합니다. https://gist.github.com/nemtsov/2864266/revisions

이것은 #80과 비슷하므로 그 이유가 같을 것이라고 생각했습니다 - 더 쉬운 diffing 및 reordering.

그러나 이 시나리오에서는 #80과 달리 이러한 요구 사항을 충족하는 실행 가능한 해결 방법이 있습니다.

var a = 1;
var b = "foo";
var c = false;

조금 더 장황하지만 끔찍하지는 않습니다.

물론 누군가가 #80을 구현한다면 가장 간단한 변경으로 이 시나리오도 다룰 수 있을 것입니다.
@evocateur가 말했듯이 끌어오기 요청을 환영합니다.

@evocateur : 당신은 당신의 의견을 존중할 권리가 있습니다. 개인적으로 나는 항상 쉼표 첫 번째 스타일을 싫어했지만 몇 년 동안 이동, 제거(댓글 달기, 삭제 등)의 용이함 과 차이를 인식하게 되었습니다. 그래서 저는 이것을 옵션으로 남겨두고 사용자가 원하는 대로 하도록 하고 싶습니다. 때때로, 그것은 그의 손에 있지 않으며 그는 이미 설정된 표준을 따라야 합니다. 예, 추악하지만 현실입니다!

@bitwiseman : 들여쓰기 수준(2 또는 4)에서 다음과 같이 표시되어야 합니다.

var a = 1
  , b = "foo"
  , c = false;

이것은 또한 일부 SQL 편집기(쉼표가 먼저 사용되는 경우)가 수행하는 방식과도 일치한다고 생각합니다.

그리고 내가 나쁜 레이아웃을 홍보하는 것을 옹호하는 것은 아니지만, 관용적인 것과 독단적인 것 사이에는 항상 미세한 선이 있다고 생각합니다(여기서 Crockford를 생각해 보세요). 이유가 무엇이든 많은 포맷터가 쉼표를 지원하지 않기 때문에 먼저 쉼표가 널리 사용되지 않을 수 있습니다.

코드 면에서 상황에 대해 더 잘 알고 있으므로 ROI 주장에 완벽하게 동의합니다. 그럼에도 불구하고, 나는 우리가 이러한 것들을 공개할 수 있고, 문제를 논의할 수 있는 정족수를 가질 수 있고, 커뮤니티의 요구가 있다면 여러분이 그것에 대해 다시 생각할 수 있도록 요청하려고 생각했습니다.

추신: 나는 내가 무언가를 빠르게 스핀오프할 수 있는지 확인하려고 몇 시간을 보냈지만 그다지 성공적이지 않았습니다. 아마 다른 시간에 한번 해볼께요.

@mrchief 어제 무뚝뚝해서 죄송합니다. 실망스러운 디버깅 세션에서 휴식을 취하고 있었습니다. 당신은 좋은 점을 지적하고, 나도 당신의 선택을 존중한다는 것을 분명히 하고 싶습니다. 나 자신은 패치(쉼표 우선, 세미콜론 없음, 기타 괴짜)를 제공하는 경우 주어진 프로젝트의 스타일을 유지하려고 시도하며 이러한 옵션이 최소한 그들을 고용하기로 선택한 프로젝트의 일관성.

+1. 나는 diffing과 merge의 장점을 위해 쉼표 첫 번째 패턴을 사용합니다.

세미콜론의 위치에 관해서는 다음과 같이 var 키워드와 함께 줄 바꿈에 넣습니다.

var a
  , b
  , c
;

동일한 패턴을 사용하는 여러 프로젝트를 보았습니다.

또한 IMHO, 선언 옆에 값이 지정되지 않더라도 각 변수를 별도의 줄에 유지할 수 있으면 좋을 것 같습니다. 위의 예에서 beautifier는 모든 것을 var a, b, c; 한 줄로 그룹화하여 쉼표 주먹 스타일을 사용하는 전체 목적을 깨뜨립니다.

쉼표 우선 지원의 경우 +1입니다.

2칸 들여쓰기에서는 변수를 정렬하는 가장 깔끔한 방법입니다.

var foo = true
  , bar = 'hello'
  , something;

탭당 4칸은 어떻습니까? 실제 탭?

2013년 11월 8일 금요일 오전 9시 36분, Luke Martin [email protected]
썼다:

쉼표 우선 지원의 경우 +1입니다.
2칸 들여쓰기에서 변수를 정렬하는 가장 깔끔한 방법입니다.
var foo = 참
, 바 = '안녕하세요'

, 무엇;

이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/einars/js-beautify/issues/245#issuecomment -28081629

쉼표 첫 번째 문제의 핵심은 실제로 탭 기본 설정에 달려 있다고 생각합니다.

나는 2-스페이스 탭을 사용하고, 쉼표-before는 불필요한 공백을 추가하지 않고 변수를 정렬하는 유일한 방법입니다(~는 일렬로 만들기 위해 추가된 추가 공백을 나타냄):

// eww
var foo = true,
  ~~bar = 'hello',
  ~~something;

// yum
var foo = true
  , bar = 'hello'
  , something;

반대로 4-스페이스 탭을 사용하면 쉼표 앞에 오기가 좋지 않아 자연스럽게 지원에 신경을 쓰지 않게 됩니다.

// also eww
var foo = true
    , bar = 'hello'
    , something;

따라서 주석 처리 및 디버그 및 blah blah blah가 더 쉬워지기 전에 쉼표에 대한 논의가 있습니다. 그러나 나에게 그것은 단지 미학으로 귀결됩니다. 2-스페이스 탭을 사용하므로 앞에 쉼표를 사용해야 합니다. 현재 저는 2칸 탭을 선호하기 때문에 beautify를 사용할 수 없습니다.

이제 나는 내가 소수에 속한다는 것을 알고 있으며, 나의 작은 선호에 대한 지원을 절대 요구하지 않습니다. 방금 대화에 +1을 추가했습니다. 시간이 되면 지원을 추가할 수도 있습니다.

건배 :)

json 객체에 대해 이것을 보고 싶습니다.

 var a = ({
 에이: 1
 ,b: 2
 });

@lukemartin 흥미로운 관점입니다! :+1:

변수 선언과 배열 및 객체에 대한 쉼표 우선 지원을 위한 또 다른 +1 - https://gist.github.com/isaacs/357981

저는 이 기능을 "온 디맨드"로 지원하기 위해 패치 작업을 하고 있습니다(사용자는 내가 만든 설정으로 쉼표를 먼저 사용하는 옵션을 활성화하거나 비활성화할 수 있습니다).

변수 선언에 대해 다음 형식을 달성했습니다(공백 2개 사용).

var firstVar = 1
  , secondVar = 2
  , thirdVar = 3
;

하지만 몇 가지 의문점이 있습니다.

배열, 객체 및 인수 선언을 어떻게 처리해야 합니까? 최근에는 다음 형식을 사용하고 있습니다.

myArray = [
  item1
, item2
, item3
];

myObject = {
  prop1: 1
, prop2: 2
, prop3: 3
}

보시다시피 변수 선언 형식과 정확히 동일하지 않습니다. 이 마지막 항목에는 두 번째 변수에 대한 +1 들여쓰기 수준이 포함되어 있습니다("item2"의 쉼표 앞에 없는 쉼표 앞의 두 공백에 주의하십시오). "prop2"에 대한 것도 아님). Var 선언은 @lukemartin이 명시한 대로 각 변수 이름의 시작 부분을 동일한 열에 정렬하기 위해 이 추가 들여쓰기를 사용합니다.

위 코드에 표시된 서식을 사용하는 이유는 다음과 같습니다.

1.- jshint (들여쓰기 오류) 방지합니다 . 예를 들어:

myArray = [
    item1
  , item2
];

"1이 아닌 3에 들여쓰기가 있을 것으로 예상됨"을 던집니다. 제안을 따르면 매우 추한 결과를 얻게 됩니다.

2.- 각 속성 이름, 배열 항목 등의 시작을 정렬하는 이점을 유지하려면 다음과 같이 하십시오. 예:

myArray = [
  item1
  , item2
];

또한 linting 오류를 생성하지 않지만 위의 예만큼 좋아 보이지는 않습니다.

이러한 경우를 어떻게 처리해야 하는지에 대한 보다 명확한 아이디어가 있으면 이 기능의 구현을 완료하고 Pull Request를 발행할 수 있습니다.

위의 모든 것을 지원하는 것이 가능합니까? 귀하가 나열한 모든 것은 기술적으로 "쉼표 우선"입니다.

가능하다고 생각하지만 사용자가 원하는 결과를 얻을 수 있도록 더 많은 설정을 구현해야 합니다. 예를 들어 배열, 개체 및 인수에 대해 2개의 들여쓰기 수준을 사용하거나 하나만 사용하려는 경우 포맷터에 알려야 합니다.

기본 기능을 먼저 구현한 다음 더 많은 설정으로 확장하는 것이 좋을 것 같습니다. 두 번째 패치에서 구현하는 데 문제가 없을 것이라고 생각합니다.

말씀하신대로 기본적인 기능은 괜찮습니다. _모든_ 서식 옵션을 지원하는 것이 이 프로젝트의 _비목표_입니다. :웃다:

// 2-space indents
var itemA = 1
  , itemB: 2
  , itemC: 3;

myObj = {
  itemA: 1
  , itemB: 2
}

myArray = [
  item1
  , item2
];

// 4-space indents
var itemA = 1
    , itemB: 2
    , itemC: 3;

myObj = {
    itemA: 1
    , itemB: 2
}

myArray = [
    item1
    , item2
];

이것들은 코드를 단순하게 유지하고 어떤 들여쓰기를 사용하든 형식을 일관되게 유지해야 하며 이 문제를 닫고 별도로 지정하고 구현할 수 있는 "Columnize comma-first identifiers"(또는 무엇이든 간에)에 대한 새로운 문제를 열 ​​수 있도록 합니다. .

여러분의 풀 리퀘스트를 기다리겠습니다!

@tgirardi 훌륭합니다. 이것을 시도하기 위해 기다릴 수 없습니다.

모든 피드백을 환영합니다 :-) !!!

내 생각은 올바른 솔루션으로 간주될 때까지 코드를 조정한 다음 다음 TODO 목록을 진행하는 것입니다.

1.- 이 새로운 기능에 대한 테스트 만들기
2.- Python 버전에 기능 적용 (누군가 자원하면 더 좋습니다! ... 나는 python에 대한 경험이 많지 않습니다).
3.- 쉼표 우선 스타일의 다른 가능한 변형에 대해 논의

4칸 들여쓰기

var x = a
    , y = b
;
obj = {
    attr1: "value1"
    , attr2: "value2"
    , attr3: "value3"
};

변수 이름과 속성 이름은 정렬할 필요가 없습니다. 이것은 가독성에 전혀 영향을 미치지 않습니다. 제 생각에는 column-first를 사용하는 주된 이유는 주석 처리, 줄 제거 및 삽입을 쉽게 하기 위함입니다. 2-스페이스 들여쓰기를 사용할 때 정렬됩니다.

세미 컬럼은 'y' 다음에 새 변수를 더 쉽게 추가할 수 있도록 여러 변수 선언 후 한 줄에 있어야 합니다. 이 경우 VIM에서는 '$a' 대신 'o' + ', z = c',' + 'z = c'

@lewisdiamond 세미콜론 의견에 동의합니다. 자체 줄에 포함하면 마지막 변수도 쉽게 편집할 수 있습니다(제거, 교체, 앞/뒤에 줄 삽입 등).

그러나 다음과 같은 사실도 언급되었습니다.

1.- 모든 종류의 서식을 지원하는 것이 프로젝트의 목표가 아닙니다.
2.- 한 번에 너무 많은 복잡성을 추가하는 것은 나쁜 생각입니다. 따라서 먼저 이 기능을 가능한 한 간단하게 유지하고 릴리스 상태에 도달하고 일정 기간 테스트한 후에 개선을 시작하는 것이 좋습니다.

쉼표 우선 지원에 대해 +1이며, 쉼표 우선 스타일에 대한 실용적인 이유가 있기 때문에 탭이 제대로 정렬되도록 하는 것이 최종 목표가 되어서는 안 된다는 lewisdiamond의 의견에 동의합니다. json도 지원하고 싶습니다. 현재 저는 구두점 우선 대안을 많이 수행하기 위해 전역 js-beautify 코드를 해킹했습니다(삼항 연산자의 경우 필수).

이것을 +1한 모든 사람에게: https://github.com/beautify-web/js-beautify/tree/feature/comma-first 브랜치를 살펴보세요.

이것이 당신이 원하는 것을 향한 충분한 첫 번째 단계인지 알려주십시오. 다음 릴리스에 추가해야 합니다.

@olsonpm , @lewisdiamond , @lukemartin , @mrchief - https://github.com/beautify-web/js-beautify/tree/feature/comma-first 브랜치를 살펴 볼까요 ?

오늘 밤에 30분을 투자하고 생각으로 보답하겠습니다. 팔로우해주셔서 감사합니다.

오늘 아침에 해결했습니다. 당신의 테스트 덕분에 모든 것이 좋아 보입니다. 운영자 우선 기능이 많은 개인 분기가 있습니다. 귀하의 분기를 통해 쉼표 우선 테스트를 수행했는데 모두 문제를 통과하지 못했습니다. 이는 좋은 소식입니다.

개인 브랜치를 만들 때 쉼표 우선 연산자를 수동으로 지정하기로 결정했습니다. 이는 다음을 의미합니다.

var a,
    b;

변경되지 않습니다. 커밋 메시지에서 이것이 사실이 아니라고 분명히 밝혔습니다. 저는 다른 사람들이 opt.comma_first를 사용하기로 선택한 경우 어떤 행동을 기대하는지 논의할 가치가 있다고 생각합니다.

또 다른 것은 <Output>.previous_line과 flags.previous_text가 같은 것으로 처음에는 혼란스러웠지만 어떻게 사용했는지 이해가 갑니다.

그 외에 구현 간의 주요 차이점은 이전 행을 수정하기로 선택했다는 것입니다. 개발하는 것이 더 혼란스럽다고 생각했기 때문에 "돌아가서 편집"하지 않으려고 노력했습니다. 이제 당신의 방법은 나보다 더 간결합니다. 쉽게 읽을 수 있고 모든 것을 댓글로 달았습니다. 기존 코드는 또한 이전 토큰을 편집하여 코드가 완벽하게 일치하도록 합니다. 솔직히 말해서 귀하의 생각이 무엇인지 알고 싶기 때문에 가져오는 것입니다. 간단히 말해서 토큰이 다음 토큰을 기반으로 앞의 공백만 담당한다면 이 프로그램은 디버그하기가 훨씬 쉬울 거라고 생각합니다.

이 문제를 해결해 주셔서 감사합니다.

편집: 내 실수 - <Output>.previous_line 및 flags.previous_text가 완전히 다릅니다.

앞으로만 사용하는 것이 좋습니다. 나는 쉼표로 무엇을 할 것인지 결정하는 방법과 위치에 대한 헤어볼을 보았고, 올바른 위치에 가져오기 위해 출력을 다시 트리밍하는 곳이 이미 있습니다. 나는 조금 단순한 것을 하기로 결정했고, 간단한 동작을 확인하는 몇 가지 테스트를 받은 다음 나중에 튜닝 및 리팩토링에 대해 확인했습니다.

당신이 언급한 예:

var a,
    b;

나중에 논의할 수 있는 튜닝의 예가 될 것입니다.

잘 들린다. 피드백에 감사드립니다.

그리고 찾아주셔서 정말 감사합니다. 추가하고 싶은 테스트가 있다면 큰 도움이 될 것입니다.