ESLint检查TypeScript

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、创建项目

安装ts

yarn add typescript --dev

生成ts配置文件

yarn tsc --init

安装ESLint

yarn add eslint --dev

生成ESLint配置文件

yarn eslint --init

生成配置文件的回答问题中，关于TypeScript的需要回答 yes，这样才会去安装ESLint检测typescript的插件。

此时生成的ESLint配置文件与之前有些不一样

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: [
    'standard'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 11
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  }
}

多了一个parser配置， 这是用来配置语法解析器。

这里需要配置语法解析器的原因是TypeScript相比于普通的JavaScript代码来说，会有很多特殊的语法，所以我们需要给它指定一个语法解析器。

此时我们就可以在ts文件中写一些ts代码，再通过eslint检测了。

例：

// index.ts
function foo (ms: string): void {
  console.log(ms)
}

foo('哈哈哈')

yarn eslint ./index.ts

检测出了一些代码风格问题。同样可以通过 --fix自动处理风格问题。

yarn eslint ./index.ts --fix

以上就是关于ESLint检测TypeScript的基础内容。