Table of Contents

一、介绍说明
#

子曰：“工欲善其事，必先利其器。

作为新手，如果不了解和熟悉工具的使用的话，你会发现你纯手写代码老费劲了，这样你会对学习一门新的语言感到非常痛苦。

二、AI智能辅助扩展和软件
#

AI辅助软件更新很快，层出不穷！推荐几款：

1.TONGYI Lingma（通义灵码，免费的）

官方网站：https://tongyi.aliyun.com/lingma

通义灵码是由阿里云开发的AI编码辅助工具，它是GitHub Copilot的一个免费替代品。通义灵码可以直接在JetBrains系列的IDE或Visual Studio Code的插件市场上搜索并安装，安装过程简便。该工具能够根据开发者的编码上下文自动提供代码提示和建议，提升编码效率。用户只需按Tab键即可采纳这些建议，无需复杂的配置过程。

2.Comate

官方网站：https://comate.baidu.com

3.Marscode

官方网站：https://www.marscode.cn/

字节跳动公司

4.Github Copilot (有条件的付费)

GitHub Copilot是GitHub与OpenAI合作开发的一款革命性的AI辅助编程工具。它利用机器学习技术，根据开发者正在编写的代码自动完成注释和代码片段，大大减少了手动编码的工作量。Copilot支持多种编程语言，能够提高编码速度和质量，但需要订阅付费使用。

5.Tabnine（有条件的付费）

Tabnine是一个非常受欢迎的AI代码补全工具，适合各种水平的开发者使用。它提供高度个性化的代码建议，能够根据用户的编码习惯和项目代码模式进行调整。Tabnine支持多种编程语言和IDE，其特点在于强大的隐私保护，允许用户选择本地部署或云部署，确保代码数据的私密性。用户反馈显示Tabnine在提高编码速度、减少重复劳动方面表现出色，同时它的代码解释、测试生成、文档生成和错误修复功能也备受好评。Tabnine既有免费版本也有增强功能的Pro版本，适用于个人和企业用户。

6.Cursor (有条件的付费)

https://cursor.com

这些工具均致力于通过AI技术优化编程工作流程，提升开发者的工作效率。选择合适的工具取决于个人或团队的需求，包括预算、隐私要求、支持的开发环境等因素。

7.Trae(字节跳动目前免费)

https://trae.ai , 国产平替cursor

优先选择最新技术和功能，选择付费的版本。支持GPT最新的GPT模型，上下文识别生成，上传图片识别生成等高级功能。

三、开发必装的扩展
#

Flutter Widget Snippets
#

快捷代码提示生成

Flutter related snippets
#

Snippet	Description
`fstful`	StatefulWidget snippet. This is an alternative of `stful`
`fstless`	StatelessWidget snippet. This is an alternative of `stless`
`fscaff`	Scaffold widget snippet
`fedgall`	EdgeInsets widget snippet with named constructor `all`
`fedgonly`	EdgeInsets widget snippet with named constructor `only`
`ftxt`	Text widget snippet
`finitlf`	Flutter initState lifecycle method snippet
`fic`	Flutter Icon widget snippet
`fcont`	Flutter Container widget snippet
`fcent`	Flutter Center widget snippet
`frow`	Flutter Row widget snippet
`fcol`	Flutter Column widget snippet
`fex`	Expand widget snippet
`fszbw`	SizedBox widget snippet with just width argument
`fszbh`	SizedBox widget snippet with just height argument
`fszb`	SizedBox widget with width and height arguments
`fedgsym`	EdgeInsets widget with named constructor `symmetric`
`fedgsymv`	EdgeInsets widget with named constructor `symmetric` with `vertical` parameter
`fedgsymh`	EdgeInsets widget with named constructor `symmetric` with `horizontal` parameter
`fimpmat`	Add material’s package import statement
`fstream`	Display a StreamBuilder widget
`felbtn`	Flutter ElevatedButton snippet

Dart related snippets
#

Snippet	Description
`dvar`	Dart variable declaration using `var`
`dfinal`	Dart variable declaration using `final`
`dconst`	Dart variable declaration using `const`
`dinvar`	Dart Public Instance variable snippet
`dprinvar`	Dart Private instance variable snippet
`dmt`	Dart public method snippet
`dprmt`	Dart private method snippet
`darr`	Dart public arrow function snippet
`dprarr`	Dart private arrow function snippet
`dopnctor`	Dart optional named parameters constructor snippet
`dlist`	Dart `List` collection snippet
`dmap`	Dart `Map` collection snippet
`dset`	Dart `Set` collection snippet
`dgetarr`	Dart arrow function getter snippet
`dimpas`	Dart `import as` snippet
`dimpshow`	Dart `import show` snippet
`dimplazy`	Dart `import deffered as` snippet
`dimphide`	Dart `import hide` snippet
`dexhide`	Dart `export hide` snippet
`dexshow`	Dart `export show` snippet
`dconvert`	Dart `convert` lib import snippet
`dimpmeta`	Add meta package import statement
`dan`	Add a Dart anonymous function
`dcla`	Add Dart Class snippet
`dclae`	Add Dart Class snippet with extends keyword

Flutter Bloc pattern snippets
#

Snippet	Description
`fblocprov`	Flutter bloc provider snippet

JSON formatter
#

json格式化: https://github.com/clemenspeters/vscode-extension-format-json

快捷命令：

按下 Cmd + Shift + P 输入 Format JSON并选择.

Paste JSON as Code 模型对象生成
#

粘贴JSON，生成各种语言的对象模型：https://github.com/karosLi/quicktype-vscode-yymodel

Flutter Intl国际化生成
#

国际化，输入命令可以跨界生成国际化代码

Flutter Intl Text Assistance
#

悬浮批量快捷显示国际化内容

Flutter Assets Gen
#

应用资源生成，比如讲图片资源文件放到项目根目录assets/images中，可生成assets.dart类，这样就不用自己手动一个一个配置了。

Flutter widget wrap
#

Press Alt + C to wrap inside Container or press Alt + S to wrap inside Stack. 按下快捷键，自动包裹到容器

四、可生成式工具软件
#

图标生成
#

浏览器搜索：App icon generator，前提是要准备一个1024x1024的图标，图标制作可以使用即时设计

应用资源生成
#

使用插件工具：Flutter Assets Gen, Github: https://github.com/weekitmo/flutter-assets-gen

工具命令
#

在vscode中，按下Command + Shift + P, 输入 Flutter Assets自动检索功能菜单

Flutter Assets: Watch 监听，目录下有变化自动生成
Flutter Assets: Stop Watch，停止监听
Flutter Assets: Generate 手动生成

前提要求
#

assets 目录下的文件目录全部都要用小写，命名语义化一点，乱命名的话会导致生成出来的代码会很奇怪，不舒适，比如：

/// Assets for assetsImagesTbAiquotes13x
/// assets/images/tb_aiquotes_1@3x.png
static const String assetsImagesTbAiquotes13x = "assets/images/tb_aiquotes_1@3x.png";

修改为：assets/images/tabbar_aiquotes_on.png , 然后重新执行 Flutter Assets: Generate

/// Assets for assetsImagesTabbarAiquotesOn
/// assets/images/tabbar_aiquotes_on.png
static const String assetsImagesTabbarAiquotesOn = "assets/images/tabbar_aiquotes_on.png";

尽可能的用单词和下划线去组合，然后生成的代码会以驼峰命名生成，使用时会更清楚。

使用步骤
#

前面我们构建了目录，所以我们要在

Step 1 在项目根目录构建assets目录

assets 资源包
  ppkit    个人通用资源
  images   图片资源
  icons    图标资源
  files    文件资源
  jsons  json文件资源

Step 2. 在项目pubspec.yaml下最后添加：

flutter_assets:
  assets_path: assets/
  output_path: lib/configs/
  filename: assets.dart
  field_prefix:
  classname: R

field_prefix为可选字段，如果想去掉assets前缀，则提供一个空，默认为assets（推荐设置为空）

class Assets {
  Assets._();
  //有前缀
  static const String assetsImagesTabbarAiquotesOn = "assets/images/tabbar_aiquotes_on.png";
  //去掉前缀
  static const String imagesTabbarAiquotesOn = "assets/images/tabbar_aiquotes_on.png";
}

classname 为可选，默认是Assets, 如果设置了，比如R, 这种是android开发习惯用法， R是Resource简写（推荐设置简写）

class R {
  R._();
  //有前缀
  static const String assetsImagesTabbarAiquotesOn = "assets/images/tabbar_aiquotes_on.png";
  //去掉前缀
  static const String imagesTabbarAiquotesOn = "assets/images/tabbar_aiquotes_on.png";
}

Step3. 执行 Flutter Assets: Generate
执行完以后，会自动生成文件，路径： lib/configs/assets.dart

Step4.使用Assets对象

import 'configs/assets.dart';
/// example1:
Image.asset(R.imagesTabbarAiquotesOn, height: 30, width: 30),
/// example2R
Image(image: AssetImage(R.imagesTabbarAiquotesOn,), height: 30, width: 30),

使用建议
#

尽可能的去规范Assets的目录结构和文件命名结构，这样自己使用的过程中也会很舒适。

模型对象代码生成
#

使用 json_serializable

如果用json生成，可以用上面的Paste JSON as Code 插件工具

国际化代码生成
#

使用 Flutter Intl 插件

五、自定义自己的代码
#

在日常开发中，为了避免手动重复的敲自己日常使用的代码，可以将代码设置成代码提示块，这样可以快速的生成代码。

存储位置
#

在macOS系统的VSCode中，自定义代码块存储在

/Users/xiaopin/Library/Application Support/Code/User/snippets

创建全局的代码块
#

打开vscode
按下快捷键 Ctrl+Shift+P打开命令面板
输入Configure User Snippets
选择 新建全局代码块片段文件 (New Gloabl Snippets file)

输入文件名称，比如 dartprint, 然后会自动打开 dartprint.code-snippets文件进行编辑

{
 "Dart Singleton Class": {
  "scope": "dart",
  "prefix": "xp_singleton_class",
  "body": [
   "class ${1:SingletonName} {",
   " static final ${1:SingletonName} _instance = ${1:SingletonName}._internal();",
   " factory ${1:SingletonName}() => _instance;",
   " ${1:SingletonName}._internal();",
   "}"
  ],
  "description": "Generate a Singleton class in Dart"
 }
}

Dart Singleton Class: 输入prefix时 , 后面的提示说明
scope: 设置在什么语言中可以使用
prefix: 使用时输入的关键字, 然后回自动提示

也可以选择特定语言的json配置文件，内容配置和 dartprint.code-snippets 一致。比如我要配置dart语言的，会自动生成一个dart.json 的文件，比如以下我配置了2个代码块提示：

{
 "Dart Print": {
  "scope": "dart",
  "prefix": "xp_print",
  "body": [
   "print('${1:message}');"
  ],
  "description": "Dart Print"
 },
 "Dart Singleton Class": {
  "scope": "dart",
  "prefix": "xp_singleton_class",
  "body": [
   "class ${1:SingletonName} {",
   " static final ${1:SingletonName} _instance = ${1:SingletonName}._internal();",
   " factory ${1:SingletonName}() => _instance;",
   " ${1:SingletonName}._internal();",
   "}"
  ],
  "description": "Generate a Singleton class in Dart"
 }
}

简短的代码块可以配置到一起，太长的，单独配置一个。

除了dart.json, 一般日常我们还可以配置其他语言或者文件模块

swift.json
go.json
proto3.json
dockerfile.json
dockercompose.json
vue.json
javascript.json
等等

全局系统变量
#

VSCode 提供了多个系统变量，这些变量可以在代码片段中使用。以下是一些常见的系统变量及其描述（请注意，这些变量可能会随着 VSCode 的更新而有所变化）：

TM_CURRENT_LINE：当前光标所在行的内容。
TM_CURRENT_WORD：光标当前所在的单词（或 VSCode 定义的“单词”边界内的文本）。
TM_FILENAME：当前文档的文件名（不包括路径）。
TM_FILEPATH：当前文档的完整文件路径。
TM_DIRECTORY：当前文档所在的目录。
TM_LANGUAGE：当前文档的语言标识符。
TM_LANGUAGE_ID：与 TM_LANGUAGE 类似，但可能包含更多细节或特定的标识符。
TM_SELECTED_TEXT：当前选定的文本（如果没有选定任何文本，则为空）。
CURRENT_YEAR、CURRENT_MONTH、CURRENT_DATE、CURRENT_HOUR、CURRENT_MINUTE、CURRENT_SECOND：分别代表当前年份、月份、日期、小时、分钟和秒。
RANDOM 或 RANDOM_INT(from, to)：生成一个随机数或指定范围内的随机整数。
CLIPBOARD：剪贴板上的内容（注意：这个变量可能不是所有系统都支持）。

在代码片段的 JSON 文件中，你可以通过 ${variableName} 的格式来使用这些系统变量。例如，如果你想在代码片段中插入当前日期，你可以使用 ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}。

日常开发，根据自己的需要进行编辑代码块，时常进行备份。

六、代码折叠
#

打开VSCode，按下快捷命令：Shift + Command + P , 输入 Fold, 会显示
右边是快捷键，通过图示的快捷键即可使用快速折叠和展开代码功能
上图是我自定义的，默认不是这个快捷键，可以自己点击设置按钮进行设置

Author

A little bit about you

一、介绍说明#

二、AI智能辅助扩展和软件#

三、开发必装的扩展#

Flutter Widget Snippets#

Flutter related snippets#

Dart related snippets#

Flutter Bloc pattern snippets#

JSON formatter#

Paste JSON as Code 模型对象生成#

Flutter Intl国际化生成#

Flutter Intl Text Assistance#

Flutter Assets Gen#

Flutter widget wrap#

四、可生成式工具软件#

图标生成#

应用资源生成#

工具命令#

前提要求#

使用步骤#

使用建议#

模型对象代码生成#

国际化代码生成#

五、自定义自己的代码#

存储位置#

创建全局的代码块#

全局系统变量#

六、代码折叠#