摘要

基于eslint进行的，快速完成项目的代码格式化配置，使用命令一键完成历史文件的修改。

准备

1、首先使用vue cli快速搭建相关的脚手架
2、在搭建过程中选择 3、然后在vscode中下载相关的插件： EsLint、 Vuter、Prettier-Code formatter

上述完成后，开始配置格式化。

教学视频： www.bilibili.com/video/BV1BS…

配置

1、打开vscode,进行配置，如下：

2、然后弹出如下窗体：

3、点击“在settings.json”中配置，添加如下代码：

{
  //配置eslint
  "eslint.autoFixOnSave": true,  //  启用保存时自动修复,默认只支持.js文件
  "eslint.validate": [
     "javascript",  //  用eslint的规则检测js文件
     {
       "language": "vue",   // 检测vue文件
       "autoFix": true   //  为vue文件开启保存自动修复的功能
     },
     {
       "language": "html",
       "autoFix": true
     },
   ],
}

4、然后在项目的.eslintrc.js配置文件中修改如下：

5、然后使用package.json中的格式化命令：

6、运行后npm run lint，则自动完成所有文件的格式化，同时保存时，会自动格式化文件