eslint开发规范配置你废了吗

吃嘛嘛香呼呼
538 阅读6分钟

本教程从安装开始循序渐进讲解代码开发规范配置的每一个步骤，以及每个步骤之间的关联性，后续也能轻松实现自定义～

eslint简单配置

首先，从最基础的安装配置开始：

  1. 安装
npm install --save-dev eslint

2. 初始化配置

npm init @eslint/config@latest  // 按照选项init文件

3. 检查初始化配置是否生效

npx eslint <文件名>

具体操作可参考：eslint官网

实时eslint 检测

检测语法需要手动执行npx eslint <文件名>才会出现对应的 eslint 提示，如何在编写代码时进行实时代码检查？

1. vscode 安装 eslint 扩展

主要作用是波浪号提示代码中的error、warning。

截屏2025-01-06 20.02.49.png

2.settings.json添加配置

安装插件后开启ESLint 插件对代码的检查功能需要在 settings.json 添加配置，eslint扩展在读取到eslint.enable为true才会启用，eslint.validate可以指定 ESLint 应该对哪些类型的文件进行代码检查。

  • 项目级别settings>用户级别settings，若仅对当前项目生效，则项目的根目录下添加.vscode/settings.json，否则需要在设置用户级别的settings.json。
{
  "eslint.enable": true,  // 启用 ESLint 插件对代码的检查功能。
  "eslint.validate": [ // 指定 ESLint 应该对哪些类型的文件进行代码检查
    "javascript",
    "javascriptreact",
    "typescriptreact"
  ]
}

eslint详细配置

下一步，添加我们项目所需要的eslint配置，先来认识每个配置项的作用：

  • parser（主解析器）
    • 将源代码从文本形式解析为抽象语法树（AST）的解析器。
    • 🌰：vue-eslint-parser 可以将 Vue 单文件组件的模板、脚本和样式解析为 ESLint 可以处理的抽象语法树（AST）。
  • parserOptions（副解析器）
    • 为 parser 提供额外的解析选项。
    • 🌰：在 Vue 项目中使用 vue-eslint-parser 作为主解析器时，你可以在 parserOptions 中设置 parser 为 @typescript-eslint/parser 来处理 Vue 组件中的 TypeScript 部分。
  • extends
    • 继承 eslint-config-* 或者 plugins 的规则集，不需要在 rules 中重新定义继承的规则，这些规则会自动应用，使配置更加简洁和易于维护。
    • 🌰：@vue/eslint-config-typescript为 Vue 项目中的 TypeScript 部分提供更全面的 ESLint 配置。
  • plugins
    • 用于扩展 ESLint 的功能。使用第三方插件来检查特定的代码风格或语法。
    • 🌰：simple-import-sort将代码中的导入语句按特定的顺序排列，使代码看起来更加整洁和规范。
  • rules
    • 用于定义或覆盖代码检查规则及其严重程度。

🌰vue项目配置：

  • 写在上面的优先级更高
module.exports = {
  root: true, // 表示该 ESLint 配置是项目的根配置，防止 ESLint 向上查找父级目录中的配置文件
  parser: "vue-eslint-parser", // 主解析器 解析 .vue 文件
  parserOptions: {
    parser: "@typescript-eslint/parser", // 副解析器 解析 Vue 组件中的 TypeScript 部分
    ecmaVersion: 2020,
    "sourceType": "module" // 使用模块语法
  },
  env: {
    node: true,
    browser: true // 代码可能会在浏览器环境中运行，启用浏览器相关的全局变量,如 `window`、`document` 等。
  },
  extends: [
    'plugin:vue/recommended', // 使用Vue 官方推荐的 ESLint 插件规则集
    '@vue/eslint-config-typescript', // 添加 Vue 项目中使用 TypeScript 的 ESLint 配置
  ],
  plugins: ['simple-import-sort'], // 对导入语句进行排序
  rules: {
    // 覆盖 @vue/eslint-config-typescript 中的规则定义
    '@typescript-eslint/no-unused-vars': 1,
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/camelcase': 0,
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    
    // 覆盖 plugin:vue/recommended 中的规则定义
    'vue/max-attributes-per-line': ['error', {
      'singleline': {
        'max': 3
      },
      'multiline': {
        'max': 1
      }
    }],
    
    // 覆盖 simple-import-sort 中的规则定义
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
  },
}

🌰react项目配置：

module.exports = {
  env: {
    browser: true,
    node: true,
  },
  parser: '@typescript-eslint/parser', // 专门用于解析 TypeScript 代码，同时也支持 JSX 语法。
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  extends: [
    'plugin:react/recommended', // 引入 eslint-plugin-react 的推荐规则
    'plugin:react-hooks/recommended', // 确保 React Hooks 的使用符合规范
    'plugin:@typescript-eslint/recommended', // 确保 TypeScript 代码的基本规范
  ],
  plugins: ['react', 'react-hooks', '@typescript-eslint'], // extends继承规则
  rules: {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    'react/no-array-index-key': 'warn',
    'react/no-danger': 'warn',
    'react/no-deprecated': 'warn',
    'react/no-direct-mutation-state': 'error',
    'react/no-find-dom-node': 'warn',
    'react/no-is-mounted': 'warn',
    'react/no-render-return-value': 'warn',
    'react/no-string-refs': 'warn',
    'react/no-unescaped-entities': 'warn',
    'react/no-unknown-property': 'warn',
    'react/prefer-es6-class': 'warn',
    'react/require-render-return': 'error',
    'react/sort-comp': 'warn',
    'react/state-in-constructor': ['warn', 'never'],
    'react/static-property-placement': ['warn', 'static public field'],
  },
};

eslint中也可以添加对代码格式的规范：

 "rules": {
         // 缩进规则
        "indent": ["error", 2],
         // 引号规则
        "quotes": ["error", "single"],
         // 分号规则
        "semi": ["error", "never"],
        // 空格规则
        "space-infix-ops": "error",
        // 限制每行代码的最长长度
        "max-len": ["error", { "code": 80 }],
        // 关键字（如 if、else、function 等）前后要有适当的空格
        "keyword-spacing": "error",
        // 对象字面量花括号内部的空格使用情况
        "object-curly-spacing": ["error", "always"],
        // 数组字面量方括号内部的空格使用
        "array-bracket-spacing": ["error", "naver"],
        
    }

eslint fix

2.手动fix

配置了这么多的规则，检测后发现不符合规范的代码总不能逐行修改吧？可以通过以下快捷指令对代码进行修复：

yarn eslint <文件名> --fix

若想要针对多个文件进行修复，可以在package.json配置scripts：

  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "fix": "eslint src/**/*.{ts,tsx} --fix", //对src目录下的文件进行修复
  },

执行指令即可修复eslint检测的部分报错，该指令主要修复的还是格式化等报错，如果是代码逻辑还是需要手动更改的，如ts中的一些类型定义：

yarn fix

2.保存自动fix

每次都需要手动执行是不是也不太方便，我们可以配置代码保存时自动fix，只需要在settings.json中添加保存fix 即可：

{
  "eslint.enable": true,  // 启用 ESLint 插件对代码的检查功能。
  "eslint.validate": [ // 指定 ESLint 应该对哪些类型的文件进行代码检查
    "javascript",
    "javascriptreact",
    "typescriptreact"
  ],
  "files.autoSave": "onFocusChange", // 焦点离开自动保存代码
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit" // 保存时执行eslint --fix
  }
}

git提交规范卡口

1.lint-staged配置

如果代码忘记手动保存格式化后进行git提交，那也会将不规范的代码提交上去，这时我们可以使用lint-staged对git暂存区的代码进行fix后再提交：

yarn add lint-staged --dev

在 package.json 文件里添加 lint - staged 字段，示例如下：

{
    "lint-staged": {
        "*.{js,jsx,ts,tsx}": [
            "eslint --fix",
            "git add"
        ]
    }
}

2.husky配置

需要手动执行 yarn lint-staged 以下指令才会对git暂存区的代码fix，因此我们需要借助husky，husky可以通过git hooks在代码commit阶段前进行代码规范的强制执行、自动化任务的执行，因此在pre - commit钩子中调用lint - staged：

// 安装
yarn add --dev husky

// 初始化
npx husky init

// pre-commit添加lint-staged
npx husky add .husky/pre-commit "npx lint-staged"
avatar
文章
阅读
粉丝