[Vite] ESLint風格改用Airbnb

TL;DR

使用Vite創建Create-vue時，ESLint的風格預設為Preetier。本篇介紹如何改用Airbnb風格。

參考資料

• [筆記] 在使用 Vite 創建的 Vue 3 專案中加入 Eslint（使用 Airbnb 規範）
• 你終究要用 Prettier，為什麼不一開始就用「Prettier」呢？ | Ray
• Path causing Eslint error for extraneous dependencies during import
• 如何替 Vue Vite 專案加上 ESLint？ | Ray

相關連結

• @vue/eslint-config-airbnb | NPM

---

安裝相依套件

輸入指令：

npm install eslint eslint-plugin-vue @vue/eslint-config-airbnb @rushstack/eslint-patch  --save-dev

如果有些Vite創建時已經安裝就可以不必安裝。

會安裝的套件有以下幾項：

• eslint
• eslint-plugin-vue
• @vue/eslint-config-airbnb
• @rushstack/eslint-patch

預設是'@vue/eslint-config-prettier/skip-formatting'

如果是使用前面章節Vite搭配Create-vue的方式建立專案的話，應該只會差在第三個的風格設定檔案需要安裝

查看已安裝的套件

可以在terminal輸入npm list查看目前專案下已經安裝的套件。

設定eslintrc.cjs

./eslintrc.cjs

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-airbnb',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
  },
};

錯誤修正

當eslintrc.cjs之後，可能會出現很多的紅字提示錯誤。

可以點選提示之後fix all，或是手動修正錯誤的地方（大部分都是少了分號，需要有空格，少了逗點等等的錯誤）

修改prettierrc.json

因為我們可能會使用npm run format去重新調整檔案的風格，這時候的設定會不符合airbnb的風格，只要重新排版後就會噴出一堆錯誤。

所以我們需要調整prettierrc.json的內容，讓我們執行npm run format之後可以符合airbnb風格。

./.prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "all"
}

分別是設定80個字元換行,語句結尾需要加上分號等等。

詳細可以參考官方網站 Options

接著我們使用npm run format的時候就不會出現沒有加上逗號，沒有加上分號等等的錯誤了。

待解決

在我使用Vite透過Create-vue創建專案之後，並且根據Bootstrap官方的Vite使用範例加入Bootstrap功能到我的專案中時

main.js中的import 'bootstrap/dist/js/bootstrap';會有一個錯誤(明明在package.json中已經有安裝bootstrap了仍然會有錯誤):

'bootstrap' should be listed in the project's dependencies. Run 'npm i -S bootstrap' to add it eslint(import/no-extraneous-dependencies)

目前有參考到這篇文章，但是沒有找到符合的解決方法