[플러터 강좌] 플러터(Flutter) 시작하기 - VS Code 필수 익스텐션

이전 글 "플러터 시작하기- 설치" 에서 플러터 개발에 이용할 데이터로 VS Code 를 추천 드렸는데요, VS Code로 플러터 개발을 할 때 필수 익스텐션을 소개해 드리려고 합니다.

https://medium.com/flutter-community/must-have-vs-code-extensions-for-working-with-flutter-e31a421b9c68

Flutter & Dart

VS Code 플러터/Dart 플러그인은 상당히 잘 만들어져 있고, 깔고 안깔고의 차이가 정말 천차만별입니다. 아래의 두 플러그인은 무조건 설치 하셔야 합니다. 플러그인을 설치하시면 VS Code에서 플러터 코드를 작성하는데 효율이 10배 이상 증가하고, 코딩 뿐만 아니라 디버깅과 패키지 로딩 등의 과정도 훨씬 수월해 집니다. 핫 리로드(hot reload)와 핫 리스타트(hot restart)도 예전에는 문제가 좀 있었지만 지금은 아주 잘 지원되며 플러터 웹도 지원됩니다. 추후에 성능 개선을 위해 프로파일링을 해야 할 때도 이 플러그인 덕을 톡톡히 보게 됩니다. 

https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code

 

아래 두 옵션을 꼭 켜시기를 추천합니다. 때때로 약간의 버벅임은 생길 수 있으나, 플러터 코드의 단점중 하나를 커버해 줍니다.

Code Snippet 기능도 정말 유용한데요, 특히 새로운 위젯을 만들 일이 정말 많은 플러터 코딩의 특성상, 가장 중요한 기능중 하나라고 할 수 있습니다. 단순히 편집창에 'st' 라고 치면 Stateful 과 Stateless 위젯 스켈레톤 코드를 만들어주는 기능입니다.

이렇게 st라고 치고 엔터를 치면..

stateful widget 스켈레톤 코드가 생성됩니다.

기능을 하나하나 나열하기 어려울 만큼 많기 때문에, 추후에 따로 글을 적도록 하겠습니다.

DartBracket Pair Colorizer 2

플러터 개발을 하다보면 네스티드 코드를 한눈에 파악하기 상당히 피곤하다는 점입니다. 플러터의 태생적인 특성상 위젯 트리의 깊이가 한도 끝도 없이 깊어지기 쉽습니다. 물론 주기적인 리팩토링을 통해서 계속 모듈화 시켜주어야 유지보수가 가능하고 성능에 문제가 생기지 않습니다만, 현실적으로 일정 시간동안은 위젯 트리가 매우 비효율적으로 커지게 됩니다. 이 경우 DartBracket Pair Colorizer 익스텐션은 매우 유용합니다. 이 익스텐션은 단순하게 부모 scope의 괄호 사이에 선을 그어줍니다.   아래는 단순한 스크린샷이지만, 어떤 도움을 주는지 알 수 있습니다.

 

URL: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Bracket Pair Colorizer 2 - Visual Studio Marketplace

 

기타 설치해두면 유용한 익스텐션들

Pubspec Assist (https://marketplace.visualstudio.com/items?itemName=jeroen-meijer.pubspec-assist)
Image Preview (https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)
Material Theme (https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)
Material Icon Theme (https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

 

재미있게 읽으셨다면 "공감" 버튼과 댓글로 응원해주세요. 로그인 없이도 됩니다. 😀