項(xiàng)目在使用@antfu/eslint-config和taiwindcss時 Eslint配置

在使用了@antfu/eslint-config的eslint配置，如果要在Ctrl+S保存文件時自動排序tailwindcss的class類名，也需要在對應(yīng)的eslint.config.ts中配置eslint-plugin-tailwindcss（不能使用.prettierrc等配置方式，因?yàn)闀c@antfu/eslint-config配置方式?jīng)_突）

• 安裝插件

pnpm add -D eslint  eslint-plugin-import eslint-plugin-tailwindcss tailwindcss @antfu/eslint-config

"eslint",
"eslint-plugin-import",
"eslint-plugin-tailwindcss",
"tailwindcss", (顯式 devDep，給 plugin 解析使用)
"@antfu/eslint-config"

eslint.config.ts 文件

config: 用絕對路徑，規(guī)避 local-pkg 解析失敗的坑。

import { fileURLToPath } from 'node:url'
import antfu from '@antfu/eslint-config'
import tailwindcss from 'eslint-plugin-tailwindcss'
import withNuxt from './.nuxt/eslint.config.mjs'

const tailwindConfigPath = fileURLToPath(new URL('./tailwind.config.ts', import.meta.url))

export default withNuxt(
  await antfu(
    {
      formatters: true,
      ignores: [
        'dist',
        'node_modules',
        '.nuxt',
        'public',
        'script/**/*',
      ],
    },
    {
      rules: {
        'unused-imports/no-unused-vars': [
          'error',
          {
            argsIgnorePattern: '^_',
            varsIgnorePattern: '^_',
            caughtErrorsIgnorePattern: '^_',
          },
        ],
        'antfu/top-level-function': 'off',
        'ts/no-use-before-define': 'off',
        'jsdoc/check-alignment': 'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'unicorn/no-new-array': 'off',
        'vue/no-multiple-template-root': 'off',
        'vue/no-unused-refs': 'off',
        'no-new': 'off',
        'no-lone-blocks': 'off',
        'node/prefer-global/process': 'off',
      },
    },
  ),
  {
    plugins: {
      tailwindcss,
    },
    settings: {
      tailwindcss: {
        config: tailwindConfigPath,
        classRegex: '^class(Name)?$',
      },
    },
    rules: {
      'tailwindcss/classnames-order': 'warn',
    },
  },
)

tailwind.config.ts 文件

export default {
  important: '#__nuxt', // 提高tailwindcss的優(yōu)先級（#__nuxt替換成你的root標(biāo)簽的id）
  theme: {
    fontFamily: {
      HarmonyOS: ['HarmonyOS Sans SC'],
    },
    fontWeight: {
      regular: '400',
      medium: '500',
      bold: '600',
    },
    fontSize: {
      base: '14px',
    },
    colors: {
      // UI設(shè)計(jì)樣色變量
      'my-primary': {
        // 使用示例: bg-primary
        'DEFAULT': '#0057ff',
        // 使用示例: bg-primary-hover
        'hover': '#3385ff',
        'click': '#003ece',
        'scenario': '#6aa1ff',
        'disable': '#aacfff',
        'text-disabled': '#cce2fe',
        'fill-2': '#e5f0ff',
      },
      'my-border': {
        1: '#86909c',
        2: '#c9cdd4',
        3: '#e5e6eb',
        4: '#f2f3f5',
        5: '#fff',
      },
      'my-bg': {
        1: '#fff',
        2: '#f9f9fa',
        3: '#f1f3f5',
        4: '#e6e7ea',
        5: '#e1e2e3',
        6: '#171d2a',
        8: '#f6f7f8',
      },
      'my-text': {
        1: '#1d2129',
        2: '#4d5562',
        3: '#868f9c',
        4: '#caccd0',
        5: '#fff',
      },
      'my-mask': {
        1: 'rgba(0, 0, 0, 20%)',
        2: 'rgba(0, 0, 0, 40%)',
        3: 'rgba(0, 0, 0, 60%)',
        4: 'rgba(255, 255, 255, 60%)',
        5: 'rgba(255, 255, 255, 40%)',
        6: 'rgba(255, 255, 255, 20%)',
        7: 'rgba(0, 87, 255, 15%)',
        8: 'rgba(0, 87, 255, 10%)',
        9: 'rgba(0, 87, 255, 5%)',
      },
      'my-success': {
        DEFAULT: '#00b42a',
        5: '#23c343',
        4: '#009a29',
        3: '#7be188',
        2: '#aff0b5',
        1: '#e8ffea',
      },
      'my-warning': {
        DEFAULT: '#ff7d00',
        5: '#ff9a2e',
        4: '#d25f00',
        3: '#ffcf8b',
        2: '#ffe4ba',
        1: '#fff7e8',
      },
      'my-error': {
        DEFAULT: '#f53f3f',
        5: '#f76560',
        4: '#d23f3f',
        3: '#fbaca3',
        2: '#fdcdc5',
        1: '#ffece8',
        icon: '#ea0000',
      },
    },
    backgroundImage: {
      'my-blue-1': 'linear-gradient(180deg, #EBF1FF 0%, #E8EDFB 52%, #BBD4FF 100%)',
      'my-blue-2': 'linear-gradient(153deg, #DDE4FF 11%, #F1F3F5 45%, #F1F3F5 85%)',
    },
    extend: {
      spacing: {
      },
      borderRadius: {
      },
      boxShadow: {
        // 自定義陰影 shadow-custom
        custom: '0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1)',
      },
    },
  },
}

關(guān)鍵配置，在項(xiàng)目更目錄中新建.vscode文件夾，在文件夾下新建settings.json文件

settings.json

{
  "files.associations": {
    "*.css": "tailwindcss",
    "tailwindcss.scss": "tailwindcss"
  },
  "typescript.tsdk": "node_modules/typescript/lib",

  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Silent the stylistic rules in your IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "format/*", "severity": "off", "fixable": true },
    { "rule": "*-indent", "severity": "off", "fixable": true },
    { "rule": "*-spacing", "severity": "off", "fixable": true },
    { "rule": "*-spaces", "severity": "off", "fixable": true },
    { "rule": "*-order", "severity": "off", "fixable": true },
    { "rule": "*-dangle", "severity": "off", "fixable": true },
    { "rule": "*-newline", "severity": "off", "fixable": true },
    { "rule": "*quotes", "severity": "off", "fixable": true },
    { "rule": "*semi", "severity": "off", "fixable": true }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}