ESLint 2

Prettier, Stylelint, ESLint 시작하기

싸피 팀 프로젝트에서부터 사용했던 Pritter, ESLint. 회사에서 추가로 사용하는 Stylelint. 사용하면 자동으로 스타일을 맞출 수 있고, 문법 오류도 잡아줘서 편리하다. 하지만 잘못하면 엄청 귀찮아진다 ㅠ 코드 전부 빨간 줄이 생기고..ㅠㅠ 오늘도 그런 일이 있었다. 분명히 ESLint, Prettier, vscode setting에서 모두 작은따옴표를 사용하게 했는데(single quote), 파일을 저장하면 자동으로 큰 따옴표로 바뀌는 것이었다. 그리고 규칙에 안 맞는다고 코드에 전부 빨간 줄을 쳐서 보여줬다 ㅠㅠ 이건 vscode setting에서 Editor: Default Formatter를 잘못 설정해서 생긴 문제였다. 아래와 같이 'Prettier ESLint'로 해야 하는데,..

프론트엔드💛 2023.03.28

aria-hidden 알아보기 (span에 onClick 달았다가 린트 규칙 어긋나는 문제)

상황 🌈 개발을 하다가 span에 click event를 추가해야 하는 상황이 있었다. /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ ... hello 린트 에러 때문에 위에 린트 규칙을 무시한다는 문구를 써야 했다ㅠㅠ 내가 무시한 규칙들.. jsx-a11y/click-events-have-key-events : click event 를 가지면 key event가 필요하다는 규칙 : 마우스 없이 키보드만 사용하는 사람. 스크린 리더 사용자에게 필요함. 참고 sx-a11y/no-static-element-interactions : span은..

프론트엔드💛 2023.03.02
728x90