[Flutter on Mac] 플러터 설치과정 정리 3탄(23.06.28) - VSCode세팅

이번엔 VSCode에서 Flutter Extension을 설치하면서 플러터 작업에 효율적인 몇가지 익스텐션과 Settings.json 파일을 수정해보았다. 

 

1. Flutter 익스텐션 설치

flutter extension install

플러터 익스텐션을 설치하면 자동으로 다트 익스텐션까지 같이 설치된다고 한다. 

 

2. Error Lens 설치

error lens extension install

에러렌즈는 코드를 작성시 문법적으로 틀린 부분이나 경고를 위한 부분에 렌즈를 비추는 것처럼 알려주는 기능을 한다.

괄호를 빼먹거나 세미콜론을 빼먹거나 하는 자잘한 실수들, const 같은 데이터 타입이 안맞는 경우 등 여러모로 도움이 되는 기능이어서 설치했다.

 

3. Pubspec Assist 설치

Pubspec Assist extension install

Pubspec.yaml 파일에 필요한 플러터 패키지 입력시에 보다 더 편하게 패키지를 설치할 수 있도록 해주는 기능이라고 한다.

Command + Shift + P를 눌러서 커맨드 팔레트 창을 열고
Pub 을 입력한 다음에
Pubspec Assist: Add/update dependencies 클릭
원하는 패키지명만 입력

해당 과정을 따라하면 해당 패키지가 자동으로 설치된다고 한다. 

 

 

4. Figma for VS Code

Figma for VSCode extension install

이번에 figma에서 DEV Mode가 나오면서 vscode에 figma 익스텐션을 설치할 수 있는 사실을 알았다.

피그마에서 작업한 element 들의 css 요소들을 보다 더 편하게 확인할 수 있는 것 같아서 설치하였다.

 

5.  Settings.json 파일 수정하기

Command + Shift + P 로 Command Palette 띄우기

커맨드 팔레트 띄워진 모습

settings 입력 -> 중간에 Preferences: Open User Settings(JSON) 클릭!

중간 위치에 존재

하면 settings.json 파일이 나온다.

현재 내 환경에서 기본으로 설정되어있는 초기모습이다.

이미 있는 파일들은 파이썬과 관련한 vscode 설정이 되어있는 것 같고, 다트 언어에 해당하는 파일에서 유용한 설정을 몇 가지 추가하였다.

다트 언어 파일에 관한 세팅 3가지 추가한 모습

(1)  "editor.codeActionsOnSave": { "source.fixAll": true },

이 코드는 command + s (파일 저장)을 누를 때 다트 코드에서 문법상에 맞지 않는 부분을 자동으로 고쳐주는 역할이라고 한다.

대부분의 상황에서 도움을 받을 수 있을 것 같아서 설정했는데 추후에 작업중 불편하면 지울 생각이다.

 

(2) "editor.formatOnSave": true,

이 코드는 command + s (파일 저장)시 코드가 자동 정렬이 되는 기능이라고 한다.

 

(3) "editor.bracketPairColorization.enabled": true,

이 기능은 (2)에서 코드가 자동정렬되면 괄호가 너무 많아져서 괄호 구분이 어려워질 수 있으므로 괄호마다 구분이 쉽게 색이 반영되도록 해주는 기능이라고 한다. 

 

우선 이 정도로 세팅해두고 이후 작업시 문제되거나 추가할 세팅이 있으면 수정해보려고 한다!