一、Visual Studio Code安装和基本配置#
1.1 下载安装#
下载地址：https://code.visualstudio.com/Download
二、VSCode用户配置#
2.1 配置文件折叠配置#
将一些根目录的配置文件折叠到pubspec.yaml文件下
pubspec.yaml
pubspec.lock
analysis_options.yaml
helloapp_flutter.iml
.flutter-plugins
.flutter-plugins-dependencies
.metadata
配置流程：
1.按下Command + Shift + P调出命令面板
2.输入"Preferences", 选择"Preferences: Open User Settings (JSON)"
如果是中文就是："首选项" > "首选项: 打开用户设置(JSON)"
3.然后会打开setting.json文件，找到以下两个配置，如果没有就在里面添加如下配置：
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"pubspec.yaml": "*.iml,analysis_options.yaml,pubspec.lock,pubspec_overrides.yaml,.packages,.flutter-plugins,.flutter-plugins-dependencies,.metadata, LICENSE, .gitignore,.fvmrc, devtools_options.yaml,distribute_options.yaml"
},
意思是开启文件夹嵌套，然后配置了pubspec.yaml文件下要折叠的文件，patterns是个KeyValue对象，Key是文件名，Value是文件名，用逗号隔开，表示要折叠的文件。也可以多个文件折叠配置，比如：
"explorer.fileNesting.patterns": {
"pubspec.yaml": "*.iml,analysis_options.yaml",
"file2.yaml": "*.iml,file2.yaml"
}
2.2 代码折叠配置和使用#
- 安装
扩展插件: #region folding for VS Code
插件地址：https://marketplace.visualstudio.com/items?itemName=maptz.regionfolder
- 添加配置
1.按下Command + Shift + P调出命令面板
2.输入"Preferences", 选择"Preferences: Open User Settings (JSON)"
如果是中文就是："首选项" > "首选项: 打开用户设置(JSON)"
3.然后会打开setting.json文件
"maptz.regionfolder": {
"[dart]": {
"foldEnd": "/* #endregion */",
"foldEndRegex": "/\\*[\\s]*#endregion",
"foldStart": "/* #region [NAME] */",
"foldStartRegex": "^[\\s]*/\\*[\\s]*#region[\\s]*(.*)[\\s]*\\*/[\\s]*$",
"defaultFoldStartRegex": "^[\\s]*/\\*[\\s]*#region[\\s]*default\\s(.*)[\\s]*\\*/[\\s]*$",
"foldDefinitions": [
{
"foldEndRegex": "\\*+/[\\s]*$",
"foldStartRegex": "^[\\s]*/\\*\\*+" ,
"isFoldedByDefault": true
}
]
}
}
可以根据需要，对不同开发语言进行自定义，我们这里用的是Dart
- 使用
/* #region isFirstLaunch */
bool _isFirstLaunch = true; // 默认值为 true
// 同步 Getter
bool get isFirstLaunch => _isFirstLaunch;
// 异步 Setter
Future<void> setIsFirstLaunch(bool value) async {
if (_isFirstLaunch != value) {
// 只有在值改变时才更新
_isFirstLaunch = value;
await _sp?.setBool('isFirstLaunch', value);
}
}
/* #endregion */
2.3 保存自动格式化&代码修复等常用配置#
配置流程：
1.按下Command + Shift + P调出命令面板
2.输入"Preferences", 选择"Preferences: Open User Settings (JSON)"
如果是中文就是："首选项" > "首选项: 打开用户设置(JSON)"
3.然后会打开setting.json文件，找到如下配置：
自动保存格式化、代码自动修复、文件资源管理器排除显示文件目录、文件嵌套、自动保存、默认编码、
代码折叠：VS Marketplace 链接: https://marketplace.cursorapi.com/items?itemName=maptz.regionfolder
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
},
"files.exclude": {
"**/.idea": true,
"**/.dart_tool": true,
"**/.vscode": true
},
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"pubspec.yaml": "*.iml,analysis_options.yaml,pubspec.lock,pubspec_overrides.yaml,.packages,.flutter-plugins,.flutter-plugins-dependencies,.metadata, LICENSE, .gitignore,.fvmrc, devtools_options.yaml"
},
"files.autoSave": "onFocusChange",
"files.encoding": "utf8",
"maptz.regionfolder": {
"[dart]": {
"foldEnd": "/* #endregion */",
"foldEndRegex": "/\\*[\\s]*#endregion",
"foldStart": "/* #region [NAME] */",
"foldStartRegex": "^[\\s]*/\\*[\\s]*#region[\\s]*(.*)[\\s]*\\*/[\\s]*$",
"defaultFoldStartRegex": "^[\\s]*/\\*[\\s]*#region[\\s]*default\\s(.*)[\\s]*\\*/[\\s]*$",
"foldDefinitions": [
{
"foldEndRegex": "\\*+/[\\s]*$",
"foldStartRegex": "^[\\s]*/\\*\\*+",
"isFoldedByDefault": true
}
]
}
},
把这个属性设置为true开启即可
三、常用快捷键#
调出命令面板#
Command + Shift + P
Markdown编辑和预览#
Command + K, V
查看文件大纲结构#
View(视图) > Open View(打开视图) > Outline(大纲)
软件中英文切换#
输入命令：Command + Shift + P，在输入面板中输入：Configure display language， 从下拉列表中选择要切换的语言
代码折叠#
Command + F , Command H
Command + F , Command O
四、开发必备的扩展安装和使用#
4.1 安装基础扩展#
打开VSCode左边的功能栏，点击扩展(四个小方块的图标)
Flutter#
安装Flutter SDK后，会自带Dart SDK
Code Spell Checker#
拼写检查, 对项目中的各种语言拼写进行检查是否正确
gitignore#
gitignore文件
4.2 AI智能辅助扩展和软件#
- Cursor (有条件的付费,推荐)
- Trae(字节跳动免费，平替Cursor)
- Github Copilot (有限免费)
- TONGYI Lingma（通义灵码，免费的）
- tabnine（有条件的付费）
