반응형 Prettier 줄 바꿈 방지 및 해제하는 방법 VSC를 처음 사용할 때, 필수 익스텐션에 꼭 포함되는 코드 포맷터인 Prettier. 그만큼 정말 유용하게 사용하고 있지만 가끔 의도와 다르게 자동 줄 바꿈이 일어날 때가 있습니다. 이 글에서는 줄 바꿈을 방지하는 방법과, 저장 시 코드 포맷팅을 해제하는 방법을 알아보겠습니다. Print Width 늘리기 가장 간단한 방법은 Print Width를 늘려서 자동 줄 바꿈의 영역을 늘리는 것입니다. 맥은 cmd + shift + p, 윈도우는 ctrl + shift + p 키를 눌러 명령 팔레트를 실행시켜 줍니다. 그 다음 사용자 설정을 열어주고, 'print'를 검색한 후 Print Width를 조절하면 됩니다. 또는 .prettierrc 파일을 생성하여 옵션을 설정 해줘도 됩니다. .prettierrc.. 2023. 1. 3. VS Code 커서 스타일 및 애니메이션 변경하기 Visual Studio Code에서 커서의 스타일(색상, 너비 등)과 애니메이션을 변경할 수 있다. cmd(윈도우는 ctrl) + shift + p로 명령 팔레트 실행 json 검색 기본 설정: 설정 열기(JSON) 커서 스타일 색상 코드 "workbench.colorCustomizations": { // 에디터 커서 색상 "editorCursor.foreground": "#ffff00", // 터미널 커서 색상 "terminalCursor.foreground": "#ffff00" } 커서 색상 선택 참고 - Color Tool 너비 코드 "editor.cursorWidth": 6 스타일 line(기본값) block underline line-thin block-outline underline-thin.. 2022. 3. 18. VS Code extension인 Bracket Pair가 네이티브 기능이 되다 어느 날 VS Code를 사용하는데 Bracket Pair 관련 알림이 자꾸 뜨는 것이다. 어느 정도 무시하다가 계속 뜨길래 결국 확인해봤다. However since native functionality is available, it's time to deprecate this extension - bracket pair github 오랫동안 인기를 얻음에 따라 bracket pair가 결국 VS code의 네이티브 기능이 되었다는 것이다. 따라서 '이제는 확장으로 사용할 수 없으니 bracket pair를 지우고 내장된 기능으로 사용하라'는 알림이었던 것이다. 그래서 기존 사용자는 확장탭에서 bracket pair를 지우고, 신규 사용자의 경우 추가로 extension 설치를 할 필요없이 settin.. 2021. 12. 28. 터미널에서 'code' 명령어가 안될 때 해결 방법 터미널에서 VS Code 바로 열기 VS Code에서 cmd + shift + p로 명령 팔레트를 열고, code라고 검색 후 설치해주면 터미널에서 code . 명령어로 해당 경로의 VS Code를 바로 열 수 있다. 그렇게 잘 사용해오다가 맥북 M1으로 교체하고 난 후 적용해보니 아래와 같이 설치가 되지 않았다. 맥북 M1 이슈인듯 한데 계속 사용하다보니 자잘한 버그가 많다. 해결 방법은 간단하다. 먼저 code 명령을 제거한 후 설치를 진행하면 정상 작동한다. I found a fix. I simply uninstalled the code command from PATH in vscode and reinstalled. i.e open the command pallete, search "uninstal.. 2021. 12. 15. VS Code 필수 Extension 모음 - 2(feat. 드림코딩) 1. Indent Rainbow Extension 모음 1편에서 Bracket Pair Colorizer가 괄호에 색상을 입혀준다면 이 익스텐션은 위 사진과 같이 들여쓰기에 색상을 입혀준다. 이 익스텐션도 설치하면 코드 가독성이 더 좋아진다. 2. Auto Rename Tag 위와 같이 자동으로 닫힘 괄호를 수정해준다. 은근히 시간을 절약해주는 익스텐션이다. 3. CSS Peek 맥은 cmd + click, 윈도우는 ctrl + click으로 HTML 클래스에서 해당 클래스의 CSS로 바로 이동이 가능하다. 4. HTML to CSS autocompletion HTML에 있는 class name이나 id name들을 CSS 파일에 제공해준다. 5. HTML CSS Support HTML to CSS co.. 2021. 6. 19. VS Code 필수 Extension 모음 - 1(feat. 드림코딩) 1. Material Theme VSCode에서 다양한 테마를 사용해봤지만 Material Theme의 'Material Theme Daker High Contrast' 테마가 가장 가독성도 좋고 보기에 편했다. 개인적으로 Cobalt2도 좋지만 다크모드가 아쉬워서 다시 material theme로 돌아가게 되었다. 2. Material Icon Theme 적용 전과 후를 비교하기 위해 Material Icon Theme를 비활성화 했는데 원래 저랬었나..? 생각보다 별 차이는 없는 것 같다.(아마 업데이트하면서 변경된 것 같다.) 난 테마에 적응하기도 했고 아이콘이 좀 더 크고 색이 선명해서 계속 쓰려고 한다. 3. Prettier - Code formatter 코드 포맷팅을 정말 쉽게 해준다. 이 익.. 2021. 6. 17. 이전 1 다음 반응형
