DevTools
-
IntelliJ에서 코드에 mouse cursor를 올려다 놓으면 tooltip과 lint와 같은 오류사항들이 같이 나와서 불편함을 겪을 때 대처 방법DevTools 2022. 5. 2. 13:13
Javascript로 개발하시는 분들이라면 eslint를 사용하실 텐데요. eslint에서 '너 이거 이거 고쳐야 돼' 하고 빨간 줄을 그어줍니다. 그럼 개발자는 고치려고 마우스 커서를 가져가게 되는데요. 이때 만약 사용하고 계신 언어가 스크립트 언어라고 한다면.... - Eslint에서 뿌려주는 경고 + Tooltip 두 가지 팝업이 같이 발생하여 Eslint에서 뿌려주는 경고가 Tooltip에 가려서 보이지 않습니다. 그리고 만약 사용하고 계신 언어가 컴파일 언어라고 한다면 - 컴파일러가 뿌려주는 경고 + Tooltip 두 가지 팝업이 같이 발생하여 컴파일러에서 뿌려주는 경고가 Tooltip에 가려서 보이지 않습니다. 이 두 가지 중 하나의 문제에 직면하게 되실 겁니다. 저도 계속 귀찮아서 T..
-
IntelliJ에서 여러 줄을 마우스 커서로 선택하고 싶을 때DevTools 2022. 5. 2. 13:10
IntelliJ 혹은 다른 개발 툴들을 사용하다 보면 우리가 아주 자주 사용한다고 볼 순 없지만, 만약 '필요한 특정 상황'에서 사용할 수 없다면 이따금씩 귀찮게 타이핑해 주어야 하는 기능이 있는데요. 필요한 특정 상황이란 아래와 같은 상황을 이야기합니다. created() { matchMedia = new MatchMedia() userAgent = new UserAgent() contactInformation = new ContactInformation() }, 이런 코드를 created() { matchMedia = new MatchMedia(); userAgent = new UserAgent(); contactInformation = new ContactInformation(); }, 만약 이렇게..
-
How can I use Prettier in VScode? / VScode에서 Prettier 자동 정렬하기, 자동 정렬에 대한 환경설정하기DevTools 2022. 4. 29. 11:51
안녕하세요? 요새 react를 vscode에서 개발하고 있습니다. 그런데 예전에 vue를 intelliJ에서 개발할 때에는 eslint라는 것이 있어서... 1) 특정 단축키를 눌렀을 때에 문법 교정 2) 저장을 할 때 문법 교정 3) 실시간으로 교정 eslint에서 지정한 틀에 위반되는 짓을 하거나, 오타가 나거나 하는 경우 교정을 해주었죠 1,2,3 번 중에 해당하는 방법으로요. 하지만 React에서는 Prettier라는 놈을 쓰더라고요? intelliJ를 쓰시던 분들은 Eslint와 비슷한 역할을 하는 놈이라고 알아주셨으면 좋겠습니다. 1. Prettier 플러그인을 설치합니다. 2. Prettier 설정 (1) Ctrl + ,를 누르거나 좌측 상단의 File > Preferences..
-
How can I revise tab size in VScode? / VScode tab size를 어떻게 변경할 수 있을까요?DevTools 2022. 4. 28. 20:42
개발하시면서 코드 정리 깔끔하게 하시고 싶은 분들께서는 tab size도 많이 거슬리실 겁니다. 사소한 여러개를 정리하고 나면 개발속도 차이도 많이나게 되고, 개발할때 마다 마음이 편해지죠. 저는 주로 VScode로 Web 프론트엔드 관련 작업을 하니까... JS파일에서 tab size를 조정하려 할때에 불편함을 느꼈을 경우라고 가정을 해보겠습니다 1. 우측하단에 space: 라고 되어있는 탭을 클릭합니다. 2. Indent Using Spaces를 클릭합니다. 3.사용하고 싶은 tab size를 클릭합니다. 위 방법은 일시적으로 한 파일만을 수정하는 방법입니다. 전체적으로 바꾸려면 Setting을 들어가셔서 만져주셔야 합니다. Setting > 검색창에 editor tab 검색 > tab..
-
How can I open new window in VScode? / VScode에서 새로운 창을 열어서 분리하는 방법DevTools 2022. 4. 28. 20:41
언젠가부턴가, 작업하고있는 창을 마우스로 그대로 끌어다가 밖으로 던지면 당연하게 창이 분리되는것으로 저는 생각하였습니다. 이것들 중 원하는 것을 마우스로 끌어서 밖으로 던지면 창이 확장되면서 듀얼 모니터로 하나하나 창을 띄워서 작업하는것이 가능할줄알았습니다. 하지만 그것은 저의 착각이였습니다. VScode에서 새창을 띄우는 방법 1. Ctrl + Shfit + N 으로 새 창을 띄웁니다. 2. 분리하고자 하는 파일을 새 창에 넣습니다. 3. 주의하셔야 할 점은, 분리된 파일에서는 전역검색이 되지 않습니다. 전역검색을 하시려면 가장 최초에 띄운 창으로 돌아가서 전역검색을 해주셔야 합니다. 혹시 이 문제 어떻게 해결하시는지 아시는분은 댓글 부탁드립니다..ㅠㅠ 제가 3번때문에.... '어라? 이..
-
How can I adjust terminal font size in VSCode / VScode에서 terminal 글자크기 조절하기DevTools 2022. 4. 28. 20:40
VS code를 사용하면서 불편했던것이 몇가지가 있었는데요(반대로 편한것도 많았죠..! 제가 감히 마소형님들께서 무료로 쓰라고 배포하신 툴을 갔다가 비판하려는 의도가 이니니 포스팅 보시는 분들이 오해 없으셨으면 좋겠습니다) Terminal 에서 표시되는 글자가 아래 와 같이 띄엄띄엄 나왔었던 것입니다. H i , M y n a m e i s . . . . 저는, 자간을 꼭 줄여야겠다고 마음먹었습니다. 보기에 불편했거든요. 아래와 같은 절차를 따라주시면 됩니다. 1. File -> Preferences -> Settings 들어가기 2. input 창에 terminal letter 검색 3. 빨간색 네모칸 안의 letter spacing을 고치시면서 본인에게 맞는 자간을 선택해주시면 ..
-
How can I change sidebar hover color in VScode / VScode sidebar 좌측에 선택된 color를 조정하는 방법DevTools 2022. 4. 27. 19:06
안녕하세요? 오늘은 VScode에서 좌측에 파일들의 리스트를 보여주는 파일 트리에서, 현재 점유하고 있는 파일들을 좌측에서 표시해 주는 색깔에 불편함을 느껴서 그 색깔을 커스텀 할 수 없을까라는 생각이 문득 들어서 찾아봤는데 역시 있더라고요. (이런 툴을 만드셔서 공짜로 뿌려주고 계신 마소 형님들께 감사를...) 그래서 좌측의 사이드 바에서 신경 쓰이는 부분들에 대해서 색깔을 변경하는 방법에 대해서 포스팅해볼까 해요. 아시겠지만 제가 이야기하는 사이드바는 아래 스크린샷에 해당하는 파일을 선택할 수 있는 영역입니다. 1. Mouse를 hover 했을 때의 background color 와 foreground color 지금 아래 화면에 보이시는 것처럼 background는 핑크색으로, foregroun..