配置ESlint、pritter插件

在 Vue 3 + Vite 項(xiàng)目中，你可以通過以下步驟配置 ESLint 和 Prettier 插件：

1.安裝插件

在項(xiàng)目根目錄下，打開終端并執(zhí)行以下命令安裝 ESLint 和 Prettier 插件：

npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev

上述命令會(huì)安裝 ESLint、Prettier 以及相關(guān)的插件和配置。

2.創(chuàng)建 .eslintrc.js 文件

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 .eslintrc.js 的文件，并添加以下內(nèi)容：

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    'prettier',
    'prettier/vue'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};

在上述配置中，我們使用了 plugin:vue/vue3-recommended 擴(kuò)展來基于 Vue 3 推薦的規(guī)則配置 ESLint。

同時(shí)，我們還引入了 prettier 和 prettier/vue 擴(kuò)展以支持 Prettier 的格式化規(guī)則。

最后，我們配置了 prettier/prettier 規(guī)則，將其設(shè)置為錯(cuò)誤級別，以確保代碼與 Prettier 格式一致。

3.創(chuàng)建 .prettierrc.js 文件

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 .prettierrc.js 的文件，并添加以下內(nèi)容：

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 80,
  tabWidth: 2
};

在上述配置中，我們使用了一些常見的 Prettier 配置，例如 semi（是否使用分號(hào)）、singleQuote（是否使用單引號(hào)）、trailingComma（是否使用尾逗號(hào)）、printWidth（行的最大長度）和 tabWidth（縮進(jìn)的空格數(shù)）。

4.配置 VS Code 編輯器

如果你使用的是 VS Code 編輯器，可以通過以下步驟配置自動(dòng)格式化和保存時(shí)的代碼規(guī)范檢查：

上述設(shè)置將啟用保存時(shí)的代碼格式化和 Vue 文件的 ESLint 檢查。

• 在擴(kuò)展商店中安裝以下插件：ESLint、Prettier - Code formatter
• 打開 VS Code 的設(shè)置（Preferences → Settings），搜索并編輯以下設(shè)置項(xiàng)：

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
    "autoFix": true
  }
]

5.運(yùn)行代碼檢查和格式化

在終端中執(zhí)行以下命令，對代碼進(jìn)行檢查和格式化：

npx eslint .
npm run lint --fix

使用上述命令可以檢查項(xiàng)目中的代碼規(guī)范，并修復(fù)一些簡單的問題。

通過以上步驟，你可以在 Vue 3 + Vite 項(xiàng)目中配置 ESLint 和 Prettier 插件，并使用它們來維護(hù)代碼的質(zhì)量和風(fēng)格一致性。

使用場景和優(yōu)缺點(diǎn)

使用 ESLint 和 Prettier 插件可以帶來以下場景和優(yōu)缺點(diǎn)：

使用場景

• 統(tǒng)一代碼風(fēng)格：ESLint 和 Prettier 可以強(qiáng)制執(zhí)行一致的代碼風(fēng)格規(guī)范，確保團(tuán)隊(duì)成員編寫的代碼風(fēng)格一致，提高代碼的可讀性和可維護(hù)性。
• 檢測潛在問題：ESLint 可以檢測出代碼中的潛在問題和錯(cuò)誤，例如未聲明的變量、未使用的變量、不必要的代碼等，幫助開發(fā)者在開發(fā)過程中發(fā)現(xiàn)并修復(fù)這些問題。
• 自動(dòng)格式化：Prettier 可以自動(dòng)格式化代碼，使代碼保持一致的縮進(jìn)、換行、引號(hào)等格式，減少手動(dòng)調(diào)整代碼格式的時(shí)間和工作量。

優(yōu)點(diǎn)

• 一致的代碼風(fēng)格：通過配置統(tǒng)一的 ESLint 和 Prettier 規(guī)則，可以確保團(tuán)隊(duì)成員編寫的代碼風(fēng)格一致，提高代碼的可讀性和可維護(hù)性。
• 提高代碼質(zhì)量：ESLint 可以檢測出代碼中的潛在問題和錯(cuò)誤，幫助開發(fā)者在開發(fā)過程中發(fā)現(xiàn)并修復(fù)這些問題，提高代碼的質(zhì)量。
• 自動(dòng)格式化：Prettier 可以自動(dòng)格式化代碼，使代碼保持一致的縮進(jìn)、換行、引號(hào)等格式，減少手動(dòng)調(diào)整代碼格式的時(shí)間和工作量。

缺點(diǎn)

• 配置復(fù)雜性：配置 ESLint 和 Prettier 可能需要一些時(shí)間和學(xué)習(xí)成本，特別是對于初次使用的開發(fā)者來說，需要了解插件的規(guī)則和配置選項(xiàng)。
• 降低靈活性：某些規(guī)則和格式化選項(xiàng)可能不符合個(gè)人或團(tuán)隊(duì)的偏好，因此可能需要花費(fèi)額外的時(shí)間和精力來調(diào)整和定制規(guī)則和選項(xiàng)。
• 額外的開銷：在每次保存或構(gòu)建代碼時(shí)，需要運(yùn)行 ESLint 和 Prettier 來檢查和格式化代碼，這可能會(huì)增加一些額外的開銷，特別是在大型項(xiàng)目中。

綜上所述，ESLint 和 Prettier 插件在統(tǒng)一代碼風(fēng)格、提高代碼質(zhì)量和自動(dòng)格式化方面具有重要的作用，但需要權(quán)衡配置復(fù)雜性和靈活性，以及額外的開銷。

在大多數(shù)情況下，它們對于項(xiàng)目的維護(hù)和團(tuán)隊(duì)協(xié)作是非常有益的。

vite打包拆分js和css

在使用 Vite 進(jìn)行打包時(shí)，可以通過配置來拆分生成的 JavaScript 和 CSS 文件。

以下是一些常用的配置選項(xiàng)：

1.拆分 JavaScript 文件

在 vite.config.js 文件中，可以使用 rollupOptions 配置項(xiàng)來指定 JavaScript 文件的拆分方式。

例如，可以使用 output 選項(xiàng)的 manualChunks 屬性來手動(dòng)指定拆分的塊：

export default {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'axios'], // 將 vue 和 axios 打包到 vendor.js
        utils: /^lodash/ // 打包以 lodash 開頭的模塊到 utils.js
      }
    }
  }
}

在上述配置中，我們指定了兩個(gè)拆分塊，vendor 和 utils。vendor 塊包含了 Vue 和 Axios，而 utils 塊包含了以 lodash 開頭的模塊。

2.拆分 CSS 文件

默認(rèn)情況下，Vite 會(huì)將所有的 CSS 文件打包到一個(gè)文件中。如果需要拆分 CSS 文件，可以使用 extractCSS 配置項(xiàng)來啟用拆分：

export default {
  build: {
    cssCodeSplit: true
  }
}

使用上述配置后，Vite 將會(huì)將每個(gè)入口文件的 CSS 提取到單獨(dú)的文件中。

需要注意的是，拆分 JavaScript 和 CSS 文件可能會(huì)增加額外的網(wǎng)絡(luò)請求，因此在進(jìn)行拆分時(shí)需要權(quán)衡加載性能和文件數(shù)量的平衡。根據(jù)實(shí)際情況，可以根據(jù)模塊的依賴關(guān)系和代碼規(guī)模來進(jìn)行合理的拆分配置。

最新評論