linter, prettier 설치하기

혼자 개발할땐 상관없지만 협업할 때는 각자의 스타일대로 코드를 짜기 때문에 가독성이나 일관성 문제가 있어

린터와 프리티어를 설정한다.

 

VScode 에디터 기준 Extension에서 scss-linter, sass-linter, stylelinter 등 여러가지가 있고

뭘 선택하냐에 따라 설치방법이 다르고 코드규칙을 어겼을 경우 경고해주는건 동일하다.

 

scss-linter는 node를 설치하듯 ruby를 설치해줘야 하기 때문에

sass-linter가 쉬운 방법인거 같다.

 

Linter

1.vscode에디터 Extension에서 scss-linter 다운로드

-ruby설치하기

 window : https://phoenixnap.com/kb/install-ruby-on-windows-10

How to Install Ruby on Windows 10 {2 Options}

mac : https://brew.sh/ 설치 후 터미널에서 brew install ruby 까지 한다음 

Homebrew

 

-윈도우 맥 둘다 gem install scss_lint 실행! 오류가 없어야 한다. 대게 설치가 안됐거나 버전이 낮거나.

-코드규칙은 프로젝트 파일에 .scss-lint.yml을 생성해줘야 작동한다.

정리하면,

에디터 Extension 다운 + 루비설치 + scss_lint 설치 + 코드규칙 파일추가

 

2. vscode에디터 Extension에서 sass lint 다운로드

-npm i -D sass-lint 실행. 잘 설치되었다면 package.json에 devDependencies에 추가됨.

.sass.lint.yml 파일 추가!

정리하면

에디터 Extension 다운 + sass_lint 설치 + 코드규칙 파일추가

 

Prettier

프리티어 Extension 다운  ->  .prettierrc 파일추가

-> Settings > format on save 체크됨. prettier config 체크됨.

-> 프리티어 Extension 설치화면 중 Default Formatter 에서 복붙할 코드를 settings.json 에 추가함