Lpla 개발 블로그

HTML&CSS

[SCSS] Live Sass Compiler 설정

vscode의 Live Sass Compiler를 사용하다보면 느끼는 두 가지 불편사항이 있다. 첫째는 불필요한 map 파일이 생성되고 css 파일 하단에 map 주석이 생성되는 점이다. 두번째는 컴파일된 css파일이 강제로 expanded 스타일로 생성되는 점이다. 다행히 설정에서 이 문제들을 해결할 수 있다. 먼저 vscode의 설정(ctrl + ,)에 들어간다. 그리고 Live Sass Compile를 검색하고 Settings: Generate Map을 settings.json에서 편집한다. 그러면 "liveSassCompile.settings.generateMap" 이 나타나는데 이 값을 false로 저장한다. 처음부터 false로 되어 있다면 그 상태 그대로 다시 저장한다. 그리고 map 파일을..

etc

VSCode CSS, SCSS 코드 한줄로 정렬하는 플러그인

비주얼 스튜디오 코드(Visual Studio Code)는 사용자의 취향에 따라 다양한 플러그인을 설치할 수 있다. 오늘은 그 중에 CSS와 SCSS에서 사용할 수 있는 Formatter를 추천하려고 한다. Formatter란 코드를 더 깔끔하고 가시성과 가독성이 좋게 자동정렬해주는 기능으로 대표적으로 Beautify와 Prettier 등이 있다. 나도 두 플러그인을 모두 사용해봤지만 Prettier는 내 취향과는 다른 형태로 강제 적용되다 보니 Beautify를 선호한다. Beautify를 한동안 쓰면서 큰 불편함은 없었지만 몇 달전부터 내 코드 정렬 방식에 변화가 생기면서 문제가 생겼다. .main_news_section .main_news_container { max-width: 1280px; ma..

etc

VSCode JQuery 코드힌트 안보이는 문제 해결

어느날부터 집에 설치된 VSCode에서 자바스크립트 코드힌트가 나오지 않았다. 아니, 자세히 살펴보니 자바스크립트는 문제 없었고 제이쿼리 코드힌트가 나오지 않았다. 문제 해결방법은 VSCode 터미널에 다음 명령어를 입력하면 된다. npm install @types/jquery --save 타입스크립트에서 제이쿼리를 사용하는 방법이라고 한다. ......난 타입스크립트를 쓸 줄 모르는데 뭘까? 예전에 node.js와 eslint를 설치하면서 문제가 생긴 모양이다. 결과적으로 제이쿼리 코드힌트가 아주 잘 보인다. 그런데 이번에는 제이쿼리 문법에 취소선이 생겼다. 실행은 문제없이 되지만 매우 거슬리는 관계로 없애는 방법을 찾아봤다. 원인은 on()이나 trigger() 방식을 사용하지 않아서였다. 그런데 j..