配置eslint.cjs

<think>好的，用户想了解如何配置eslint.cjs文件。首先，我需要确认用户的需求，他们可能是在项目中遇到了ESLint的问题，或者刚开始一个项目需要设置代码规范。接下来，我得回忆ESLint的基本配置步骤和常见选项。 首先，ESLint的配置文件通常是.eslintrc.js、.eslintrc.cjs、.eslintrc.json等，而使用.cjs扩展名是因为项目使用的是CommonJS模块，可能在package.json中设置了"type": "module"，所以需要明确使用CommonJS格式。需要解释这一点给用户。 然后，配置ESLint的基本结构包括env、parserOptions、extends、plugins、rules、globals等部分。需要逐一说明每个部分的作用，比如env指定环境，parserOptions设置解析器选项，extends扩展共享配置，plugins添加插件，rules自定义规则，globals定义全局变量。 接下来，用户可能需要知道如何安装依赖，比如安装ESLint本身，以及常用的配置如eslint-config-standard、插件如eslint-plugin-vue等。需要给出安装命令示例。 另外，不同框架或库如React、Vue、TypeScript的配置差异也很重要。比如，使用TypeScript需要@typescript-eslint/parser和@typescript-eslint/eslint-plugin，Vue则需要eslint-plugin-vue。需要分别说明这些情况。 还要提到如何通过--fix自动修复问题，以及创建忽略文件.eslintignore。用户可能在实际项目中需要这些信息。 最后，检查是否有遗漏的部分，比如示例配置的完整性和正确性，确保语法正确，特别是使用require而不是import，因为.cjs文件是CommonJS模块。同时，提醒用户根据项目需求调整规则，可能需要关闭某些规则或调整错误级别。 总结步骤，组织信息，分点说明，确保用户能一步步配置成功，并理解各部分的作用。需要避免过于技术化的术语，用简单的中文解释，同时保持准确性。</think>以下是如何配置`eslint.cjs`的逐步说明： ### 1. 创建配置文件 在项目根目录创建 `.eslintrc.cjs` 文件（使用`.cjs`扩展名表示CommonJS模块） ```javascript // .eslintrc.cjs module.exports = { // 基本配置 env: { browser: true, es2021: true, node: true }, extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', // Vue项目示例 'standard' // 需要安装 eslint-config-standard ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, plugins: ['vue'], // 安装对应插件 rules: { // 自定义规则 'semi': ['error', 'always'], // 必须分号 'quotes': ['error', 'single'], // 单引号 'no-console': 'warn' // 禁止console }, globals: { // 定义全局变量 jQuery: 'readonly' } }; ``` ### 2. 安装必要依赖 ```bash # 基础包 npm install eslint --save-dev # 常用插件（根据项目类型选择） npm install eslint-plugin-vue eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise --save-dev # TypeScript支持（如需） npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev ``` ### 3. 配置文件关键字段说明 - **env**：指定运行环境 ```javascript env: { browser: true, // 浏览器全局变量 node: true, // Node.js全局变量 jest: true // Jest测试框架 } ``` - **parserOptions**：解析器配置 ```javascript parserOptions: { ecmaVersion: 2022, // ECMAScript版本 sourceType: 'module', // 模块化类型 ecmaFeatures: { jsx: true } // 启用JSX } ``` - **extends**：继承共享配置 ```javascript extends: [ 'eslint:recommended', 'airbnb-base' // 常用风格指南 ] ``` - **rules**：自定义规则（优先级最高） ```javascript rules: { 'no-var': 'error', // 禁止var 'eqeqeq': ['error', 'smart'] // 智能相等判断 } ``` ### 4. 不同项目类型配置示例 #### Vue项目： ```javascript module.exports = { extends: ['plugin:vue/vue3-recommended'], parser: 'vue-eslint-parser' } ``` #### React项目： ```javascript module.exports = { extends: ['plugin:react/recommended'], settings: { react: { version: 'detect' } } } ``` #### TypeScript项目： ```javascript module.exports = { parser: '@typescript-eslint/parser', extends: ['plugin:@typescript-eslint/recommended'] } ``` ### 5. 添加脚本命令（package.json） ```json { "scripts": { "lint": "eslint . --ext .js,.jsx,.ts,.vue", "lint:fix": "eslint . --fix" } } ``` ### 6. 创建忽略文件（.eslintignore） ``` /node_modules/ /dist/ *.config.js ``` ### 注意事项 1. 优先使用`eslint --init`初始化基础配置 2. 规则严重级别： - `0`或`off`：关闭规则 - `1`或`warn`：警告（不影响退出码） - `2`或`error`：错误（触发时退出码为1） 3. 查看规则文档：https://eslint.org/docs/rules/ 建议根据项目实际需求逐步调整规则配置，初始阶段可先继承标准配置（如`eslint:recommended`），再逐步添加自定义规则。