配置ESlint、pritter插件

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

1.安裝插件

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

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

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

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

在項目根目錄下創(chuàng)建一個名為 .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 擴展來基于 Vue 3 推薦的規(guī)則配置 ESLint。

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

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

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

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

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

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

4.配置 VS Code 編輯器

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

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

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

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

5.運行代碼檢查和格式化

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

npx eslint .
npm run lint --fix

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

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

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

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

使用場景

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

優(yōu)點

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

缺點

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

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

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

vite打包拆分js和css

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

以下是一些常用的配置選項：

1.拆分 JavaScript 文件

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

例如，可以使用 output 選項的 manualChunks 屬性來手動指定拆分的塊：

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

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

2.拆分 CSS 文件

默認情況下，Vite 會將所有的 CSS 文件打包到一個文件中。如果需要拆分 CSS 文件，可以使用 extractCSS 配置項來啟用拆分：

export default {
  build: {
    cssCodeSplit: true
  }
}

使用上述配置后，Vite 將會將每個入口文件的 CSS 提取到單獨的文件中。

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

最新評論