본문 바로가기

TOOL

 (71)
[Github] Github Pages 이용하여 홈페이지 배포 + 기존에 간단히 포스팅했던 글에 업그레이드 버전의 포스팅을 하려한다. (기존 포스팅 바로가기)
[VSCode] ctrl + k + f 단축키로 javascript도 줄바꿈 하기 Beautify의 안녕으로 줄바꿈을 찾아보다가 간혹 자바스크립트 파일에는 저 단축키가 적용되지 않는다는 글이 있다. 그래서 시도를 해보았는데 저 단축키 누르고 -> 아래와같은 알럿이 뜬다. 해당 파일의 language가 어떤 것인지 묻는 Configure 버튼을 누르면 vscode 상단에 언어선택이 나오는데 vscode typescript ~~ 어쩌고가 나오고 이걸 선택하면 줄바꿈이 활성화된다. 한번 인식된 언어의 파일은 다음부터 ctrl + k + f 를 누르면 더이상 묻지않고 실행된다. 🙂
[VScode] 자동 줄 맞춤 플러그인 Beautify가 사라졌다... vscode에서 코드 들여쓰기나 줄 맞춤을 정갈하게 도와주는 플러그인 Beautify가 더이상 유지 되지 않는다고 한다.......... 🤔 그래서 다른 플러그인을 찾아보았다. 그러다 단축키 Ctrl + K + F를 누르면 플러그인 Beautify 와 비슷하게 줄맞춤을 해준다! 어디서 나온 단축키일까 찾아보았더니 왼쪽 하단 톱니바퀴모양(manage) > Keyboard Shortcuts 를 들어가서 살펴보니 추측상 vscode에 내장되어있는 것 같다. 앞으로 vscode에서 줄바꿈은 Ctrl + K + F ! 잊지말자~
[intelliJ] scss 자동 컴파일 후 라이브 리로딩 기능 해제 html 작업을 할때 라이브로 브라우저를 띄우고, scss로 작업하는 도중 자동 컴파일까지는 괜찮은데 켜둔 라이브 브라우저에 바로 반영되기 때문에 하나의 스타일만 추가해도, 리로딩 되어버리면서 브라우저 검사에서 임의로 잡아둔 스타일이 다 없어져버린다! 따라서 저장버튼을 눌렀을 경우, 자동 컴파일은 되지만 입력을 멈췄을때 자동 컴파일은 원치 않기 때문에 이를 해제할 수 있는 기능을 찾아보았다. [Settings > Tools > File Watchers] 이게 작업 도중 너무 거슬려서 이것저것 눌러보고 다시 인텔리제이를 키고 난리치다가 알게되었다. Settings > Tools > File Watchers 에서 기존 설정해둔 SCSS 클릭, Advanced Options 안의 Auto-save edited..
[IntelliJ] 커서 단축키 설정 [동일 단어 멀티 커서] VSCode에서 동일 부분 멀티 커서 단축키가 윈도우 기준 ctrl + D 이다. 인텔리제이의 단축키도 동일하게 하기위해서 File > Settings > Keymap에서 변경할 것이다. 우선 "동일 부분 멀티 커서"라는 말을 인텔리제이에서는 영어로 어떻게 쓰이는지 구글링 후 "Add Selection for Next Occurrence" 로 검색후 해당 라인 더블클릭. Add keyboard Shortcut 를 클릭 > ctrl + D를 직접 시도하면 해당 키를 사용하고 있는 다른 부분의 리스트들이 뜰것이다. 그 요소들을 찾아서 수동으로 다른 단축키로 대체해야한다. 하지만 별로 상관없을 것 같다면 다음 나오는 알럿의 Remove(중복하여 ctrl + d를 사용하고 있던 목록들을..
[intelliJ] SCSS 사용하기위한 환경설정 intelliJ에서 SCSS를 CSS로 컴파일 하기 위한 방법은 다음과 같다. 윈도우 기준 ctrl+alt+S -> Settings 창을 띄워 Plugins에 File Watchers 설치 (그전에 node.js와 npm으로 sass를 전역으로 설치해야함) -> Settings 창에서 Tools > File Watchers 왼쪽 + 클릭후 SCSS 추가 및 더블클릭 후 아래와 같이 창이 나타나고 아래처럼 설정을 해준다.
[VSCode] 자동 formatter 플러그인 소개 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode Prettier - Code formatter - Visual Studio Marketplace Extension for Visual Studio Code - Code formatter using prettier marketplace.visualstudio.com React.js 공부를 하는 도중 VScod 플러그인 중 JSX (Javacript를 확장한 문법으로 HTML에서 사용한 문법과 흡사)를 입력하고 저장했을 시 자동 formatter 해주는 플러그인을 발견해서 소개하고자 한다. 1. VSCode 플러그인 : Prettier - Code formatter 검색 후 ..
[VSCode] Sass Live Complie 설정하기 SASS를 VSCode에서 사용하기 전에 몇가지 셋팅이 필요하다. 1. 어떤 파일을 컴파일 할것인가? 2. 컴파일한 css는 어떤 형태로, 어디에 저장할 것인가? 3. 오토프리픽스 즉, 브라우저 마다 지원하는 스타일로 변환을 할 것인가? 4. 컴파일시 .map 파일도 추가할 것인가? 1. 답 : 여기서는 style.scss만 컴파일 할것이다. 2. 답 : 여기서는 compressed(압축으로 기본 min 확장자명을 가진 파일)로, scss파일이 위치한 동일 선상에 저장할 것이다. 3. 답 : O 4. 답 : X .map파일은 추후 이 클래스의 스타일이 어디에 위치해있는지 보여주는 파일로 유용하게 쓰이기도 한다. [설치할 플러그인] Sass Live Sass Compiler [셋팅 방법] 왼쪽 하단 톱니바..

티스토리툴바