# 安裝ESLint核心包
npm install --save-dev eslint
# 安裝Vue相關(guān)插件
npm install --save-dev eslint-plugin-vue vue-eslint-parser
# 安裝JavaScript推薦配置
npm install --save-dev @eslint/js globals
# 安裝Prettier相關(guān)（用于代碼格式化）
npm install --save-dev prettier eslint-plugin-prettier

import globals from 'globals';
import pluginJs from '@eslint/js';
import pluginVue from 'eslint-plugin-vue';
import vueParser from 'vue-eslint-parser';
import prettier from 'eslint-plugin-prettier';
export default [
  // 全局忽略配置
  {
    ignores: [
      '**/*.config.js',
      'dist/**',
      'node_modules/**',
      '!**/eslint.config.js',
    ],
  },
  // JavaScript文件配置
  {
    files: ['**/*.js', '**/*.mjs'],//針對(duì).js和.mjs文件
    languageOptions: {
      globals: globals.browser,
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: {
      prettier,
    },
    rules: {
      'prettier/prettier': 'error',
      'no-var': 'error',// 禁止使用var
      'no-multiple-empty-lines': ['warn', { max: 1 }],//最多允許1個(gè)空行
      'no-console': 'warn',//禁止使用console
      'no-debugger': 'warn',//禁止使用debugger
      'no-unexpected-multiline': 'error',//防止意外的多行語(yǔ)句
      'no-useless-escape': 'off',//關(guān)閉對(duì)不必要轉(zhuǎn)義字符的檢查
      'no-unused-vars': 'error',//禁止未使用的變量
    },
  },
  // Vue文件配置
  {
    files: ['**/*.vue'],
    languageOptions: {
      globals: globals.browser,
      parser: vueParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    plugins: {
      prettier,
      vue: pluginVue,
    },
    rules: {
      'prettier/prettier': 'error',
      'no-var': 'error',
      'no-multiple-empty-lines': ['warn', { max: 1 }],
      'no-console': 'warn',
      'no-debugger': 'warn',
      'no-unexpected-multiline': 'error',
      'no-useless-escape': 'off',
      'no-unused-vars': 'error',
      // Vue特定規(guī)則
      'vue/multi-word-component-names': 'off',//關(guān)閉組件名必須時(shí)多詞的要求
      'vue/script-setup-uses-vars': 'error',//確保<script setup>中變量被正確使用
      'vue/no-mutating-props': 'off',
      'vue/attribute-hyphenation': 'off',
      'vue/valid-v-slot': [
        'error',
        {
          allowModifiers: true,
        },
      ],
    },
  },
  // 推薦配置
  pluginJs.configs.recommended,//將使用區(qū)推薦的有關(guān)JavaScript的ESLint規(guī)則
  ...pluginVue.configs['flat/essential'],// 使用Vue.js的基本ESLint規(guī)則
];

{
  "scripts": {
    "lint": "eslint . --fix",
    "lint:check": "eslint .",
    "format": "prettier --write ."
  }
}

{
  "semi": true,// 在每個(gè)語(yǔ)句的末尾添加分號(hào)
  "singleQuote": true,// 使用單引號(hào)
  "tabWidth": 2,// 設(shè)置縮進(jìn)的空格數(shù)為2
  "useTabs": false,// 使用空格縮進(jìn)
  "printWidth": 100,//每行的最大字符數(shù)為100
  "trailingComma": "all"http://在多行結(jié)構(gòu)的最后一個(gè)元素后添加逗號(hào)
}

# 檢查代碼
npm run lint:check
# 檢查并自動(dòng)修復(fù)
npm run lint
# 格式化代碼
npm run format