为了保持代码整洁，便于维护，一般使用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 (这就是刚才保存的宏命令名称)