Web Front-End/기타

VSCode Extentions (유용한.. 익스텐션)

여의도스토리 2020. 7. 21. 16:40

1. Active File In StatusBar

- 현재 파일 경로를 바 형태로 보여주는 확장팩

 

2. Auto Rename Tag

 - div, p, 와 같이 쌍으로 닫는 태그중 하나만 수정해도 쌍으로 쑤정해준다.

 

3. Better Comments

- 주석 룰에 따라 색을 표시해줌.. 은근 유용함

 

4. Bracket Pair Colorizer

 - 같은 블럭 끼리 색을 표시해준다.

 

5. ES7 React/Redux/GraphQL/React-Native snippets

- 리액트에서 일부 이니셜만 입력하면 코드 조각을 제공해준다.

 

6. ESLint

 - ESLint를 설치해야하고 VSCode 확장팩을 설치해야.. 코딩컨밴션 효과를 극대화할수 있다. 매우 유용

 

7. Highlight Trailing White Spaces

 - 여백을 표시해준다. 매우 유용

 

8. IntelliSense for CSS class names in  HTML

 - HTML에서 css 클래스 name을 찾아준다.

 

9. Korean Language Pack for Visual Studio Code

 - 영문을 읽는 습관을 들여야하긴하나... 한글팩.. 편하긴 함

 

10. Live Server

 - 간단히 Markup을 작성해보는 용도로 저장하자마자 결과물이 브라우저에 나타난다. 일종의 Hot Deploy.

 

11. Material Icon Theme

 - 여러 아이콘 테마가 있지만.. 머테리얼 아이콘 테마가 제일 이쁜듯

 

12. Prettier

 - ESLint와 마찬가지로 prettier를 설치한 후 확장팩을 설치한다.

 

13. Project Manager

- 프로젝트 별로 디렉토리를 관리해준다.

 

14. select highlight in minimap

 - 단어 등을 선택하면 미니맵에 나타내준다.

 

15. vscode-styled-components

 - react의 styled 컴포넌트에서의 css 프로퍼티가 css 파일에서 처럼 색깔을 입혀준다.