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 ，我们还需要知道如何格式化代码。
-
vscode 安装了 eslint 插件后，第一次进入项目选择 allow 允许使用本机 eslint 插件后，每次按 ctrl + s 可以进行格式化。
-
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 不香吗