Vue3中eslint代码格式化prettier和standard规则比较（为什么推荐使用prettier）

前言

在 vue-cli 创建项目时，对于 eslint 代码格式化一般我们会选 standard 或 prettier 方案，他们有什么区别和优缺点呢？

插件准备

eslint

使用 eslint 需要安装 eslint 插件，并在项目第一次打开时 allow 同意使用本机的 eslint ：

prettier

使用 prettier 需要安装相应的插件：

依赖比较 - package.json

standard

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",   //
    "@vue/cli-plugin-eslint": "~4.5.0",  //
    "@vue/cli-service": "~4.5.0",        //
    "@vue/compiler-sfc": "^3.0.0",       //
    "@vue/eslint-config-standard": "^5.1.2", -
    "babel-eslint": "^10.1.0",           //
    "eslint": "^6.7.2",                  //
    "eslint-plugin-import": "^2.20.2",       -
    "eslint-plugin-node": "^11.1.0",         -
    "eslint-plugin-promise": "^4.2.1",       -
    "eslint-plugin-standard": "^4.0.0",      -
    "eslint-plugin-vue": "^7.0.0-0"      //
  }

prettier

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",   //
    "@vue/cli-plugin-eslint": "~4.5.0",  //
    "@vue/cli-service": "~4.5.0",        //
    "@vue/compiler-sfc": "^3.0.0",       //
    "@vue/eslint-config-prettier": "^6.0.0", -
    "babel-eslint": "^10.1.0",           //
    "eslint": "^6.7.2",                  //
    "eslint-plugin-prettier": "^3.1.3",      -
    "eslint-plugin-vue": "^7.0.0-0",     //
    "prettier": "^1.19.1"                    -
  }

我们发现 standard 有 5 个相关依赖，而 prettier 只有 3 个相关依赖。

eslint 配置比较 - .eslintrc.js

standard

  extends: [
    'plugin:vue/vue3-essential',  //
    '@vue/standard'               -
  ]

prettier

  extends: [
    "plugin:vue/vue3-essential",  //
    "eslint:recommended",         -
    "@vue/prettier"               -
  ]

相信大家也能理解因为 prettier 的规则比较少所以需要补配一个 eslint:recommended 推荐规则

代码格式化比较

配置 prettier

对比完了 package 依赖和 eslint 配置，下面我们对比实际代码格式化区别，在这之前需要对 prettier 进行手动配置。

在项目根目录下建立一个 prettier 配置文件 .prettierrc ：

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80
}

我们使用尤雨溪的配置，句尾不带分号 + 单引号。

• 尤雨溪配置：vue-next/.prettierrc

• 更多配置：官方配置文档