일단 flutter web은 좀 더 봐야 할 것 같고,

android, ios쪽 앱 개발시에 쓸만 한 애들만 우선 정리

(dart, flutter 기본 플러그인은 제외)

 

 

플러그인 이름 누르시면 Visual Studio Marketplace로 연결됩니다~ (알파벳 순)

 

dart, flutter 전용 플러그인

 

Awesome Flutter Snippets

snippet 추가 제공. 필수 함수들도 한 번에 만들어줘서 타이핑량이 많이 줄어듬

 

Dart Data Class Generator

dart 클래스의 생성자, copyWith, toMap, fromMap, toJson, fromJson, == 등 자동 생성해줌

 

flutter-stylizer

flutter 클래스내의 생성자, 변수, 함수 등을 지정한대로 정렬해 줌

협업하거나 자신만의 스타일 유지할 때 좋음 (기본 설정 그래도사용해도 무방함)

 

Flutter Tree

emmet 같이 위젯트리를 한 번에 작성 가능하게 도와줌

 

 

 

dart, flutter 전용은 아니지만 도움 되는 플러그인

 

Better Comments

코멘트에 !, ? 등으로 시작하게 작성하면 색상이 다르게 출력 됨

(설명, 경고, 위험 등의 표시 가능)

 

Code Spell Checker

오타 잡아 줌!

 

Color Highlight

#ffffff의 rgb 코드 입력 시, 색상을 바로 확인 할 수 있음

 

Error Lens

에러 부분을 코드 위치에서 표시 해 줌

 

Git History

git history 보고 찾기, 비교 등 가능

 

Image preview

로컬 또는 리모트 파일 이미지를 바로 보여 줌

 

Paste JSON as Code

json 파일로 class 코드 만들 수 있음 (quicktype.io 에서 만듬)

 

Prettier - Code formatter

코드 포맷팅 (yaml 지원)

 

Pubspec Assist

pub.dev 가서 install 탭 내용 복붙하는 시간을 줄여줌

 

REST Client

rest 테스트를 vscode에서 할 수 있음 (요즘은 아래 thunder client 많이 쓰는 듯)

 

TabOut

tab키 입력하면 괄호를 빠져나감

(적응하는 데 시간이 필요하지만, 익숙해지면 아주 편함)

 

Todo Tree

todo 코멘트 달아놓은 것 좌측 트리메뉴에 표시해 줌

 

Thunder Client

postman의 vscode 플러그인 버전

 

Version Lens

pubspec.yaml에서 버전 정보를 확인하고, 관리도 할 수 있음 (최신 버전 표기 등)

 

vscode-faker

fake 데이터 만들어줌 (주소, 이름, 회사, 날짜, 전화번호 등등)

'dart' 카테고리의 다른 글

Hot reload? | Decoding Flutter  (0) 2021.05.16
Introducing Decoding Flutter  (0) 2021.05.16
flutter launcher icon  (0) 2021.05.10
flutter 앱 로딩 처리: splash (부제: 스플래시 with 그림판)  (0) 2021.05.09
flutter 상태 관리 뭘로 하지  (0) 2021.05.05

 

공식 홈 가이드에 있는 플러그인만 해도 snippet은 일단 충분해 보임

flutter.dev/docs/development/tools/vs-code

 

Visual Studio Code

How to develop Flutter apps in Visual Studio Code.

flutter.dev

* launch.json 추가

F5 키로 프로그램 실행

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "tistory",
            "request": "launch",
            "type": "dart",
            "flutterMode": "debug",
        }
    ]
}

 

* 추가로 widget이 늘어지니, color bracket 관련 된 거 정도만 설치하면 좋은 듯

1이 install 수도 많고, 2는 베타 버저닝이긴 한대 잘 돌긴 하는 듯 (1, 2 둘 다 archived 됐네)

Bracket Pair Colorizer 2 - Visual Studio Marketplace

 

Bracket Pair Colorizer 2 - Visual Studio Marketplace

Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

marketplace.visualstudio.com

indent-rainbow - Visual Studio Marketplace

 

indent-rainbow - Visual Studio Marketplace

Extension for Visual Studio Code - Makes indentation easier to read

marketplace.visualstudio.com

 

Bracket Pair Colorizer 2 만 적용

 


 

* pubspec.yaml 선택

pub get, upgrade, outdated

 

* dart devtools

 

* snippet: tab 또는 선택

stless, stful

stful

 

* ctrl + .

 

stateless > stateful

안드로이드 스튜디오는 widget 제거하는 것도 있었던 것 같은데 아닌가...

wrap widget 및 extract

 

 

 

* UpperCamelCase

class, enum, typedef, type parametes (annotaion class with parameter) 등

 

* lowerCamelCase

class members, top-level definitions, variables, parameters, and named parameters, constant variable, enum values

- constant variable 하고 enum values 가 좀 특이하네

- enum SCREAMING_CAPS 스타일은 내가 만든 거 아닐때만 쓰라고 하는 듯 (기존 코드 또는 protobuf로 생성한 코드)

 

const pi = 3.14;
const defaultTimeout = 1000;
final urlScheme = RegExp('^([a-z]+):');

enum BeeGees {
  barryGibb,
  mauriceGibb,
  robinGibb
}

class Dice {
  static final numberGenerator = Random();
}

 

* lowercase_with_underscores

filename, import prefixes

- 파일명하고 디렉토리는 언더스코어로~~

 

* import 관련

알파벳 및 섹션별 정렬

위에부터 dart: > package: > relative imports (relative 사용도 추천하진 않는 듯)

대충 dart > 남들 package > 내 package 순으로 정리하면 될 듯

 

 

* 참고

dart.dev/guides/language/effective-dart/style

 

Effective Dart: Style

Formatting and naming rules for consistent, readable code.

dart.dev

 

'dart' 카테고리의 다른 글

flutter vscode 설정  (0) 2021.05.05
flutter 폴더 구조 정리  (0) 2021.05.05
dart,flutter convention 및 linter  (0) 2021.05.05
flutter 유튜브 참고  (0) 2021.05.05
flutter 유튜브 채널 요약 좀 해보자  (0) 2021.05.05

 

코딩 컨벤션(가이드라인)에 따라 코드를 작성하다 보면 자연스레 이쁜 코드를 작성하는 습관이 들어서,

개인적으로 코딩 컨벤션은 최대한 맞추려고 하는 편이다.

기본적으로 언어별, 프레임워크별, 라이브러리별 컨벤션이 약간씩 차이나는 경우가 있는데,

'가장 작은 scope 기준으로 스타일을 맞춘다는' 기본 컨셉만 지키면 크게 무리가 없다

예) 특정 파일에 함수와 파일이 컨벤션이 다른 경우, 더 작은 scope인 함수에 맞춘다

scope: 블럭 < 함수 < 파일 < 모듈(디렉토리) < ...

 

* 코딩 컨벤션

dart 하고 flutter가 가끔 차이나는 경우가 있는 거 같네. 대략적인것만 훑어보고 linter 대로 따라가자

github.com/flutter/flutter/issues/20858

 

Should global constants be prefixed with `k` ? · Issue #20858 · flutter/flutter

The Flutter style guide recommends prefixing global constants with 'k', https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#begin-global-constant-names-with-prefix-k , But ...

github.com

 

* 그러면 linter는 뭘로 할까나~

flutter linter는 구글이 주도하는 pedantic하고, 커뮤니티쪽에서 주도하는 effective_dart를 많이 사용하는 듯 하다

고민해봤자 답 없으니 star 수 더 많은 pedantic 사용하자

 

github.com/google/pedantic

 

google/pedantic

How to get the most value from Dart static analysis - google/pedantic

github.com

github.com/tenhobi/effective_dart

 

tenhobi/effective_dart

Linter rules corresponding to the guidelines in Effective Dart - tenhobi/effective_dart

github.com


* 사용 방법 요약

1. pubspec.yaml

dev_dependencies:
  pedantic: ^1.11.0

2. analysis_options.yaml 파일 프로젝트 최상단에 생성하고 아래 내용 작성

include: package:pedantic/analysis_options.yaml

3. 따로 세부설정은 하지 않음

 


 

* 코딩 컨벤션 참고

dart.dev/guides/language/effective-dart/style

 

Effective Dart: Style

Formatting and naming rules for consistent, readable code.

dart.dev

github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo

 

flutter/flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond. - flutter/flutter

github.com

 

 

코드블럭 dark 테마 dart 언어 3종 비교 (언어: java)

 

Atom one dark

 

Monokai

 

Darcula

 

 

 

존경하는 티스토리님께
dart도 코드 문법 강조 플러그인에서 추가해주세요
혹시 시간되시면 material 하고 vscode 테마도 추가해주세요

 

티스토리 기본 '코드 문법 강조(syntax highlight)' 플러그인에서 dart 지원을 안 하네

색깔 넣느라고 이거저거 설정하기 구찮으니 있는 거 중에 제일 맘에 드는걸로 고르자

 

언어는 java가 가장 매끄럽게 나오는 것 같고, 테마는 dark 중에 하나 고르면 될 듯

(테마는 변경하면 기존 글도 다 적용되니 아무거나 골라도 됨)

 

* dark theme

Atom one dark

Monokai

Darcula: intellij 계열에서 기본 제공하는 테마라 익숙

 

* light theme

Atom one light

Github

Visual Studio

Xcode


 

// html

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// css

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// javascript

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// python

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// java

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// C++

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// Kotlin

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// Swift

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// PHP

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// Go

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// C#

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// SQL

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
// Scala

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

 

// R

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

 

 

+ Recent posts