반응형 vscode6 VSCode Snippet Generator(사용자 정의 스니펫) 활용 Snippet이란 재사용 가능한 소스코드, 텍스트의 일부분을 일컫는 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와주는 것이다. 간단히 말해, 매번 동일하게 반복적으로 넣어줘야 하는 코드를 자동화 시키는 개발 편의 기능이라고 볼 수 있다. VSCode에서 사용자 스니펫을 쉽게 직접 생성할 수 있는 방법을 알아본다. 아래 사이트에 접속한다. Snippet 템플릿을 생성해주는 사이트이다. https://snippet-generator.app/ snippet generator Snippet generator for Visual Studio Code, Sublime Text and Atom. Enjoy :-) snippet-generator.app 사이트에서 왼쪽 영역에 생성하고자 하.. 2023. 9. 22. VSCode Auto Import - import문 자동 생성 vscode에서 react나 node.js로 개발 시 import문 작성하는게 많이 귀찮은데 Auto Import 확장프로그램을 설치해서 사용하면 편리하다. vscode 좌측 메뉴 중 확장프로그램에서 "auto import"라고 검색하고 설치해주면 된다. 그리고 vscode를 재기동 한다. 아래 예시와 같이 Router라고 입력하면 하단에 import 대상들이 표시되고 선택만 하면 상단에 import문이 추가 된다. 혹시 잘 안되는 경우 프로젝트 Root에 jsconfig.js 파일을 생성하고, 아래와 같이 넣어준 후 해보자 { "compilerOptions": { "target": "es6", "module": "es2015" } } 연관 글: VSCode Reactjs code snippets(코드 .. 2023. 9. 17. VSCode 터미널 출력 버퍼 라인수 늘리기 VSCode 터미널의 기본 출력 버퍼가 작아서 전체 로그가 다 안보이는 경우가 있다. 설정을 통해서 VSCode 터미널의 출력 버퍼 사이즈를 늘려본다. 먼저 설정 화면을 실행시킨다. 설정 단축키 "CMD ,"(CMD와 콤마)를 눌러준다. 또는, VSCode의 좌측하단에 톱니바퀴 모양의 아이콘을 클릭한다. 또는 아래처럼 기본설정 > 설정을 클릭해도 된다. 설정 화면에서 "scrollback" 키워드로 검색한다. 그리고 기능 > 터미널에서 Terminal > Integrated: Scrollback 항목의 값을 원하는 값으면 입력한다. 기본값은 1000으로 되어 있을 것이다. 2023. 9. 14. VSCode Parsing error: No Babel config file detected for .vue, .js 파일 VSCode로 vue 프로젝트를 생성하고 .vue, .js 파일들을 클릭해서 보니 아래와 같은 빨간색 밑줄과 함께 Parsing에러가 떴다. 실행에는 문제가 없어보이지만 신경이 계속쓰여 조치 내용을 알아봤다. VSCode에서 프로젝트의 ESLint 설정 파일 관련 에러라고 하는데 VSCode settings.json에서 아래 내용 추가하면 없어진다. 1. VSCode 단축키 ⌘,(=Code > Preference > Settings) 실행하고, 우측 상단에 아래 아이콘을 클릭한다. 2. 아래 eslint 관련 설정을 추가하는 내용 작성 후 저장한다. "eslint.workingDirectories": [ { "mode": "auto" } ] 3. 다시 화면을 가보면 에러가 사라진 것을 볼 수 있다. 2022. 3. 20. VSCode 개발환경 - Extension 플러그인 설치 VSC로 프로튼엔드 개발할 경우 자주 사용되는 유용한 플러그인들에 대한 설치 방법을 알아본다. 1. Live Server - html파일을 localhost에서 서버로 실행할 때 사용한다. vsc좌측에 Extensions를 선택하고, "Live Server"로 검색 후 Install 을 클릭한다. 실행은 html 파일에서 마우스 오른쪽 클릭 후 "Open with Live Server"를 클릭하거나 [⌘L ⌘O]단축키를 눌러준다 아래와 같이 http://127.0.0.1:5500 으로 실행 된다. 2. ESLint - Javascript 문법 검사기 - 파일을 저장할 때 마다 ESLint 규칙에 따라 코드를 자동 교정 처리하기 VSC의 'Code > Preference > Settings'에서 우측 상단.. 2022. 3. 16. VSCode Prettier 사용 Prettier 코드를 분석하여 깔끔하고 일관된 코드 스타일을 유지할 수 있도록 해주는 Code Formatter Prettier 설치 vsc에서 좌측에 '확장' 메뉴를 클릭하고 "prettier"로 검색 후 "설치" 클릭 Prettier 설정 vsc에서 'Code > 기본설정 > 설정' 클릭 - 상단 검색창에 "editor format on save" 입력하고, 체크박스 체크(파일 저장 시 Formatter 적용) - 다음으로 상단 검색창에 다시 "editor default formatter" 입력하고, Default Formatter에서 "Prettier - Code formatter" 선택 2022. 3. 15. 이전 1 다음 반응형
