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

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

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

格式化方法

配置好了 prettier ，我们还需要知道如何格式化代码。

1. vscode 安装了 eslint 插件后，第一次进入项目选择 allow 允许使用本机 eslint 插件后，每次按 ctrl + s 可以进行格式化。

2. vscode 安装了 prettier 插件后，在 settings.json 配置内配置对 vue 文件的格式化：

     "[vue]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     }

   在 settings.json 配置之后，就可以在 .vue 文件内按 alt + shift + f 格式化按键进行代码格式化。

template 部分

standard

<template>
  <!-- 允许单双引号混用 × -->
  <div class='class-name'>
    text
    <!-- 不会对 props 格式化，允许杂乱排序 × -->
    <span
      class='span-class-name'
      ref="span"
      key="key" :class="data"
      v-if="data">
      <!-- 对大括号内空格无要求，可乱加空格 × -->
      {{ text}}
    </span>
  </div>
</template>

prettier

<template>
  <!-- 由于配置了 singleQuote ，统一为单引号，不允许单双引号混用 √ -->
  <div class="class-name">
    text
    <!-- 会对 props 格式化，超过 printWidth 自动按列排序 √ -->
    <span
      class="span-class-name"
      ref="span"
      key="key"
      :class="data"
      v-if="data"
    >
      <!-- 统一大括号内空格 √ -->
      {{ text }}
    </span>
  </div>
</template>

得分

standard：0

prettier：3

script 部分

standard

// import 按需导入要求大括号必须有左右空格 √
import { reactive } from 'vue'

// 导入过多允许换行（必须手动） √
import {
  reactive,
  ref,
  toRefs,
  shallowRef,
  computed,
  watch,
  setup
} from 'vue'

export default {
  methods: {
  
    // 函数后必须有空格，if 等语句同理 ×
    test () {
      const test = 'test'
      console.log(test)

      // 允许 array 内 object 自由的换行机制 √
      //  array 首尾中括号前后自由换行 ×
      const list = [
        {
          key: 'value'
        },
        { key: 'value' }]
        
      // 允许小括号内自由的换行 √
      const data = reactive(
        { key: 'value' }
      )
      
      // object 内允许自由的换行（ return { data, list } 也可） √
      return {
        data,
        list
      }
    }
  }
}

prettier

// import 按需导入要求大括号必须有左右空格 √
import { reactive } from 'vue'

// 导入过多自动换行 √
import {
  reactive,
  ref,
  toRefs,
  shallowRef,
  computed,
  watch,
  setup,
  shallowReactive
} from 'vue'

export default {
  methods: {
  
    // 函数后不可有空格，if 等语句同理 √
    test() {
      const test = 'test'
      console.log(test)

      // 允许 array 内 object 自由的换行机制 √
      //  array 首尾中括号前后必须换行 √
      const list = [
        {
          key: 'value'
        },
        { key: 'value' }
      ]
      
      // 在不超过 printWidth 时不允许自动换行，小括号也不允许手动换行（换行是无意义的） √
      const data = reactive({ key: 'value' })

	  // object 内允许自由的换行（ return { data, list } 也可） √
      return {
        data,
        list
      }
    }
  }
}

得分

standard：5

prettier：7

总结

总的来看，强烈推荐使用 prettier 进行代码格式化。

不光是美观，在 vscode 内如果使用 standard 进行代码规范，只能使用 ctrl + s，而不能使用 alt + shift + f ，这就导致很多其他边界情况无法格式化。

而当使用 prettier 时，alt + shift + f 使用了 prettier 插件按 .prettierrc 配置进行格式化，同时 ctrl + s 也会依据 prettier 配置进行格式化，是一致通用的。

希望以后不要自找麻烦使用 standard 或者其他 eslint 了，学习尤雨溪使用 prettier 不香吗