前端进阶6-ESLint + Prettier - 在Typescript项目中，如何优雅的使用ESLint和Prettier

在Typescript项目中，如何优雅的使用ESLint和Prettier

• 一、用ESLint来规范Typescript代码

  • npm i -d eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

  • 这三个依赖分别是：

    • eslint: ESLint的核心代码
    • @typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
    • @typescript-eslint/eslint-plugin：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
  • 安装完成后，新建.eslintrc.js文件，配置文件

• 二、用ESLint来规范React代码

• 三、结合Prettier和ESLint来规范代码

  • 安装prettier

    • npm i -g prettier eslint-config-prettier eslint-plugin-prettier

      • prettier：prettier插件的核心代码
      • eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效
      • eslint-plugin-prettier：将prettier作为ESLint规范来使用
  • 创建.prettierrc.js文件，配置文件

  • 接着修改.eslintrc.js文件，引入prettier：

    • extends: 'prettier/@typescript-eslint'