반응형
m.logPrint() is working!
<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].
docuK1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.
Table of Contents is filled out.
Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.
<cite> and <refer> tags are rendered to show bubble reference.
<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.
Current styles (dark/bright mode, font-family, font-size, line-height) are shown.
kakao.js with id="kakao-js-sdk" is loaded.
New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.
m.delayPad=512;
m.wait=1024;
wait 1196ms.
<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].
docuK1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.
Table of Contents is filled out.
Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.
<cite> and <refer> tags are rendered to show bubble reference.
<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.
Current styles (dark/bright mode, font-family, font-size, line-height) are shown.
kakao.js with id="kakao-js-sdk" is loaded.
New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.
m.delayPad=512;
m.wait=1024;
wait 1196ms.
- Creative Commons
- 저작자표시 - 적절한 출처와, 해당 라이센스 링크를 표시하고, 변경이 있는 경우 공지해야 합니다. 합리적인 방식으로 이렇게 하면 되지만, 이용 허락권자가 귀하에게 권리를 부여한다거나 귀하의 사용을 허가한다는 내용을 나타내서는 안 됩니다.
- 비영리 - 이 저작물은 영리 목적으로 이용할 수 없습니다.
- 변경금지 - 이 저작물을 리믹스, 변형하거나 2차적 저작물을 작성하였을 경우 그 결과물을 공유할 수 없습니다.
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
(If this article was helpful, please click the ad once. Thank you. ;)
Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 3.3.3
Canonical URI: https://kipid.tistory.com/entry/개발하는데-유용한-VS-Visual-Studio-Code-확장팩
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/349
document.referrer: Empty
width: 1280, height: 720, version: 3.3.3
Canonical URI: https://kipid.tistory.com/entry/개발하는데-유용한-VS-Visual-Studio-Code-확장팩
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/349
document.referrer: Empty
개발하는데 유용한 VS (Visual Studio) Code 확장팩 (Extension)
참조한 블로그 글:
[01]
Ref. [01] 💽 개발하는데 유용한 VSCode 확장팩 - 유료 IDE 못지않게, 2022-06-19
[02]
Ref. [02] 💽 HTML / CSS 코딩하는데 유용한 VSCode 확장팩, 2022-06-18
Table of Contents
PH1.Posting History
1.확장팩 까는 법 (How to Install Extension)
1.1.여러 컴퓨터에서 설정과 확장팩 sync 맞추기
2.코딩시간을 절반으로 줄여주는 VSCode 9개 기능 by 코딩애플
3.편리하게 개발할 수 있는 확장팩
3.1.Project Manager
3.2.Inline Parameters for VSCode
3.3.Live Server
3.4.Tabnine: AI Chat & Autocomplete for JavaScript, Python, Typescript, Java, PHP, Go, and more
3.4.1.IntelliCode
3.5.Code Runner
3.6.Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro
3.7.Error Lens
3.8.Bracket Peek
3.9.Surround
RRA1.References and Related Articles
T3.편리하게 개발할 수 있는 확장팩
▼ Show/Hide
VS Code 에서 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩
T3.1.Project Manager
VS Code 는 사실 개발환경이라기보단 편집기에 가까워서, 내가 다른 프로젝트로 변환하려면
Fig. (3-1): 다른 프로젝트로 변경하려면 Open Folder 를 매번 눌러 해당 프로젝트로 이동해야 한다.
Fig. (3-2): Project Manager 를 이용하면 여러 프로젝트의 폴더를 하나에 묶어서 표현할 수 있고, 프로젝트간 toggle 이 쉬워진다.
Fig. (3-3): Project Manager: Save Project
T3.2.Inline Parameters for VSCode
함수의 parameter 들을 표현해 준다는거 같은데, 잘 동작 안함.
Comment 로 parameter description 을 준 것만 나타내 주는건가? 암튼 맘엔 안듬.
T3.3.Live Server
Fig. (3-4): Live Server: Local file 들을 Live Server 로 deploy 해서 path 가
/login, /signup 이런 것까지 잘 동작하도록 만들어준다.T3.4.Tabnine: AI Chat & Autocomplete for JavaScript, Python, Typescript, Java, PHP, Go, and more
AI coding helper 라는데 써봐야 뭐가 좋은지 알것 같아서 설명은 잠시 보류.
사이트에 가입해야만 쓸 수 있고, 무료 버전은 하루 제한량이 있는듯.
써보니 의도하지 않은 방향으로 코드를 자꾸 추천해줘서 지웠음. 개인적으론 별로인듯 이런 AI 툴들.
Fig. (3-5): Autogenerate high-quality code as you type
Fig. (3-6): Instantly turn plain text into working code
Fig. (3-7): Eliminate repetitive tasks with autofill
T3.5.Code Runner
자바 (Java), C, 파이썬 (Python) 등 다양한 언어를 컴파일 실행하도록 지원해 준다. 당연히 JS (JavaScript) 도 바로 바로 실행해서 결과값을 확인할 수 있단다.
Fig. (3-8): Code Runner: Python Example
T3.6.Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro
SCSS나 타입스크립트를 CSS나 자바스크립트로 컴파일 할때 대부분 터미널에서 컴파일 작업을 수동으로 해왔을 것이다.
이 익스텐션은 단순히 저장만 해주면 알아서 바로 컴파일 되는 엄청난 편리함을 제공한다.
Sass/Less/Stylus/Pug/Jade/Typescript/Javascript 를 지원한다.
단점으로는, 만일 컴파일 오류가 있을때 에러메세지 보기가 약간 힘들단다.
그런데 TypeScript 에서 const 변수는 JavaScript 에서도 const 로 변환되야 하는거 아닌가? ㅡ,.ㅡ;;; 못써먹을수도? 아님 TypeScript 설정을 바꾸면 될라나?
T3.7.Error Lens
코드에 에러가 있을 경우 해당 줄에 오버레이 형식으로 띄워준다.
오타, 괄호 실수, 라이브러리 미참조 등 왠만한 오류는 컴파일이나 실행해보기 전에 이걸로 잡을 수 있단다.
T3.8.Bracket Peek
해당 태그나, 중괄호가 어느 코드의 중괄호인지, 상단에 미리보기를 띄워준다.
직접 스크롤을 올려서 확인하지않고, 바로바로 알수있어서, 소소하면서도 편한 기능이다.
html, php, js, java, c, css 등 많은 언어를 지원한다.
Fig. (3-9): 어느 DOM elements 의 자식들인지, 어떤 CSS selector 의 style 인지 보기 쉽게 만들어준다.
T3.9.Surround
제어문 블럭을 자동완성해주는 아주 편한 도구이다.
만일 어느 문장에 try catch 문을 넣고싶다면, 일일히 타이핑 하지않고 간단한 조작으로 완성 할 수 있다.
코드를 선택하고
ctrl+shift+T 를 누르고 제어문을 선택하면 자동완성 된다.▲ Hide
TRRA1.References and Related Articles
▼ Show/Hide
- Ref. [01] 💽 개발하는데 유용한 VSCode 확장팩 - 유료 IDE 못지않게, 2022-06-19
- Ref. [02] 💽 HTML / CSS 코딩하는데 유용한 VSCode 확장팩, 2022-06-18
▲ Hide
* 게시글 관련 링크들 in Recoeve.net (3S | Slow/Sexy/Sincere SNS)
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
유튜브 음악, K-Pop MV 들을 광고없이 목록재생 해서 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
츄츄와 루루 (포메라니안 6세/3.5kg, 3개열/1.0kg) 의 사진/동영상들을 모아 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
(If this article was helpful, please click the ad once. Thank you. ;)
반응형
'[IT|Programming]' 카테고리의 다른 글
| Random number generator (무작위 수 생성기) (0) | 2024.08.27 |
|---|---|
| 판매 완료 :: 중고 노트북 (LG gram 17인치, 2023-05-24 에 산 제품, i5 core 2.4GHz, 8GB ram, HD 256GB, windows 11 pro) 판매하기 (90만원), 중고 노트북 판매하는 법 (1) | 2024.08.21 |
| 코드잇 풀스택 2기 - Week 3 (0) | 2024.08.20 |
| 터미널 (Terminal) | Cmd (Command|커맨드) 창 | Sublime text build results 창 에서의 한글 깨짐 해결 방법. (Windows) (1) | 2024.08.18 |
| Installing and Learning JAVA (0) | 2024.08.13 |
| .gitignore 설정하기 (0) | 2024.08.13 |
| 코드잇 풀스택 2기 Week 3 - 서술형 평가 (Git and GitHub Collaboration) (5) | 2024.08.09 |
http/https 링크및 수식 (\ [ Outline 수식 \ ],\ ( inline 수식 \ )::\이후 띄어쓰기 없이) 을 넣으실 수 있습니다. 또한 code 는```시작,```/마지막으로 감싸 주시면 pretty-printed 되어서 나타납니다.```[.lang-js.scrollable.no-linenums]같이 언어를 선택해 주실수도 있고, 긴 수식의 경우 scroll bar 가 생기게 만드실 수도 있습니다. .no-linenums 로 line numbering 을 없앨수도 있습니다.댓글 입력 후 rendering 된 형태를 보시려면, Handle CmtZ (단축키: N) 버튼을 눌러주세요. 오른쪽 아래 Floating Keys 에 있습니다. 아니면 댓글 젤 아래에 버튼이 있습니다.