반갑습니다. 저는|기업가이자, 엔지니어입니다.
당신의 마음을 사로잡을 Flutter in VSCode Tips 4

당신의 마음을 사로잡을 Flutter in VSCode Tips 4

Tags
VSCode
Flutter
Tip
Published
발행일 - 2023년 1월 25일
Author
Eugene Jeon (전유진)
AuthorLink
Eugene Jeon
notion image
 
Flutter 를 이용하여 개발을 시작하려는 당신,
 
코드 작성할 때, 시간을 절약하고 싶으신가요?
프로젝트를 시작할 때, 반복했던 작업의 자동화를 꿈꾸나요?
수정하지 않는 지저분한 메타파일, 숨기고 싶으신가요?
여러 팀원들과 여러 프로젝트를 위해, Flutter SDK 버전을 계속 바꾸고 있던 당신!
 
이 글을 통해 팁 4가지를 바칩니다.
 
1. Code Snippet 을 위한 단축키 설정2. 프로젝트 실행시, 작업 자동화3. 프로젝트에서 원하지 않는 파일, 메타파일 숨기기4. Flutter SDK 버전 자유롭게 변경하기
 

1. Code Snippet 을 위한 단축키 설정

Flutter 프로젝트에서 빠질 수 없는 것이 Widget 작성입니다. StatelessWidget/StatefullWidget 이죠, 그 뿐인가요? 자주 사용하는 코드가 많죠? 확장프로그램중에 이 문제를 해결해주는 다양한 스니펫 앱이 많습니다.
하지만, 필요한 것만 쏙쏙! 사용하고 싶은 당신을 위해 이 글에서는 스니펫을 집적 만드는 것을 소개해드립니다.
 
먼저, VSCode 내에서 Snippets: Configure User Snippets 를 실행시킵니다.
💡
CMD/CTRL + SHIFT + P
notion image
 
언어 리스트 중에 dart 를 선택합니다.
notion image
 
아래 코드를 입력해보세요.
💡
prefix 와 body 는 원하는 키워드와 내용으로 수정해서 사용하세요!
(json)
{
 "New Stateful widget" : {
   "prefix": "newwidgetsample",
   "body":[
     "class NewPage extends StatefulWidget {",
       "const NewPage({Key? key}) : super(key: key);",
       "",
       "@override",
       "State<NewPage> createState() => _NewPageState();",
     "}",
     "",
     "class _NewPageState extends State<NewPage> {",
       "@override",
       "Widget build(BuildContext context) {",
          "return Material(",
             "child: Container(",
             "color: Colors.red,",
           "),",
          ");",
        "}",
     "}",
     "",
   ]
	},
}
 
짠! 사용자가 설정한 스니펫으로 빠르게 StatefullWidget 을 생성할 수 있습니다.
notion image
 

2. 프로젝트 실행시, 작업 자동화

VSCode 에서 프로젝트를 실행할 때, 원하는 작업을 자동화 하고 싶을때가 많습니다.
flutter clean, flutter 종속성 설치 (pub get) 등 다양한 작업을 말이죠.
 
VSCode 에서는 이를 위해 미리 구성된 명령들을 실행할 수 있도록 이미 기능이 내장되어 있답니다.
프로젝트 폴더(root) 에서 .vscode 아래 tasks.json 이라는 파일을 이용할 수 있ㅅ브니다.
 
아래는 flutter 를 위한 tasks.json 의 샘플파일입니다.
💡
원하는 작업을 추가해보세요.
(json)
{ 
  "version": "2.0.0", 
  "tasks": [ 
    { 
      "type": "flutter", 
      "command": "flutter", 
      "group": "none", 
      "args": [ 
        "clean" 
      ], 
      "label": "flutter: flutter clean", 
      "runOptions": { 
        "runOn": "folderOpen" 
      }, 
      "problemMatcher": [] 
    }, 
    { 
      "type": "flutter", 
      "command": "flutter" , 
      "group": "build", 
      "dependsOn": [ 
        "flutter: flutter clean"
      ], 
      "args": [ 
        "pub", 
        "get" 
      ], 
      "label": "flutter: flutter pub get", 
      "detail": "", 
      "runOptions": {
        "runOn": "folderOpen" 
      } 
    }, 
    { 
      "type": "flutter", 
      "command": "flutter", 
      "dependsOn": [ 
        "flutter: flutter pub get" 
      ], 
      "args": [ 
        "build", 
        "web" 
      ], 
      "group": "build", 
      "label": "flutter: flutter build web", 
      "detail": "", 
      "runOptions": { 
        "runOn": "folderOpen" 
      } 
    }
  ] 
}
 
만약! 폴더와 파일을 찾을 수 없다면, 생성하시면 됩니다.
notion image
 
설정이 완료되었다면 VSCode로 프로젝트를 열때, tasks.json 에 입력된 작업들이 실행되는 것을 확인할 수 있습니다.
 

3. 프로젝트에서 원하지 않는 파일, 메타파일 숨기기

프로젝트를 작업하다보면 손대지 않는 파일이 많이 있습니다. 작업 폴더와 파일이 많아서 지저분해 보이기도 합니다.
이때 VSCode 의 설정에서 숨기기 기능을 이용할 수 있습니다.
 
VSCode 에서 설정 파일을 열어봅니다.
💡
CMD + , (맥기준) 또는 CMD/CTRL + SHIFT + P 에서 Preferrence: Open User settings 를 선택하면 됩니다.
notion image
 
그리고 작업 영역 을 선택합니다.
💡
사용자 탭으로 선택된 경우, 모든 프로젝트에 영향을 끼칠 수 있습니다.
notion image
 
Files: Exclude 항목을 추가/수정 합니다.
💡
원치 않는 파일, 메타파일을 추가해 주면 됩니다.
notion image
 
이제 깔끔해진 폴더와 파일을 확인하고 가벼운 마음으로 작업하시면 됩니다. 🙂
 
💡
우측의 버튼을 이용하여 설정파일(JSON) 을 직업 열어서 작업하셔도 무방합니다.
notion image
(json)
		// ...
		"files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        // Explorere 에서 제외, 추가
        "**/.cache": true,
        "**/.idea": true,
        "**/.vscode": true,
        "**/.fleet": true,
        "**/node_modules/**": true,
        "**/.yarn": true,
        "**/tmp": true,
    },
		// ...
 

4. Flutter SDK 버전 자유롭게 변경하기

제일 골치아픈 문제가 생겼습니다.
다양한 팀원들과 프로젝트를 진행하면서 Flutter 버전이 제각각인 상황이 생길 수 있습니다.
이때 우리를 구원해줄 것이 있습니다.
fvm (Flutter Version Manager) 입니다.
fvm | Flutter Version Management
A simple CLI to manage Flutter SDK versions.
fvm | Flutter Version Management
https://fvm.app/
fvm | Flutter Version Management
 
하지만! fvm 을 사용하지 않고도 VSCode 에서는 간단하게 버전을 변경하며 사용할 수 있습니다!
 
천천히 따라와주세요.
 
  1. 여러개의 flutter 버전을 설치합니다.
      2. 경로 : $HOME/Documents
      notion image
 
  1. flutter 경로를 alias 로 추가하기 (터미널 이용)
    1. .zprofile 또는 .bash_profile 의 파일을 수정합니다.
    2. 아래와 같이 alias 를 추가합니다.
        3. (bash)
        alias flutter='~/Documents/flutter/bin/flutter'
alias flutter_master='~/Documents/flutter_master/bin/flutter'
alias flutter_beta='~/Documents/flutter_beta/bin/flutter'
alias flutter_dev='~/Documents/flutter_dev/bin/flutter'
       
      💡
      윈도우의 경우, bat 파일을 생성하고 환경변수에 추가하는 방법으로도 가능합니다.
       
  1. VSCode 를 재시작해줍니다.
  1. 하단 Flutter 버전을 클릭해보세요!
      2. notion image
  1. 원하는 버전을 선택하면 됩니다.
 
 
요즘 많은 분들이 Flutter 프로젝트를 작업할 때, VSCode 를 사용하고 있는 것 같습니다. 그래서 VSCode 의 팁을 작성해보았습니다. 많은 분들의 작업 능률을 높이는데 도움이 되었으면 좋겠습니다. 🙂

Loading Comments...