1월, 2020의 게시물 표시

Prettier를 ESLint "--fix"로 대신 사용할 수 있을까? v1.0

이미지
Prettier를 ESLint "--fix"로 대신 사용할 수 있을까? ESLint의 역할 1. Code Qualify: 코드를 정적으로 분석하여, 잠정적으로 문제가 될 수 있는 부분을 빠르게 찾도록 도와주는 것 2. Code Formatter: 의미대로 보자면, 정한 규칙에 맞춰 코드를 조정해주는 것 Prettier의 역할 1. Code Qualify: 지원하지 않는, 정확하게 지원 대상이 아님 2. Code Formatter(Reformatter): 코드를 원하는 형태로 재정렬 해주는 것 차이점 Code를 형태를 정렬하는 것과 오류를 보정하는 것은, 그다지 차이나는 것이 아닌 것으로 보일 수 있지만, 실제는 큰 차이가 있다. ESLint는 Code Qualify 규칙(.eslintrc 등)에 따라 그 코드에 대한 조정 혹은 경고를 하는 것(흔히 코드의 품질을 높이기 위한 목적으로 적용)인데, Prettier는 reformatter이기 때문에, 문법적 오류에 대한 접근 없이, 코드를 형식을 변경한다. ESLint 예제를 기반으로 설명하겠다. 가능한 최대한 같은 조건을 시험하기 위해서, 옵션을 서로 맞췄다. (옵션 자체를 일일이 비교하는 것이 아니므로, 그 각각의 세세한 차이는 고려하지 않는다. 모든 값을 설정하면, 거의 같은 형태의 모양을 구현할 수는 있다.) ESLint 예제 에 약간의 내용을 추가했다. 원본, var loooong = 'abcdefghijklmnopqrstuvwxyz`1234567890~!@#$%^&*()_+[]\;,./{}|:<>?가나라다마사바사';; const abc = 'abc"def"ghi'; const def = "abc'def'ghi"; const ghi = "abc`def`ghi"; const stu = `abc"def"ghi`; const