Korea Language Pack for Visual Studio Code(VS Code용 한국어 팩)

visual studio code를 한국어로 번역해주는 확장 프로그램이다.

Prettier - Code Formatter

사실 수업시간 강의에서는 beautify를 권장해주셨는데, 이 확장은 더 이상 유지 관리되지 않으므로 더 이상 사용되지 않습니다.라고 뜨고, 제목에 줄이 쭉 그어져있습니다. 그래서 대체할 수 있는 확장 프로그램으로 prettier를 추천합니다.

beautify와 비슷한 기능을 하는 prettier는 일단 찾아서 설치하고, '사용안함'으로 적혀져 있으면 '사용'으로 바꿔 주셔야 합니다.
그 다음에 c:로 들어갑니다.
경로는 c: -> users -> user -> appdata -> roaming -> code -> user -> settings 입니다.
settings로 들어가셔서,
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.printWidth": 5000,
"prettier.tabWidth": 2,
"[html]": {
"editor.formatOnSave": true
},
"[css, javascript]": {
"editor.formatOnSave": false
},

로 적어줍니다.
여기서 .printWidth는 끊을 열입니다. 약 5000열에서 끊겠다는 말입니다.
tabWidth는 공백입니다. 저희는 공백을 2로 잡았습니다.
"[html]": {"editor.formatOnSave": true}
는 html에서 저장할 경우 자동으로 코드가 정리된다는 말입니다.
현재 제 글에서는 css와 javascript는 저장해도 자동으로 코드가 정리되지 않습니다. 혹시 자동으로 코드가 정리되기를 원하시는 분들은 false를 true로 바꿔주시기 바랍니다.

위의 설정이 끝나고 나면 항상 저장할 때마다 코드가 깔끔하게 정리가 됩니다.

Auto Rename Tag

tag를 고쳐야 할 때, auto rename tag를 깔아둔 뒤, tag를 고치면 앞의 태그와 뒤의 태그가 동일하게 바뀝니다.

Live server

원래 자신이 만든 홈페이지를 확인하려면 저장한 뒤, 홈페이지로 들어가서 새로고침을 해야하지만, live server가 깔려있으면, 열고싶은 파일을 클릭한 뒤, open with live server를 눌려주면 됩니다.

HTML to CSS autocompletion, HTML CSS Support, CSS Peek

위의 프로그램들은 HTML에서 원하는 태그, 클래스, ID를 CSS에서 찾을 때, 혹은 CSS에서 HTML에 있는 태그, 클래스, ID를 찾을 때, 사용되는 확장프로그램입니다.

CSS Initial Value

css속성의 기본 값을 알려주는 확장프로그램입니다. 강의를 듣다보면 강사님께서 기본값을 아는 것이 좋다고 하시더군요. 하지만 기본값을 아직 잘 모를 때 사용하면 좋을 것 같습니다.

px to rem

단위값인 px, em, rpx, vw들, 서로를 치환할 수 있는 확장프로그램입니다.

Code spell checker

사실 코딩을 할 때, 가장 오류가 많이 나는 원인은 철자의 실수라고 들었습니다. 그러한 실수를 줄여주기 위한 확장프로그램으로, 코드 내 철자를 검사해줍니다.