ESLint是js代碼的質(zhì)量檢查工具卦绣，同時也具備一定的代碼風格的格式化能力诀黍。
Prettier是一個代碼風格的約束工具满钟，Prettier能約束JS嘴拢、JSX桩盲、TypeScript、Vue席吴、CSS赌结、Less、SCSS孝冒、HTML柬姚、JSON、Markdown等代碼風格庄涡。
由于ESLint定義了一些js的代碼格式化的約束量承，導(dǎo)致其與Prettier存在一些沖突。
如：
ESLint默認語句結(jié)尾不加分號，Prettier默認語句結(jié)尾加分號撕捍；
ESLint默認強制使用單引號拿穴，Prettier默認使用雙引號；
ESLint默認句末減少不必要的逗號忧风，Prettier默認盡可能多使用逗號等等

本文使用Vue cli創(chuàng)建項目默色，并做簡單配置，由于項目成員大多數(shù)使用webstorm和vs code開發(fā)工具狮腿，另外提供兩個工具的配置方式腿宰。

新建項目

用Vue cli新建項目，創(chuàng)建時選擇手動配置項目缘厢，linter / formatter 配置選擇ESLint + Prettier吃度，選擇在保存時候進?代碼規(guī)則檢
測，不要選commit時檢測贴硫，選擇將 Babel规肴、ESLint等配置文件保存到各自的配置文件中。

項目創(chuàng)建完成后可以看到package.json文件中夜畴，存在下列開發(fā)依賴

項目根目錄下存在文件ESLint的配置文件.eslintrc.js

module.exports = {
  root: true, 
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser", // 解析器
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

由于ESLint也具備一定的代碼風格的格式化能力拖刃，vue cli 用下面的兩個插件，解決ESLint和Prettier沖突問題贪绘。

• eslint-config-prettier：禁用掉了一些不必要的以及和 Prettier 相沖突的 ESLint 規(guī)則兑牡；
• eslint-plugin-prettier：將 prettier 作為 ESLint 的規(guī)則來使用，相當于代碼不符合 Prettier 的標準時税灌，會報一個 ESLint 錯誤均函，同時也可以通過 eslint --fix 來進行格式化；這樣就相當于將 Prettier 整合進了 ESLint 中菱涤；

root 根目錄標識
ESLint 檢測配置文件步驟：
在要檢測的文件同一目錄里尋找 .eslintrc.* 和 package.json苞也；
緊接著在父級目錄里尋找，一直到文件系統(tǒng)的根目錄粘秆；
如果在前兩步發(fā)現(xiàn)有 root：true 的配置如迟，停止在父級目錄中尋找 .eslintrc；
如果以上步驟都沒有找到攻走，則回退到用戶主目錄 ~/.eslintrc 中自定義的默認配置

env 運行環(huán)境
一個環(huán)境定義了一組預(yù)定義的全局變量
獲得了特定環(huán)境的全局定義殷勘，就不會認為是開發(fā)定義的，跳過對其的定義檢測昔搂。否則會被認為改變量未定義
前端開發(fā)常用的運行環(huán)境：
browser - 瀏覽器環(huán)境中的全局變量玲销。
node - Node.js 全局變量和作用域。
es6：es6 中除了模塊之外的其他特性摘符，同時將自動設(shè)置 parserOptions.ecmaVersion 參數(shù)為 6贤斜；以此類推 ES2017 是 7策吠，而 ES2021 是 12；
es2017：parserOptions.ecmaVersion 為 8瘩绒；
jquery - jQuery 全局變量猴抹。

globals 開發(fā)者自定義的全局變量
plugins 插件
插件用來擴展解析器的功能，插件是eslint-plugin-前綴的包草讶，配置時無需加前綴

extends 規(guī)則繼承
規(guī)則的類型：
1、eslint 開頭的：是 ESLint 官方的擴展 如eslint:recommended
2炉菲、plugin 開頭的：是eslint插件類型擴展堕战，如 plugin:vue/essential,其插件前綴是eslint-plugin，省略了eslint-
3拍霜、eslint-config 開頭的：來自 npm 包嘱丢，配置時可以省略前綴 eslint-config-，比如上面的可以直接寫成 standard
4祠饺、@開頭的：擴展和 eslint-config 一樣越驻，只是在 npm 包上面加了一層作用域 scope；
5道偷、一個執(zhí)行配置文件的相對路徑或絕對路徑缀旁；
優(yōu)先級：
如果 extends 配置的是一個數(shù)組，最終會將所有規(guī)則項進行合并勺鸦，出現(xiàn)沖突的時候并巍，后面的會覆蓋前面的
通過 rules 單獨配置的規(guī)則優(yōu)先級比 extends 高

rules 自定義規(guī)則
規(guī)則的值
‘off’ 或 0：關(guān)閉對該規(guī)則的校驗；
‘warn’ 或 1：啟用規(guī)則换途，不滿足時拋出警告懊渡，不會退出編譯進程；
‘error’ 或 2：啟用規(guī)則军拟，不滿足時拋出錯誤剃执，會退出編譯進程；
如果某項規(guī)則懈息，有額外的選項肾档，可以通過數(shù)組進行傳遞，數(shù)組的第一位必須是錯誤級別辫继。
如 ‘semi’: [‘error’, ‘never’], never就是額外的配置項

這時候如果我在文件中加入代碼

console.log("HelloWorld")

編譯時將會拋出錯誤阁最，退出編譯進程

如果希望拋出警告或關(guān)閉prettier，可在rules自定義下面規(guī)則

"prettier/prettier": "warn"

配置自己的規(guī)則

ESLint就采用推薦的規(guī)則骇两，大多數(shù)情況下我們希望按照自己的習慣自定義一些Prettier規(guī)則速种。
自定義格式化文件 ,文件名可以是.prettierrc（JSON格式） .prettierrc.js/prettier.config.js（js格式，需要module.exports一個對象）
為了加入注釋讓其他成員快速了解規(guī)則低千，這里使用 .prettierrc.js文件進行配置

module.exports = {
  printWidth: 120, // 一行最多 120 字符(默認80)
  tabWidth: 2, // 每個tab相當于多少個空格（默認2）
  useTabs: false, // 是否使用tab進行縮進（默認false）
  semi: false, // 行尾需要有分號(默認true)
  singleQuote: true, // 使用單引號（默認false）
  quoteProps: 'as-needed', // 對象的 key 僅在必要時用引號
  jsxSingleQuote: false, // jsx 不使用單引號配阵，而使用雙引號
  trailingComma: 'none', // 多行使用拖尾逗號（默認none）
  bracketSpacing: true, // 在對象馏颂，數(shù)組括號與文字之間加空格 "{ foo: bar }"（默認true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的結(jié)尾，而不是另起一行（默認false）
  htmlWhitespaceSensitivity: 'css', // 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
  arrowParens: 'avoid', // 只有一個參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號（默認avoid:添加括號）
  endOfLine: 'auto' // 行尾換行符
}

讓代碼編輯器識別規(guī)則

配置規(guī)則后棋傍，我們需要編輯器能夠給出錯誤提示救拉，按我們的規(guī)則格式化代碼等提高工作效率，而不是手動調(diào)整代碼瘫拣，在命令行中查看錯誤信息亿絮，下面再編輯器中進行配置。
Webstorm和vs code 都能夠安裝ESLint和Prettier插件

vs code

安裝插件Vetur（vue語法增強） ESLint麸拄、Prettier,Vetur 也有?套 Format 規(guī)則,VSCode 中ESlint 集成了 prettier 的校驗規(guī)則,不需要再單獨安裝 Prettier 插件

配置 Prettier 為默認代碼格式化工具

同時按下 command/ctrl + shift + p 鍵盤
輸入 format document with
選擇 Configure Default Formatter…
選擇 Prettier 為默認的工具

Vue2/3 項目中的 ESLint + Prettier 代碼檢測格式化風格指南

因為平時都是使用 VSCode ESLint + Prettier 檢測格式化不規(guī)范代碼派昧，但是隨著接手的項目越來越多，需要統(tǒng)一每個項目的代碼規(guī)范拢切，于是在此分享vue項目的幾種代碼格式化風格(default,standard,airbnb,prettier)的基本區(qū)別以及修改為prettier風格蒂萎。

對比肉眼可見的格式化風格差異，并且以字符串單/雙引號淮椰，每行結(jié)尾有無分號五慈，object對象最后一項有無尾逗號作為判斷依據(jù)

VSCode的插件以及配置

• ESLint , Prettier 插件安裝
• 配置VSCode settings.json

  ...
  // 相應(yīng)文件的格式化工具選中
    "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
  // 啟用ESLint作為已驗證文件的格式化程序，可方便快捷鍵
  "eslint.format.enable": true, 
  // 每次保存的時候?qū)⒋a按eslint格式進行修復(fù)
  "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
  // 關(guān)閉編輯器默認保存格式化主穗，不然多數(shù)情況會和上面的配置執(zhí)行兩次
  "editor.formatOnSave": false
  ...

1. 【 Default 】 vue/cli 創(chuàng)建默認配置項目

1. 運行以下命令來創(chuàng)建一個新項目：
   vue create hello-world
2. 選擇 Default ([Vue 2] babel, eslint) 回車創(chuàng)建

image.png

等著創(chuàng)建成功后,會發(fā)現(xiàn) eslint 的相關(guān)配置泻拦，在package.json文件中：

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

這里我們刪除它，并在項目下新建.eslintrc.js文件將其遷移進去：

module.exports = {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  }

plugin:vue/essential：啟用 vue 的基礎(chǔ)規(guī)則
eslint:recommended：啟用 eslint 的推薦規(guī)則

babel-eslint：可以對所有有效的babel代碼進行l(wèi)int處理忽媒。

此時我們可以根據(jù)當前項目中main.js文件發(fā)現(xiàn)聪轿，最基本的風格為：字符串單引號，結(jié)尾無分號猾浦；當我們結(jié)尾加分號陆错，保存測試會沒有任何效果，不要急金赦，接下來添加 prettier 音瓷。

vue/cli 添加 prettier

運行以下命令：
vue add @vue/eslint

提示 Still proceed 選擇 y
等待安裝完
會出現(xiàn)四個格式化風格選擇項，按向下鍵夹抗，選擇 Prettier 回車確認
再選擇 Lint on save 回車確認

等 @vue/cli-plugin-eslint 安裝完成后會發(fā)現(xiàn) .eslintrc 配置中 extends 多出了@vue/prettier

回過頭來绳慎，再去項目的main.js或者App.vue文件保存測試發(fā)現(xiàn)格式化生效。

最后漠烧，去除一些常規(guī)的eslint 報錯警告信息杏愤，在 rules 中添加自定義規(guī)則：

其中 "prettier/prettier" 可以添加 prettier 相關(guān)配置

.eslintrc.js 完整配置

module.exports = {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/prettier"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {
    'prettier/prettier': [
            'error',
            {
                requireConfig: false,
                endOfLine: 'auto',
                quoteProps: 'as-needed',
                proseWrap: 'preserve',
                arrowParens: 'always',
                htmlWhitespaceSensitivity: 'strict',
                ignorePath: '.prettierignore',
                jsxBracketSameLine: false,
                jsxSingleQuote: false,
                vueIndentScriptAndStyle: true,
                semi: false,
                trailingComma: 'none',
                singleQuote: true,
                printWidth: 150,
                tabWidth: 2,
                bracketSpacing: true,
                useTabs: true
            }
        ],
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'vue/v-on-event-hyphenation': 'off',
        'vue/multi-word-component-names': ['off'],
        'vue/prop-name-casing': 'off',
        'vue/require-default-prop': 'off',
        'vue/no-v-html': 'off',
        'no-new': 'off',
        'prefer-regex-literals': 'off',
        'prefer-promise-reject-errors': 'off',
        'no-unused-vars': [
            'off',
            {
                caughtErrors: 'none'
            }
        ],
        'vue/no-unused-vars': [
            'off',
            {
                caughtErrors: 'none'
            }
        ],
        'no-tabs': 'off',
        'no-trailing-spaces': 'off',
        'no-mixed-spaces-and-tabs': 'off',
        'no-empty-function': 'off',
        'space-before-function-paren': ['off', 'always'],
        'no-unreachable-loop': 'off',
        'no-multiple-empty-lines': 'off',
        'no-loss-of-precision': 'off',
        'no-useless-escape': 0,
        semi: ['warn', 'never'],
        eqeqeq: 0,
        indent: ['off', 2],
        quotes: ['error', 'single', { allowTemplateLiterals: true }]
  }
}

2. 【 Manually 】 vue/cli 自定義創(chuàng)建 ESLint + Prettier

1. 運行以下命令來創(chuàng)建一個新項目：
   vue create hello-world
2. Please pick a preset: 選擇 Manually select features
3. Check the features needed for your project: Choose Vue version, Babel, Linter...
4. Choose a version of Vue.js that you want to start the project with 2.x
5. Pick a linter / formatter config: Prettier
6. Pick additional lint features: Lint on save
7. Where do you prefer placing config for Babel, ESLint, etc.?: In dedicated config files
8. Save this as a preset for future projects? Yes
9. Save preset as: 回車確認

可見差異：字符串雙引號，每行結(jié)尾有分號已脓，object對象最后一項有尾逗號;

生成的.eslintrc.js 中 extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"]

跟上面 [1. 【 Default 】 vue/cli 創(chuàng)建默認配置項目] 創(chuàng)建的.eslintrc.js 配置對比發(fā)現(xiàn)珊楼，只是少了 rules 配置，將上面的 rules 配置copy過來度液。同樣測試保存格式化效果一樣厕宗。

3. 【 Manually 】 vue/cli 自定義創(chuàng)建 ESLint + Standard

1. 運行以下命令來創(chuàng)建一個新項目：

vue create hello-world

1. Please pick a preset: Manually select features
2. Check the features needed for your project: Choose Vue version, Babel, Linter
3. Choose a version of Vue.js that you want to start the project with 2.x
4. Pick a linter / formatter config: Standard
5. Pick additional lint features: Lint on save
6. Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
7. Save this as a preset for future projects? Yes
8. Save preset as:回車確認

可見差異：字符串單引號画舌，每行結(jié)尾無分號，對象最后一項沒有尾逗號;

生成的.eslintrc.js 中 extends: ["plugin:vue/essential", "@vue/standard"]

關(guān)于.eslintrc.js配置已慢，去掉 rules 中的 'prettier/prettier' 曲聂，rules其他配置同上，同樣測試保存格式化效果一樣佑惠。

4. 【 Manually 】 vue/cli 自定義創(chuàng)建 ESLint + Airbnb

1. 運行以下命令來創(chuàng)建一個新項目：

vue create hello-world

1. Please pick a preset: Manually select features
2. Check the features needed for your project: Choose Vue version, Babel, Linter
3. Choose a version of Vue.js that you want to start the project with 2.x
4. Pick a linter / formatter config: Airbnb
5. Pick additional lint features: Lint on save
6. Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
7. Save this as a preset for future projects? Yes
8. Save preset as:回車確認

可見差異：字符串單引號朋腋，每行結(jié)尾有分號，對象最后一項有尾逗號;

生成的.eslintrc.js 中 extends: ["plugin:vue/essential", "@vue/airbnb"]

關(guān)于.eslintrc.js配置膜楷，rules其他配置同上旭咽，同樣測試保存格式化效果基本一致一樣。

5. vite 自定義創(chuàng)建默認Vue項目

1. 運行以下命令來創(chuàng)建一個新項目：

npm init vite@latest my-vue-app --template vue

2. 安裝 vue3 ESLint + Prettier 相關(guān)依賴

npm install eslint-config-tkb -D

然后在package.json 中新添加配置即可：

"eslintConfig": {
    "extends": ["eslint-config-tkb"]
}

進入vue和js 文件保存把将，測試格式化效果基本一致一樣轻专。

eslint-config-tkb 是個人自定義的 eslESLint + Prettier 的配置忆矛，也支持vite創(chuàng)建的 vue-ts創(chuàng)建的模板項目察蹲。

參考資料：

cnblogs
csdn