typescript+eslint

前端就是个大型包装车间，各种新的语言和库层出不穷，而各大厂家的面试官们，大都走在最前沿，所以我们要不停的学习！作为一个常年工作在后台管理系统的老菜鸟，工作形式大同小异。于是在实现形式上从直接用脚手架，到自己搭建脚手架；从类组件和函数组件（React Hook）；从jsx到tsx。而在其中万变不离其踪的就是-Eslint。

1. JSX项目中使用eslint

请参考：eslint 基础用法

2. 在create-react-app创建的TSX项目中使用eslint

详情请参考：eslint+prettier

• 生成项目npx create-react-app eslint-react-intro --typescrip

• 安装eslint解析typescript的依赖（create-react-app默认安装）

  yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

• 在项目根目录下添加配置文件.eslintrc

其中rules中添加自定义的规则

{ 
   "parser": "@typescript-eslint/parser", 
   "extends": [
        "react-app", 
        "plugin:jsx-a11y/recommended",
        "plugin:@typescript-eslint/recommended"
    ],  
    "plugins": [
        "@typescript-eslint", 
        "react"
    ],  
    "rules": {     
        "no-unused-vars": "off",    
        "semi": ["error", "always"],    
        "quotes": ["error", "double"],    
        "jsx-a11y/click-events-have-key-events": "off",    
        "jsx-a11y/anchor-is-valid": "off"  
    }
}

• 在vsCode中添加配置内容使其可以解析ts文件

1. 首先安装eslint

2. 打开Code->preferences->Settings->搜索eslint->找到setting.json

3.添加配置项

    "eslint.validate": [      
        "javascript",      
        "javascriptreact",      
        {        
            "language": "typescript",        
            "autoFix": true      
        },      
        {        
            "language": "typescriptreact",        
            "autoFix": true      
        }    
    ],