vs code에서 플러터 riverpod lint 사용하기

플러터를 개발하는 IDE(편집기)는 대표적으로 Android Studio와 Visual Studio가 있습니다.

저는 보통 플러터 용으로는 Android Studio를 사용했는데, 좀 더 자유롭게 다른 언어들과 혼용해서 개발하기 위해서는 Visual Studio를 더 편하게 쓰고 있습니다. 그리고 vs code가 가벼워서 copilot도 더 잘 작동하는 것 같은 이유도 있습니다.

그런데 불편한 점은 flutter 를 위한 IDE 기능 단축키가 android studio와 다르다는 점인데요, 대표적으로는 라인 정렬할 때 shift+alt+f (이게 왜 f를 눌러야 하는지 모르겠어요 formatting인가..) 그리고 위젯을 감싸거나 추출할 때 ctrl+ shift + r (이건 왜 r 일까요, refactoring인가..) 혹은 crtl + . 을 누르면 됩니다.

이렇게 다 될 줄 알았지만 statelessWidget에서 statefulWidget으로 바꿔주는 기능은 안되더라구요. 그래서 익스텐션을 설치해서 사용해야 합니다.

제일 많이 쓰는 유명한 익스텐션은 Flutter VS Code Extension 입니다.

https://luvris2.tistory.com/823

Flutter VS Code Extension - 플러터 코드 자동 완성 익스텐션 설치 및 사용 방법 (Awesome Flutter Snippets With VS Code) Awesome Flutter Snippets 어썸 플러터 스니펫은 일반적으로 사용되는 플러터 클래스 및 메서드를 모아둔 것이다. 위젯 작성과 관련된 대부분의 보일러 플레이트 코드를 제거하여 개발 속도를 높여준다. 예를 들어, Stateless Widget위젯은 statelessW를 입력하여 만들 수 있도록 한다. 쉽게 말해서, 자주 사용되는 기본적인 클래스 및 메서드들을 쉽게 작성할 수 있도록 도와주는 익스텐션이라고 보면 된다. * 보일러플레이트 코드(Boilerplate code) : 상용구 코드라고도 부르며, 여러 가지 상황에서… Awesome Flutter Snippets 어썸 플러터 스니펫은 일반적으로 사용되는 플러터 클래스 및 메서드를 모아둔 것이다. 위젯 작성과 관련된 대부분의 보일러 플레이트 코드를 제거하여 개발 속도를 높여준다. 예를 들어, Stateless Widget위젯은 statelessW를 입력하여 만들 수 있도록 한다. 쉽게 말해서, 자주 사용되는 기본적인 클래스 및 메서드들을 쉽게 작성할 수 있도록 도와주는 익스텐션이라고 보면 된다. * 보일러플레이트 코드(Boilerplate code) : 상용구 코드라고도 부르며, 여러 가지 상황에서…

위 글을 참고하시면 좋아요.

그런데 riverpod는 아시다시피 Stateless 대신 ConsumerWidget을 사용합니다. 이걸 ConsulerStatefulWidget으로 바꾸는 기능은 없었습니다.

riverpod snippet을 설치해보아도 이런 변환기능은 없었습니다.

그래서 찾은 방법은 riverpod lint 패키지를 설치하는 것입니다.

https://pub.dev/packages/riverpod_lint#installing-riverpod_lint

riverpod_lint | Dart package Riverpod_lint is a developer tool for users of Riverpod, designed to help stop common issues and simplify repetitive tasks. Riverpod_lint is a developer tool for users of Riverpod, designed to help stop common issues and simplify repetitive tasks.

pubspec.ymal에 다음과 같이 넣어줍니다.

dev_dependencies:
  custom_lint:
  riverpod_lint:

analysis_options.yaml에는 다음과 같이 넣어줍니다.

analyzer:
  plugins:
    - custom_lint

이제 설치가 완료되었습니다. 변경을 원하는 코드 위젯에 가셔서 ctrl+shift+r 혹은 ctrl+. 을 누르면 됩니다.