开发日志-Eslint的基本使用

一. 安装

1. 快捷命令

npm init @eslint/config

3. 手动安装

npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-config-prettier

二. 配置文件

1. 创建配置文件

.eslintrc.config.js

2. 配置内容

    
    import vuePlugin from 'eslint-plugin-vue';
    import typescriptEslint from '@typescript-eslint/eslint-plugin';
    import eslintPluginPrettier from 'eslint-plugin-prettier';
    import prettierConfig from 'eslint-config-prettier';
    
    export default [
        {
            // 全局配置
            languageOptions: {
                ecmaVersion: 'latest',
                sourceType: 'module',
            },
            linterOptions: {
                reportUnusedDisableDirectives: true,
            },
        },
        {
            // TypeScript 文件配置
            files: ['*.ts', '*.tsx'],
            parser: '@typescript-eslint/parser',
            rules: {
                ...typescriptEslint.configs.recommended.rules,
            },
        },
        {
            // Vue 文件配置
            files: ['*.vue'],
            parser: 'vue-eslint-parser',
            rules: {
                ...vuePlugin.configs['vue3-essential'].rules,
            },
        },
        {
            // 自定义规则
            rules: {
                quotes: ['error', 'single'], // 强制使用单引号
                indent: ['error', 4, { SwitchCase: 1 }], // 强制使用4个空格作为缩进
                semi: ['error', 'always'], // 强制使用分号
                'no-console': 'warn', // 警告禁止使用 console
                'vue/html-indent': ['error', 4], // Vue 文件中强制使用4个空格作为缩进
                '@typescript-eslint/no-unused-vars': ['error'], // 禁止 TypeScript 中未使用的变量
                'prettier/prettier': [
                    'error',
                    {
                        singleQuote: true,
                        tabWidth: 4,
                        useTabs: true,
                        semi: true,
                        trailingComma: 'es5',
                        printWidth: 80,
                    },
                ],
            },
        },
        prettierConfig,
        eslintPluginPrettier.configs.recommended,
    ];

3. 创建

三. 说明

• globals: 从 globals 模块引入全局变量配置。
• pluginVue.configs['vue3-essential']: 使用 eslint-plugin-vue 插件的 Vue 3 必要配置。
• typescriptEslint.configs['recommended']: 使用 @typescript-eslint 插件的推荐配置。
• prettier: 使用 eslint-config-prettier 插件的配置，确保它在最后加载，以覆盖其他格式化规则。
• rules: 自定义 ESLint 规则，包括强制使用单引号、4个空格作为缩进、强制使用分号、警告禁止使用 console 以及 Prettier 的配置。