VS code에서 확장프로그램을 사용하는 이유는 여러가지가 있다. HTML을 작성할 때 실시간으로 볼 수 있게 하거나 코드의 가독성을 높이거나 등등 개발을 더 쉽게 할 수 있도록 도와주는 도구이다!
1. Auto Rename Tag
HTML, XML, php 등 태그의 이름을 바꾸면 쌍을 이루는 닫힘 태그의 이름이 자동으로 바뀐다.
2. Auto Close Tag
Auto Rename Tag와 함께 사용하는 유용한 플러그인이다.
태그를 작성할 때 기본적으로 여는 태그와 닫는 태그를 일일이 입력해야 하던 것을 입력태그만 입력하게 해준다.
즉, 만 입력을 해도
가 자동으로 작성이 된다.
vs code 1.6버전 이후부터는 html에 대해서는 포함되어 있다고 하지만, html외에 나머지 파일에서는 작동을 하지 않아서 결국 설치를 하는 것이 편의성이 증가한다.예를들어, js, jsx, php에서도 태그를 코딩할수 있기 때문이다.따옴표 안에서도 작동을 해서 여러모로 필수적인 확장 플러그인.
3. Color Highlight
색을 지정할 때 rgb나 16진수(#F699CC) 등 색상코드로 입력하면 해당하는 색을 코드의 배경색으로 보여준다!
CSS를 입히는 과정에서 현재 무슨 색으로 적용하였는지 바로바로 볼 수 있다.
4. indent-rainbow
들여쓰기를 무지개 색상으로 표현되어 코딩에 도움을 주는 프로그램이다!
5. Korean Language Pack for Visual Studio Code
한국어 팩을 설치해 VS code를 한국어로 설정할 수 있다.
6. Material Icon Theme
아이콘 테마를 설정할수 있다. Material 외에도 많은 테마가 있으서 취향에 맞게 선택할 수 있다!
7. Image Preview
이미지 URL 코드에 마우스를 올려놓으면 미리보기 이미지를 제공하는 확장 프로그램이다.
8. HTML CSS Support
html 요소의 class에서 css 선택자 요소를 쓸때 자동 완성 기능을 지원해주는 익스텐션이다.
부트스트랩 같은 거대한 css 프레임워크를 사용할때 매우매우 유용하다. 아주 빠르게 클래스 속성 코딩이 가능하다.
또한 html 뿐만 아니라 여러 언어들도 적용되게 할수있는데, vscode의 setting.json에 가서 다음 코드를 추가해주면 된다.
//* HTML CSS Support 추가 설정
"css.enabledLanguages": [
"html",
"javascriptreact",
"typescriptreact",
"typescript",
"javascript",
"njk",
"nunjucks",
"html-nunjucks",
"php"
],9. Live Server
웹 개발을 한다면 정말 필수적으로 설치해야하는 확장프로그램으로, 코딩하고 있는 홈페이지를 확인할 수 있는 실시간 서버가 열린다.
10. Pretier-Code formatter
1-1. 익스텐션 설치하기 (Install)
1-2. settings.json 접근하기
1-3. settings.json에서 기본 설정하기
{
...
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true
}2-1. 커스텀 Prettier 적용하기(.prettierrc)
2-2. 2-2 Prettier에서 설정 가능한 전체 옵션들
{
"arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
"bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부
"endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
"htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
"jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
"jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
"printWidth": 80, // 줄 바꿈 할 폭 길이
"proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
"quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
"semi": true, // 세미콜론 사용 여부
"singleQuote": true, // single 쿼테이션 사용 여부
"tabWidth": 2, // 탭 너비
"trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
"useTabs": false, // 탭 사용 여부
"vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
"parser": '', // 사용할 parser를 지정, 자동으로 지정됨
"filepath": '', // parser를 유추할 수 있는 파일을 지정
"rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
"rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
"requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
"insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
"overrides": [
{
"files": "*.json",
"options": {
"printWidth": 200
}
}
], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}