Appearance
代码编辑器配置
TIP
推荐的开发工具,工具使用、配置,多人协作方法等
VSCode
推荐前端开发者使用 VSCode 单独打开 web
目录,在安装了推荐扩展且没有安装不适扩展的情况下,整个 web
目录很难看到红线、黄线。
- 我们准备了一份推荐的
编辑器设置数据文件
,可 点击下载,文件->首选项->配置文件->导入配置文件。 - 格式化代码请一定使用
Prettier
而不是Vue - Official
,会好看很多,您可以按下Ctrl+Alt+L
来格式化代码。 - 您可以按下
Ctrl+`
打开编辑器内置终端来启动Vite
开发服务、执行命令等。 - 考虑到您可能需要手动调整配置,以下为
编辑器设置数据文件
包含的内容:
扩展
名称 | 作用 | 备注 |
---|---|---|
Vue - official | Vue3 官方推荐的扩展 | 若已安装 Vetur 扩展,请禁用 |
ESLint | 查找和修复JavaScript 代码中的问题 | 可使用 pnpm lint 命令分析代码 |
Prettier | 代码格式化工具 | 可使用 pnpm format 命令格式化代码 |
Auto close tag | 自动关闭标签 | |
Chinese(simplified) | 简体中文语言包 |
快捷键配置
打开 文件->首选项->键盘快捷方式
,然后搜索以下表格的 项目
栏的值即可手动配置快捷键。
项目 | 新值 | 旧值 | 备注 |
---|---|---|---|
开发人员: 重新加载窗口 | Ctrl+Alt+F5 | - | 类似于重启编辑器,当你遇到出乎意料的找不到文件等情况时可以使用它 |
转到编辑器中的符号...(文件结构) | Ctrl+R | Ctrl+Shift+O | 与 PhpStorm 保持一致,方便全栈开发者 |
格式化文档 | Ctrl+Alt+L | Shift+Alt+F | |
切换块注释 | Ctrl+Shift+/ | Shift+Alt+A | |
向上移动行 | Ctrl+Shift+向上箭头 | Alt+向上箭头 | |
向下移动行 | Ctrl+Shift+向下箭头 | Alt+向下箭头 |
PhpStorm
推荐后端、全栈开发者使用 PhpStorm 打开整个项目来编写服务端代码,我们已经尽量使编辑器内代码呈现得更加干净自然,比如尽可能少的拼写错误、未try
的异常、未使用的变量等等提示。
- 我们准备了一份
编辑器设置数据文件
,可 点击下载,文件->设置->管理 IDE 设置->导入设置。 - 考虑到您可能需要手动调整配置,以下为
编辑器设置数据文件
包含的内容:
代码样式
我们的代码样式基于 PSR-12
,然后做了一些符合开发者直觉和习惯的设置,您可以通过 文件->设置->编辑器->代码样式->PHP
来开始配置。
- 以防配置项不会被覆盖,请在开始设置前恢复代码样式到默认设置(
代码样式窗口->左上角->设置图标
)。 - 首先于
代码样式窗口->右上角->设置至->选择 PSR12
来整体应用PSR-12
编码风格规范,然后按下表继续细节上的配置:
名称 | 新值 | 备注 |
---|---|---|
PHPDoc->对齐形参/属性名称 | 勾选 | |
PHPDoc->对齐标记注释 | 勾选 | |
代码生成->注释代码->注释在第一列 | 取消勾选 | |
代码生成->注释代码->在行注释开始处添加空格 | 勾选 | |
空行->保持最大的空白行-> '{' 之后 | 1 | |
空行->保持最大的空白行->在 '}' 前 | 1 | |
空行->最小的空白行->起始标记之后 | 0 | |
换行和大括号->重新格式化时保持->注释在第一列 | 取消勾选 | |
换行和大括号->重新格式化时保持->简单的方法在同一行 | 勾选 | |
换行和大括号->函数声明形参 | 该项本身(非子项)设置为不换行 | |
换行和大括号->函数/构造函数调用实参 | 该项本身(非子项)设置为不换行 | |
换行和大括号->'if()'语句->强制加大括号 | 不强制 | |
换行和大括号->赋值语句->对齐连续赋值 | 勾选 | |
换行和大括号->类属性/常量组->对齐常量 | 勾选 | |
换行和大括号->类属性/常量组->对齐列中的属性 | 勾选 | |
换行和大括号->类属性/常量组->对齐枚举case | 勾选 | |
换行和大括号->数组初始值设定项 | 该项本身(非子项)设置为不换行 | |
换行和大括号->数组初始值设定项->对齐键值对 | 勾选 |
通用配置
项 | 操作路径 | 新状态 |
---|---|---|
自动保存 | 文件->设置->外观与行为->系统设置->自动保存->切换到其他应用程序或内置终端时保存文件 | 取消勾选 |
标记已修改 | 文件->设置->编辑器->常规->编辑器标签页->标记已修改 | 勾选 |
快捷键
通过 文件->设置->按键映射
进行快捷键配置。
项目 | 新值 | 旧值 | 备注 |
---|---|---|---|
工具窗口->终端 | Ctrl+` | Alt+F12 | 同 VSCode 保持一致 |
主菜单->窗口->编辑器标签页->编辑器关闭操作->关闭标签页 | Ctrl+W | Ctrl+F4 | |
主菜单->导航->通过引用转到->文件结构 | Ctrl+R | Ctrl+F12 | |
主菜单->编辑->查找->替换 | Ctrl+H | Ctrl+R | |
其他->重启IDE | Ctrl+Alt+F5 |
多人协作
推荐使用 git
来实现多人协作,前后端公用同一个仓库(就像项目本身的仓库一样),前端开发者可以直接单独打开 web
目录。
- 若要使用
git
部署项目至线上或备份项目至远程仓库,请先看根目录/.gitignore
文件。 - 若要推送至对外开放的远程仓库,请不要提交
根目录/modules
文件夹,因为模块是禁止分享/分发的。