前言

我們之前介紹了 Dart 的命名規(guī)范，本篇來介紹 Dart 的代碼次序和格式化規(guī)范。開篇還是重復(fù)那句話：代碼是寫給人看的。

import 導(dǎo)入次序

導(dǎo)入次序本身并不會影響代碼的執(zhí)行，但是整齊的導(dǎo)入會讓你的代碼看起來更加舒適，也會讓人感覺你的代碼更有條理。官方對于導(dǎo)入的順序建議如下圖所示。

導(dǎo)入次序.png

而對于同級別的，建議是按字母次序排序（這個有點(diǎn)難??）。下面是示例：

// 正確示例
import 'dart:async';
import 'dart:html';

import 'package:bar/bar.dart';
import 'package:foo/foo.dart';

import '../components/buttons.dart';
import '../utils/http.dart';

// 錯誤示例 （未按字母排序）
import 'package:foo/foo.dart';
import 'package:bar/bar.dart';

import 'foo/foo.dart';
import 'foo.dart';

export 應(yīng)當(dāng)排在所有 import 之后，并在二者之間空一行

這個好理解，導(dǎo)出應(yīng)當(dāng)放在導(dǎo)入之后，而且為了區(qū)別，在之間空一行，下面是示例：

// 正確示例
import 'src/error.dart';
import 'src/foo_bar.dart';

export 'src/error.dart';

// 錯誤示例
import 'src/error.dart';
export 'src/error.dart';
import 'src/foo_bar.dart';

使用 dart format 工具格式化代碼

Dart 提供了 dart format 工具來格式化代碼。簡單的命令如下，詳細(xì)可以查看官方文檔：dart-format。

# 格式化當(dāng)前文件夾文件
dart format .
# 使用空格分隔格式化多個目錄或文件
dart format lib bin/updater.dart 

當(dāng)然，對于 VSCode 而言，推薦使用 Prettier - Code Formatter 這個插件，保存后會自動格式化。

單行代碼不要超過80個字符

這個是大多數(shù)編程語言的要求，屏幕大的可能沒太大感知，但是屏幕小的時候代碼閱讀體驗(yàn)及其糟糕。對于 Flutter，使用了 Prettier 插件后，一個好的習(xí)慣是在屬性后面加一個逗號，這樣會自動換行。比如下面是沒有逗號和逗號的區(qū)別，顯然加了逗號的閱讀體驗(yàn)更好。

// 每個屬性后加逗號
PrimaryButton(
  onPressed: () {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (BuildContext context) =>
            const WindmillIndicatorDemo(),
      ),
    );
  },
  title: '大風(fēng)車動畫',
),

// 不加逗號的情況
PrimaryButton(
  onPressed: () {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (BuildContext context) =>
          const WindmillIndicatorDemo(),
    ));
  },
  title: '大風(fēng)車動畫'),

使用 Prettier 也可以設(shè)置超出字符后自動換行。關(guān)于 Prettier 的設(shè)置可以查看 GitHub 的說明文檔：prettier-vscode。

分支代碼

對于存在多個分支的控制代碼，統(tǒng)一使用大括號將各個分支包裹起來。

// 正確示例
if (isWeekDay) {
  print('Bike to work!');
} else {
  print('Go dancing or read a book!');
}

// 錯誤示例
if (isWeekDay) {
  print('Bike to work!');
} else print('Go dancing or read a book!');

對于只有一條分支語句，且一行可以寫完的（80個字符以內(nèi)）可以不適用大括號。

if (arg == null) return defaultValue;

而對于一行寫不完的，那么還是需要使用大括號包裹起來：

// 正確示例
if (overflowChars != other.overflowChars) {
  return overflowChars < other.overflowChars;
}

// 錯誤示例
if (overflowChars != other.overflowChars)
  return overflowChars < other.overflowChars;

操作符

對于賦值，運(yùn)算符、條件判斷、箭頭函數(shù)等，在操作符前后各空一格，以增強(qiáng)閱讀體驗(yàn)。下面的示例對比，哪個閱讀體驗(yàn)更好，一目了然！

// 正確示例
double r = 3.0;
double area = pi * r * r;
_elevation = _elevation == 0 ? 10.0 : 0.0;
if (area <= 2.0) {
  print('Less than 2.0. ');
}

MaterialPageRoute(
  builder: (BuildContext context) => const AnimatedWidgetDemo(),
),

// 錯誤示例
double r=3.0;
double area=pi*r*r;
_elevation=_elevation==0?10.0:0.0;
if (area<=2.0) {
  print('Less than 2.0. ');
}

MaterialPageRoute(
  builder: (BuildContext context)=>const AnimatedWidgetDemo(),
),

總結(jié)

本篇介紹了 Dart 語言的導(dǎo)入導(dǎo)出次序，以及編碼的最基本的規(guī)則。這樣的規(guī)則也適用于其他語言，只要記住那句話：代碼是寫給人看的！注重代碼命名風(fēng)格和編碼風(fēng)格，然后，善用一些代碼格式化工具，就能夠讓你的編碼看起來井井有條！