搭建环境 react + ts + sass + antd + eslint
使用npx创建项目
npx create-react-app eslint-react-intro --typescript
配置sass
yarn add node-sass sass-loader@7.3.1 --dev
有时因为 node-sass 被墙了,安装不上,可以用 cnpm
全局安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
再用cnpm安装 node-sass
cnpm node-sass
//webpack.config.js,在file-loader之前加
{
test: [/\.scss$/],
loaders: ["style-loader", "css-loader", "sass-loader"]
},
安装 ESLint 解析 TypeScript 的依赖
eslint 是 JavaScript 代码检测工具,使用 espress 解析器:
@typescript-eslint/parser: 将 TypeScript 转换为 ESTree,使 eslint 可以识别
@typescript-eslint/eslint-plugin: 只是一个可以打开或关闭的规则列表;
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
自定义配置,添加配置文件 .eslintrc.js
module.exports = {
parser: {}, // 解析器
extends: [], // 继承的规则 [扩展]
plugins: [], // 插件
rules: {} // 规则
};
plugin 与 extend 的区别:
extend 提供的是 eslint 现有规则的一系列预设
而 plugin 则提供了除预设之外的自定义规则,当你在 eslint 的规则里找不到合适的的时候就可以借用插件来实现了
为了使配置能够正常运行,我们需要配置 解析器、插件、规则集等。
1.告诉ESLint 怎样正确解析 TypeScript 代码,并且使用了一组推荐的插件规则
module.exports = {
parser: “@typescript-eslint/parser”,
extends: [“plugin:@typescript-eslint/recommended”],
plugins: ["@typescript-eslint"],
rules: {}
};
2.将为 React 添加基本规则, 由 Create React App 团队提供
module.exports = {
parser: “@typescript-eslint/parser”,
extends: [“plugin:@typescript-eslint/recommended”, “react-app”],
plugins: ["@typescript-eslint", “react”],
rules: {}
};
安装 prettier 依赖
我们对 TypeScript 和 React 进行了 规范(linting),此时需要选择一种代码格式化程序。Prettier 将是首选工具,因为它在检测和修复样式错误方面做的很出色,并且和ESLint有很好的集成。
安装 prettier 依赖
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
- prettier: 格式化规则程序
- eslint-config-prettier: 将禁用任何可能干扰现有 prettier 规则的 linting 规则
- eslint-plugin-prettier: 将作为ESlint 的一部分运行 Prettier分析
module.exports = {
parser: ‘@typescript-eslint/parser’,
extends: [
‘plugin:@typescript-eslint/recommended’,
‘react-app’,
‘plugin:prettier/recommended’,
],
plugins: [’@typescript-eslint’, ‘react’],
rules: {},
};
Visual Studio Code 集成 ESLint 与 Prettier
最后,虽然默认配置(setting.json)已经很好,但默认只检测.js和 *.jsx文件,我们还需要配置typescripe,同时我们也希望有自动修复功能(有些是不可能自动修复)
user settings 与 workspace settings:user settings 里面是更通用的设置,workspace settings 是跟随项目存在,可以做到团队统一。
“eslint.validate”: [
“javascript”,
“javascriptreact”,
{
“language”: “typescript”,
“autoFix”: true
},
{
“language”: “typescriptreact”,
“autoFix”: true
}
]