快捷導(dǎo)航

Vue 項(xiàng)目安裝和配置@antfu/eslint-config 保姆級教程

更新時(shí)間：2025年09月28日 09:41:49 作者：南風(fēng)木兮

本文指導(dǎo)如何在Vue項(xiàng)目中安裝配置@antfu/eslint-config,實(shí)現(xiàn)代碼規(guī)范與自動(dòng)格式化,本文分步驟給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

前置條件

確保你的 Node.js 版本滿足要求：Node.js >= 23。
若版本不符合，可使用 nvm 管理 Node.js 版本，方便一鍵切換。

安裝步驟

1. 安裝 VS Code ESLint 插件

在 VS Code 擴(kuò)展市場中搜索并安裝 ESLint 插件，用于實(shí)時(shí)檢測代碼規(guī)范問題。

2. 安裝 @antfu/eslint-config

運(yùn)行以下命令安裝最新版本的 @antfu/eslint-config：

pnpm dlx @antfu/eslint-config@latest

安裝過程中會(huì)進(jìn)入交互式配置界面：

選擇技術(shù)棧：選擇 Vue（按空格勾選）。

自動(dòng)格式化：勾選“自動(dòng)格式化”選項(xiàng)。如果小的項(xiàng)目使用 UnoCSS，可勾選 UnoCSS 以啟用類名自動(dòng)排序。

VS Code 配置：勾選生成 settings.json，這會(huì)為當(dāng)前項(xiàng)目創(chuàng)建專屬的 VS Code 配置文件。
注意：@antfu/eslint-config 內(nèi)置格式化功能，無需 Prettier，會(huì)自動(dòng)禁用 Prettier 插件。

自定義配置

默認(rèn)配置下，Vue 文件中的 <style> 塊（CSS/LESS/SCSS）不會(huì)自動(dòng)格式化。需要額外配置 eslint.config.mjs 文件以啟用格式化支持。

配置示例

在項(xiàng)目根目錄創(chuàng)建或修改 eslint.config.mjs：

import antfu from '@antfu/eslint-config'
export default antfu({
  formatters: {
    css: true, // 啟用 CSS、LESS、SCSS 及 Vue <style> 塊格式化
    html: true, // 啟用 HTML 文件格式化
  },
  unocss: true, // 啟用 UnoCSS 類名排序（如果使用 UnoCSS）
  vue: true,    // 啟用 Vue 相關(guān)規(guī)則
}, {
  rules: {
    'antfu/if-newline': 'off', // 關(guān)閉 if 語句強(qiáng)制換行
    'no-async-promise-executor': 'off', // 允許 Promise 構(gòu)造函數(shù)使用 async
    'perfectionist/sort-imports': [ // 配置導(dǎo)入排序
      'error',
      {
        customGroups: {
          type: {
            'vue-type': ['^vue$', '^vue-.+', '^@vue/.+'],
          },
          value: {
            vue: ['^vue$', '^vue-.+', '^@vue/.+'], // Vue 相關(guān)庫
            components: ['^@/components/.+', '@/tmui/.+'], // 組件
            stores: ['^@/store/.+'], // 狀態(tài)管理
            utils: ['^@/utils/.+'], // 工具函數(shù)
            constants: ['^@/constants/.+'], // 常量
            hooks: ['^@/hooks/.+'], // 自定義 hooks
            api: ['^@/service/.+'], // API 服務(wù)
          },
        },
        environment: 'node',
        groups: [
          // 類型導(dǎo)入
          ['external-type', 'builtin-type', 'type'],
          'vue-type',
          ['parent-type', 'sibling-type', 'index-type'],
          ['internal-type'],
          // 值導(dǎo)入
          'builtin',
          'vue',
          'external',
          'internal',
          // 內(nèi)部模塊
          'components',
          'stores',
          'utils',
          'constants',
          'hooks',
          'api',
          // 其他
          ['parent', 'sibling', 'index'],
          'side-effect',
          'side-effect-style',
          'style',
          'object',
          'unknown',
        ],
        internalPattern: ['^@/.+'], // 內(nèi)部模塊路徑匹配
        newlinesBetween: 'always', // 導(dǎo)入組之間空行
        order: 'asc', // 升序排序
        type: 'natural', // 自然排序
      },
    ],
  },
})

配置說明

formatters.css 和 formatters.html：啟用 CSS 和 HTML 文件（包括 Vue 的 <style> 塊）的自動(dòng)格式化。
unocss：啟用 UnoCSS 類名排序（僅在使用 UnoCSS 時(shí)啟用）。
vue：啟用 Vue 特定規(guī)則。
rules：自定義規(guī)則，例如禁用 if 語句換行、允許 async Promise 構(gòu)造函數(shù)、配置導(dǎo)入排序等。

完成安裝

安裝項(xiàng)目依賴：

pnpm install

重啟 VS Code，確保配置生效。

批量修復(fù) ESLint 問題

運(yùn)行以下命令批量修復(fù)指定目錄中的 ESLint 問題：

# 修復(fù) src 目錄
npx eslint --fix --ext .js,.ts,.vue src
# 修復(fù) src/components 目錄
npx eslint --fix --ext .js,.ts,.vue src/components

注意事項(xiàng)

Node.js 版本：確保使用 Node.js >= 23，否則可能出現(xiàn)兼容性問題。推薦使用 nvm 管理 Node.js 版本。
Prettier 禁用：@antfu/eslint-config 內(nèi)置格式化功能，無需 Prettier，安裝后會(huì)自動(dòng)禁用 Prettier 插件。
UnoCSS：僅在項(xiàng)目中使用 UnoCSS 時(shí)啟用相關(guān)配置。

到此這篇關(guān)于Vue 項(xiàng)目安裝和配置@antfu/eslint-config 保姆級教程的文章就介紹到這了,更多相關(guān)vue安裝 @antfu/eslint-config內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: