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
<span
class='span-class-name'
ref="span"
key="key" :class="data"
v-if="data">
{{ text}}
span>
div>
template>
prettier
<template>
<div class="class-name">
text
<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 不香吗