Skip to content

代码编辑器配置

TIP

推荐的开发工具,工具使用、配置,多人协作方法等

VSCode

推荐前端开发者使用 VSCode 单独打开 web 目录,在安装了推荐扩展且没有安装不适扩展的情况下,整个 web 目录很难看到红线、黄线。

  • 我们准备了一份推荐的 编辑器设置数据文件,可 点击下载,文件->首选项->配置文件->导入配置文件。
  • 格式化代码请一定使用 Prettier 而不是 Vue - Official,会好看很多,您可以按下 Ctrl+Alt+L 来格式化代码。
  • 您可以按下 Ctrl+` 打开编辑器内置终端来启动 Vite 开发服务、执行命令等。
  • 考虑到您可能需要手动调整配置,以下为 编辑器设置数据文件 包含的内容:
扩展
名称作用备注
Vue - officialVue3官方推荐的扩展若已安装 Vetur 扩展,请禁用
ESLint查找和修复JavaScript代码中的问题可使用 pnpm lint 命令分析代码
Prettier代码格式化工具可使用 pnpm format 命令格式化代码
Auto close tag自动关闭标签
Chinese(simplified)简体中文语言包
快捷键配置

打开 文件->首选项->键盘快捷方式,然后搜索以下表格的 项目 栏的值即可手动配置快捷键。

项目新值旧值备注
开发人员: 重新加载窗口Ctrl+Alt+F5-类似于重启编辑器,当你遇到出乎意料的找不到文件等情况时可以使用它
转到编辑器中的符号...(文件结构)Ctrl+RCtrl+Shift+OPhpStorm 保持一致,方便全栈开发者
格式化文档Ctrl+Alt+LShift+Alt+F
切换块注释Ctrl+Shift+/Shift+Alt+A
向上移动行Ctrl+Shift+向上箭头Alt+向上箭头
向下移动行Ctrl+Shift+向下箭头Alt+向下箭头

PhpStorm

推荐后端、全栈开发者使用 PhpStorm 打开整个项目来编写服务端代码,我们已经尽量使编辑器内代码呈现得更加干净自然,比如尽可能少的拼写错误、未try的异常、未使用的变量等等提示。

  • 我们准备了一份 编辑器设置数据文件,可 点击下载,文件->设置->管理 IDE 设置->导入设置。
  • 考虑到您可能需要手动调整配置,以下为 编辑器设置数据文件 包含的内容:
代码样式

我们的代码样式基于 PSR-12,然后做了一些符合开发者直觉和习惯的设置,您可以通过 文件->设置->编辑器->代码样式->PHP 来开始配置。

  1. 以防配置项不会被覆盖,请在开始设置前恢复代码样式到默认设置(代码样式窗口->左上角->设置图标)。
  2. 首先于 代码样式窗口->右上角->设置至->选择 PSR12 来整体应用 PSR-12 编码风格规范,然后按下表继续细节上的配置:
名称新值备注
PHPDoc->对齐形参/属性名称勾选
PHPDoc->对齐标记注释勾选
代码生成->注释代码->注释在第一列取消勾选
代码生成->注释代码->在行注释开始处添加空格勾选
空行->保持最大的空白行-> '{' 之后1
空行->保持最大的空白行->在 '}' 前1
空行->最小的空白行->起始标记之后0
换行和大括号->重新格式化时保持->注释在第一列取消勾选
换行和大括号->重新格式化时保持->简单的方法在同一行勾选
换行和大括号->函数声明形参该项本身(非子项)设置为不换行
换行和大括号->函数/构造函数调用实参该项本身(非子项)设置为不换行
换行和大括号->'if()'语句->强制加大括号不强制
换行和大括号->赋值语句->对齐连续赋值勾选
换行和大括号->类属性/常量组->对齐常量勾选
换行和大括号->类属性/常量组->对齐列中的属性勾选
换行和大括号->类属性/常量组->对齐枚举case勾选
换行和大括号->数组初始值设定项该项本身(非子项)设置为不换行
换行和大括号->数组初始值设定项->对齐键值对勾选
通用配置
操作路径新状态
自动保存文件->设置->外观与行为->系统设置->自动保存->切换到其他应用程序或内置终端时保存文件取消勾选
标记已修改文件->设置->编辑器->常规->编辑器标签页->标记已修改勾选
快捷键

通过 文件->设置->按键映射 进行快捷键配置。

项目新值旧值备注
工具窗口->终端Ctrl+`Alt+F12VSCode 保持一致
主菜单->窗口->编辑器标签页->编辑器关闭操作->关闭标签页Ctrl+WCtrl+F4
主菜单->导航->通过引用转到->文件结构Ctrl+RCtrl+F12
主菜单->编辑->查找->替换Ctrl+HCtrl+R
其他->重启IDECtrl+Alt+F5

多人协作

推荐使用 git 来实现多人协作,前后端公用同一个仓库(就像项目本身的仓库一样),前端开发者可以直接单独打开 web 目录。

  • 若要使用 git 部署项目至线上或备份项目至远程仓库,请先看 根目录/.gitignore 文件。
  • 若要推送至对外开放的远程仓库,请不要提交 根目录/modules 文件夹,因为模块是禁止分享/分发的。