operator linebreak, prettier 와 eslint 를 동시에 사용할 때

반응형

prettier 와 eslint 를 동시에 사용할 때  prettier 가 &&  나 || 를 라인의 끝에 위치시키게 되어서 eslint 에서 operator linebreak 경고 메시지를 내뱉는 경우에 eslint-config-prettier 확장을 사용해서 prettier 와 충돌이 있는 eslint 룰을 꺼주는 방법 외에 이 경고 메시지를 나오지 않게 prettier 측이나 vscode 측 설정으로 해줄 수 있는 방법은 없을까요?

https://github.com/prettier/prettier/issues/3806

기본적으로 prettier 의 설정에는 관련 설정이 없다고 하는데....

 

ESLint는 문법 에러를 잡아주거나 더 좋은 코드 구현 방식을 사용하도록 해주지만, 

Prettier 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정해준다.

 

https://github.com/prettier/prettier-eslint/issues/186

 

https://heewon26.tistory.com/262

 

https://velog.io/@e_juhee/ESLint-Prettier

 

https://dev-yakuza.posstree.com/ko/linter/lefthook/

 

https://velog.io/@treejy/React-ESLint%EC%99%80-Prettier%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%A9%B0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%98%EA%B3%A0-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EC%A7%80

 

 

Please reconsider this (and bring it in line with the way ternary operators are formatted).

// Please do this - read vertically down :)
const foo = barValue
            && checkBazValue()
            && qux.isTrue()

// Please stop doing this - scan entire line :(
const foo = barValue &&
            checkBazValue() &&
            qux.isTrue()

 

Is it me or did nobody suggested the uambiguous logical operator formatting?

if (
    somethingverylong
    &&
    somethingevenlonger
    &&
    (
        somethinginside
        ||
        somethingothertoor
    )    
    
Yes, there are some extra lines, but for me personally, this is the most readable code I've ever seen when there was a need to wrap it. The other least accident-proof I consider begining of the line. But that's just my opinion :-)

 

 

반응형

댓글

Designed by JB FACTORY