오늘도 lint의 설정은 힘들다.
Stylelint
stylelint는 eslint와 같이 정적 분석 도구로서 css를 작성할 때 많이 사용되는 공통적인 규칙을 지키며 개발할 수 있도록 도와준다. Sass, SCSS등 다양한 css 확장 문법에도 적용할 수 있다.
문제
eslint와 prettier는 사용해봤지만 stylelint는 처음이었다. 그래도 설정 파일과 관련 모듈을 한번에 제공받아 쉽게 사용할 줄 알았으나 vscode의 extension을 설치하고 프로젝트에 stylelintrc도 잘 있는데 영 동작하지 않았다. 버전 확인도 하고 익스텐션도 재설치해봤지만 무용지물.. 그리고 마침내 해결했는데 그 원인은 바로 vscode의 설정이었다!
vscode의 setting.json
vscode의 여러가지 설정을 하는 파일인데, 여기서 stylelint를 사용하도록 설정해줘야한다
ctrl + shift + p => open settings로 열 수 있다
- 내가 사용한 설정
"stylelint.enable": true,
"stylelint.config": null,
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"],stylelint.config : 문제의 원인. null로 두자.
user setting ui 페이지에서 setting.json으로 넘어가면서 에디터가 기본값으로 stylelint.config:{ } 이렇게 중괄호를 열어 빈 객체를 생성해주었다. 그런데 이상태로는 동작하지 않았다. 이걸 stylelint.config: null로 바꿔주니 그제서야 린트가 동작하고 오류를 잡아냈다.
stylelint.enable : 당연히 stylelint를 활성화해야 사용할 수 있다.
css/less/scss.validate : 이건 vscode에서 기본적으로 제공하는 css,less,scss의 코드 validate를 사용할것인지를 정하는것으로, stylelint를 사용하므로 false로 해주고
"stylelint.validate": ["css", "scss"]로 css, scss에 대해 stylelint를 사용한다고 지정해주었다.
적용해본 후기
사용하면 이렇게 에러메시지를 띄워준다
순서도 잡아준다
stylelint가 적용되면 scss 문법, 세미콜론 등 지정한 규칙을 모두 잡아주는데 가장 좋았던 것은 속성들 사이의 순서까지 잡아준다는것이다. 한가지 selector에 많은 속성이 들어가면 display에 관련된 속성이랑 color, margin 등이 뒤섞여서 중복 선언이나 덮어쓰는 문제가 일어날 위험이 있었는데 순서를 정렬하니 한결 보기 편했다.
