prettier3 eslint prettier 코드 포맷팅 통합 내용 eslint 와 prettier 는 문법 오류를 방지하고 코드 포매팅을 통해 일관적인 코딩 컨벤션(코딩 규약)을 유지하여 코드 작성 및 협업시에 도움이 된다. 다만 이 두 가지가 겹치는 부분이 존재하는데 eslint 와 prettier 모두 코드 포매팅 기능을 제공하기 때문에 겹치는 상황이 생겨 코드작성이 힘들어질 수 있다. 위 과정을 해결할 수 있는 라이브러리가 두 가지가 있다. 관련 라이브러리 eslint-config-prettier eslint입장에서 불필요하거나 Prettier 와 충돌할 수 있는 모든 규칙을 제외해버린다. 단지 규칙을 꺼버리는 것이기에 당연히 다른 규칙과 함께 사용하는 경우에 의미가 있다. eslint-plugin-prettier Prettier의 규칙이 ESLint에 통합.. 2023. 6. 8. [ 개발 이슈 ] maxlen 적용 이슈 eslint 는 prettier 를 사용해서 공통된 형식을 적용하기 위해서 여러 코드 규칙을 적용해둔 상황에서 tsx 파일에서 보이던 maxlen 룰이 ts 파일에서는 적용되지 않았고 100줄이 넘어가는 내용을 prettier 는 설정에 따라 줄을 넘겼고 그 내용은 화살표 함수가 있던 코드였기 때문에 eslint 의 arrow-body-style, implicit-arrow-linebreak 규칙에 따라 함수형식이 올바르지 않아 오류가 발생했다. 상황 정리 : ts 파일에서 maxlen 규칙이 적용되지 않음 화살표 함수가 포함된 코드가 100줄이 넘어가 prettier 함수의 리턴 내용을 줄바꿈함 arrow-body-style, implicit-arrow-linebreak 규칙에 따라 올바르지 못한 함수.. 2023. 5. 3. ESLint 와 prettier ESLint ES + Lint es : Ecma라는 기구에서 만든 Script = 표준 Javascript Lint : 에러가 있는 코드에 표시를 달아놓는 것을 의미 ESLint는 자바스크립트 문법에서 에러를 표시해주는 도구입니다. 일종의 가이드라인 코드상 문제가 되는 부분만을 지정할 수도 있고 , 아니면 에러 기준을 직접 지정할 수도 있다 또한 간단하고 전반적인 코딩스타일(ex. tab은 몇 칸을 기준으로 할 것인가? / ; 여부 등)까지 지정할 수도 있다. 예를 들어 함수 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있다. 또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array 내장 함수를 사.. 2022. 9. 2. 이전 1 다음
