반응형 개발/VSCode10 VSCode Amazon Q(구 AWS Codewhisperer) 사용하기 VSCode에서 AI 기반 코드 자동완성을 지원해주는 Amazon Q(구 AWS CodeWhisperer)를 적용하고 사용해본다. 먼저 VSCode 확장프로그램에서 CodeWhisperer로 검색해서 AWS Toolkit을 설치한다. 설치가 완료되면 아래와 같은 화면이 뜨고 가장 왼쪽에 있는 "Amazon Q + CodeWhisperer" 옵션의 버튼을 클릭한다. VSCode에 AWS Builder ID 관련 팝업이 뜨는데 클릭하고 넘긴다. AWS Builder ID 인증을 위해 브라우저 열기를 한다. 복잡한 인증 과정이 있는 것은 아니고 이메일 주소만 있으면 Builder ID 쉽게 생성할 수 있다. 브라우저가 열리고 Builder ID가 없는 경우 생성을 진행하고, 있는 경우 로그인을 해준다. Bu.. 2024. 4. 28. VSCode TypeScript 빨간줄 에러 VSCode에서 TypeScript 코드 작성 중인데 import문부터 코드 전체적으로 빨간줄 에러가 여기저기 나타났다. 실행에는 문제가 없었지만 계속 신경이 쓰여서 설정들을 살펴봤는데 원인은 설정된 TypeScript 버전 문제였다. 먼저 증상은 아래와 같이 시작됐다. 기본적인 import문인데 .ts파일로 작성하면 문제가 됐다 적용된 TypeScript 버전 변경을 위해 CMD + Shift + P 에서 '버전'을 검색하여 TypeScript 버전 선택 화면을 보니 언제적 버전인지 2.4.1이 설정이 되어있었고, 필자 같은 경우 작업 영역들에 있는 선택할 수 있는 다른 버전들 안나오는 상태였다. 일반적으로 레퍼런스들을 보면 다른 선택할 수 있는 버전들이 뜨고 그것을 선택해서 변경을 해주면 된다고 하는.. 2023. 11. 21. 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 Reactjs code snippets(코드 자동 생성) React 개발을 하다보면 컴포넌트 생성 시 마다 작성해줘야 하는 공통 부분들이 있는데 이러한 템플릿을 자동으로 생성할 수 있는 VSCode Extension이 Reactjs code snippets 이다. Reactjs code snippets 설치 VSCode 좌측의 Marketplace를 선택하고 "Reactjs code snippets"으로 검색을 한다. 그러면 검색 결과로 여러 개가 나오는데 제작자가 charalampos karypidis로 된것을 선택하고 설치를 한다. 필자는 이미 설치가 되어 있어서 설정 아이콘이 표시가 되는 것이다. Reactjs code snippets 사용법 설치를 하게되면 몇가지 단축키만으로 코드 템플릿을 생성할 수 있다. 예를 들어 작성할 .js 파일을 생성 후 "r.. 2023. 9. 2. VSCode 개발환경 - html 태그 자동 닫기 및 이름 변경(Auto Close Tag, Auto Rename Tag) VSCode에서 html, JSX 등 태그 코드를 작성할 때 매번 Close 태그를 직접 작성해주거나, 매칭 되는 태그명을 변경할 때 Open,Close태그명을 각각 수정해주면 많이 번거롭다. VSCode Extension으로 Auto Close Tag, Auto Rename Tag를 설치해주면 프론트 개발하기가 훨씬 수월해진다. 2개 모두 VSCode Marketplace를 통해 쉽게 설치 가능하다. 1. Auto Close Tag 자동으로 Close 태그를 생성해준다. VSCode에서 좌측 메뉴의 Marketplace를 선택하고, "Auto Close Tag"로 검색하면 아래와 같이 검색 결과가 나오고 설치 버튼만 클릭하면 된다. 필자는 이미 설치가 되어 있어서 설치버튼 대신 설정이 보이는것 뿐이다... 2023. 9. 2. 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. 이전 1 2 다음 반응형
