简短说下为什么我们需要eslint？？
主要的目的是编译期（编码过程）中提醒我们语法有问题，如果你学了TypeScript配合Eslint我就觉得这功能特别优秀，就好像用idea工具开发Java一样有智能提示。
- React + eslint
- React + Ts + eslint
React中添加eslint
- 在项目中安装（配置根据自己需求）
npm init @eslint/config
- 安装完毕后我们根目录会多出一个.eslintrc.js文件，我们为他添加几条基础的eslint规则
rules: {
semi: [2, 'never'], // 末尾不能带结束符号
quotes: [2, 'single'] //所有引用均使用单引号
‘jsx-quotes’: [2, 'prefer-single'] //jsx文件均使用单引号
'comma-dangle': [2, 'never'] //对象最后一个属性不需要逗号
'react/jsx-uses-react': 'off' //关闭默认文件需要导入react
'react/react-in-jsx-scope': 'off',//关闭默认文件需要导入react
'react/jsx-filename-extension': [1, {extensions:['.js','.jsx']} //允许使用js或者jsx解释jsx语法
}
React+TypeScript中添加eslint
创建ts项目
npx create-react-app --template typescript
添加eslint
npm init @eslint/config
选择配置eslint
运行项目我们会发现项目提示报错：Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requireds parserServices to be generated.****等这句话大概就是你需要在规则中添加一个转换器服务。
// .eslintrc.js
我们在parserOptions中添加两个配置去解决这个问题
extends: [
...
'plugin:react/jsx-runtime' //react17后新的转换器，引入React不再是默认
]
parserOptions: {
...
project: 'tsconfig.json',
tsconfigRootDir: __dirname
}
到此我们的配置就完毕了，我们引入TS他默认继承一个standard-with-typescript
可以省去我们本来需要的一些基础rule规则，然后这足以让我们开发程序得到一个很好的编译期功能。
