记录在TS项目中使用eslint规范代码时遇到的问题

2023-12-12 14:21:57 浏览数 (2)

报错内容：as语句无法识别，导致(window as any).hello这种语句报错 问题原因：eslint 在检测代码时，会先将代码转换为 AST 对象 而这个转换过程需要指定的解析器才能完成，eslint 默认使用的是babel解析器，而babel解析器里没有包含ts语法内容的解析器，所以，我们需要使用ts为eslint开发的解析器 解决方法：

  1. 确保安装了eslint以及ts eslint解析器 npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
  2. 修改eslint配置文件 .eslintrc.js 中的解析器的配置项，配置内容如下
代码语言：javascript复制
module.exports = {
  root: true,
  env: {
    browser: true,
    mocha: true,
    node: true,
    es6: true,
    commonjs: true
  },
  plugins: [
    '@typescript-eslint/eslint-plugin', // 加载插件，使其对代码进行处理
    'react',
    'import'
  ],
  parser: '@typescript-eslint/parser', // 指定AST解析器为ts的eslint解析器
  // ... 其他配置
}

在interface或者type类型声明中，函数生命中的参数类型表达式报 'xxx' is defined but never used.eslintno-unused-vars

报错内容：在interface或者type类型声明中，函数生命中的参数类型表达式报 'xxx' is defined but never used.eslintno-unused-vars 报错原因：eslint在执行 no-unused-vars 规则检测时，使用的是默认的检测规则，也就是 js 的变量检测规则 解决方法：禁用默认的no-unused-vars改为 @typescript-eslint/no-unused-vars 这个规则会排除interface或者type类型声明中的无函数体函数的检测，更改后的rules内容

代码语言：javascript复制
rules: {
    'react/jsx-filename-extension': [
      'error',
      { extensions: ['.js', '.jsx', '.ts', '.tsx'] }
    ],
    // ... 其他配置
    'eol-last': 2, // 文件以单一的换行符结束
    // 'no-unused-vars': [1, { vars: 'all', args: 'after-used' }], // 不能有声明后未被使用的变量或参数
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error'],
    // ... 其他配置
}
eslint 变量 函数 开发 配置

0 人点赞