๊ด€๋ฆฌ ๋ฉ”๋‰ด

Vintage appMaker์˜ Tech Blog

[flutter] flutter๋ฅผ VSCode์—์„œ ์‚ฌ์šฉ ์‹œ ์œ ์šฉํ•œ Extension ๋ณธ๋ฌธ

Source code or Tip/Flutter & Dart

[flutter] flutter๋ฅผ VSCode์—์„œ ์‚ฌ์šฉ ์‹œ ์œ ์šฉํ•œ Extension

VintageappMaker 2022. 9. 16. 16:04

๐ŸŒˆError Lens 

 

Error Lens - Visual Studio Marketplace

Extension for Visual Studio Code - Improve highlighting of errors, warnings and other language diagnostics.

marketplace.visualstudio.com

Flutter Erorr์™€ warning์„ ๋ณด๋‹ค ์ž์„ธํ•˜๊ฒŒ ๋ณด์—ฌ์ฃผ๋Š” ํ™•์žฅํ”„๋กœ๊ทธ๋žจ. ํŠนํžˆ warning ๋ถ€๋ถ„์„ ์ž์„ธํžˆ ๋‹ค๋ฃจ๋‹ค๋ณด๋‹ˆ ํšจ์œจ์ ์ธ ์ฝ”๋”ฉ์Šต๊ด€์— ๋„์›€์ด ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  Flutter๋ฅผ ๊ฐœ๋ฐœํ•˜๋‹ค๋ณด๋ฉด Error๊ฐ€ ๋ถˆ์นœ์ ˆํ•˜๋‹ค๋Š” ๋Š๋‚Œ์„ ๋ฐ›๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์€๋ฐ, ๊ทธ๋Ÿฐ ๋ถˆ๋งŒ์„ ์–ด๋Š์ •๋„ ํ•ด์†Œํ•ด์ฃผ๋Š” ํ™•์žฅํ”„๋กœ๊ทธ๋žจ์ด๋‹ค.

 

๐ŸŒˆFlutter widget snippets 

 

Flutter Widget Snippets - Visual Studio Marketplace

Extension for Visual Studio Code - A set of helpful widget snippets for day to day Flutter development

marketplace.visualstudio.com

[f]๋ฅผ ๋ˆ„๋ฅด๋ฉด code ์˜ˆ์ œ(snippet)๋ฅผ ์ž๋™์œผ๋กœ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํ™•์žฅํ”„๋กœ๊ทธ๋žจ. ์ฝ”๋”ฉ ์‹œ ์ƒ์‚ฐ์„ฑ์ด ๋†’์•„์ง€๋ฏ€๋กœ VSCode์—์„œ ๊ฐœ๋ฐœํ•œ๋‹ค๋ฉด ๊ฐ•๋ ฅํžˆ ์ถ”์ฒœํ•˜๋Š” ํ™•์žฅํ”„๋กœ๊ทธ๋žจ.


๐ŸŒˆAwesome Flutter Snippet

 

 

Awesome Flutter Snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Awesome Flutter Snippets is a collection snippets and shortcuts for commonly used Flutter functions and classes

marketplace.visualstudio.com

Flutter์—์„œ ์ž์ฃผ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ ํ…œํ”Œ๋ฆฟ์„ ์ž๋™์ƒ์„ฑํ•ด์ฃผ๋Š” ํ™•์žฅํ”„๋กœ๊ทธ๋žจ. ์œ„์˜ ํ™•์žฅํ”„๋กœ๊ทธ๋žจ๊ณผ ๋”๋ถˆ์–ด ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋ฉด ํŽธ๋ฆฌํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. 


๐ŸŒˆJSon to Dart model

 

 

Json to Dart Model - Visual Studio Marketplace

Extension for Visual Studio Code - Extension convert Json to Dart Model class

marketplace.visualstudio.com

json ํ†ต์‹ ์„ ํ•˜๊ฑฐ๋‚˜ UI๋ฅผ json์œผ๋กœ ์—ฐ๋™ํ•œ๋‹ค๋ฉด ๊ฐ•๋ ฅํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ™•์žฅํ”„๋กœ๊ทธ๋žจ. json์„ ๋ถ„์„ํ•˜์—ฌ data class๋ฅผ ์ž๋™์ƒ์„ฑํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ. ์‚ฌ์šฉ๋ฒ•์€ ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ์žˆ๋Š” ํŽธ์ด์ง€๋งŒ ์Šต๋“ํ•˜๊ณ  ๋‚˜๋ฉด ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์„ ์–ป์„ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๊ฐ•์ถ”ํ•˜๋Š” ํ™•์žฅํ”„๋กœ๊ทธ๋žจ.

 

 

๐ŸŒˆFlutter Tree

 

Flutter Tree - Visual Studio Marketplace

Extension for Visual Studio Code - Extension for Flutter to build basic widget tree.

marketplace.visualstudio.com

Flutter ์œ„์ ฏ ๊ณ„์ธต์„ ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํ™•์žฅํ”„๋กœ๊ทธ๋žจ. ๋•Œ์— ๋”ฐ๋ผ ํŽธ๋ฆฌํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

Comments