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

fastmock

发布于 2023-12-12 14:21:57

3290

发布于 2023-12-12 14:21:57

文章被收录于专栏：fastmockfastmock

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

确保安装了eslint以及ts eslint解析器 npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
修改eslint配置文件 .eslintrc.js 中的解析器的配置项，配置内容如下

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内容

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'],
    // ... 其他配置
}

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023年12月11日，如有侵权请联系 cloudcommunity@tencent.com 删除

eslint