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 不香嗎