VS Code Extension 정리

1. Error lens

코드에 오류가 있을 시, 오류 내용을 화면에 띄워준다.

2. Colorize

색상과 관련된 설정 사용 시, 해당 텍스트에 맞는 색을 덮어 씌워 준다.

css 외에 html, js에서 사용하려면 해당 플러그인의 settings.json에서 아래처럼 수정해야 한다.

  // html, js 추가
"colorize.include": ["**/*.html", "**/*.js", "**/*.css", "**/*.scss", "**/*.sass", "**/*.less", "**/*.styl"],
"colorize.languages": ["html", "javascript", "css", "sass", "scss", "less", "postcss", "sss", "stylus", "xml", "svg"]

 

 

3. file-size

오른쪽 아래에 현재 열려있는 파일에 대한 사이즈를 알려준다.

4. Auto Close Tag

시작 태그를 작성하면 자동으로 닫는 태그를 만들어 준다. XML 파일 등도 지원해 주어서 기본 기능보다 편리한 면이 많다.

 

 

5. Auto Rename Tag

기본적으로 VS Code에서 기능을 제공하지 않는다. 완성된 태그의 시작 태그, 닫는 태그 둘 중 하나에서 태그 이름을 변경하면 같이 변경된다.

 

 

6. Material Icon Theme

Icon들에 테마를 적용한다.

파일 아이콘 테마 설정 -> Material Icon Theme 클릭

 

 

7. Power Mode

타이핑 시 여러 가지 효과를 제공한다. 생각보다 렉이 발생하므로 설정에서 단순한 이펙트만 사용하길 추천한다.

 

 

8. Bracket Pair Colorization Toggler

Bracket들의 영역이 헷갈리지 않게 색상을 표시해 준다.