为了保持代码整洁,便于维护,一般使用ESLint来检测代码,对于不合格的代码不予通过,但ESLint只会给出错误提示,还是需要自己一个一个去改,我们可以使用使用前端代码格式化工具Prettier自动格式化代码,ESLint规则及Prettier规则一般都在项目里配好了,这里主要说明怎样配置编辑器使用Prettier自动化格式代码。

一、 使用ESLint进行代码检查

ESLint配置文件

自动修复代码

npm run lint --fix

二、 使用Prettier格式化代码

Prettier配置文件

保存时自动格式化代码:

VSCode:
  1. 需要安装四个扩展:

    • ESLint
    • Prettier
    • Formatting Toggle (方便打开或关闭Prettier)
    • Vetur (格式化Vue文件)
  2. 进入Formatting Toggle扩展的配置页面,选择在settings.json中编辑,根据个人习惯修改格式化代码的时机:

    "editor.formatOnSave": true, // 保存时格式化
    "editor.formatOnPaste": true, // 粘贴时格式化
    "editor.formatOnType": true, // 输入时格式化

    或者在 文件 -> 首选项 -> 设置 -> 文本编辑器 -> 正在格式化 中设置

  3. 进入Vetur扩展的配置页面,设置Default Formatter 为 prettier


idea(Webstorm PhpStorm 等)
  1. 安装Prettier插件

  2. 进入插件配置页面: Languages & Frameworks javascript prettier -> Prettier

    设置Prettier package的路径,可以全局安装Prettier,然后再填写对应路径

    npm i -g prettier

  3. 勾选 保存时格式化(这个选项只有2020版及以后才有)

    如果是2019版及之前的,需要进行以下配置才可以在保存时自动格式化代码:

  4. 录制宏命令:Edit -> Macros -> Start Macro Recording (开始录制)

    依次按下

    ctrl + alt + shift + p (使用prettier格式化代码)

    ctrl + s (保存文件)

    停止并保存宏命令(Format and save):Edit -> Macros -> Stop Macro Recording (结束录制)

  5. 为宏命令配置快捷键,方便写代码时快速执行

    Keymap -> Macros -> Format and save (这就是刚才保存的宏命令名称)