# typescript & eslint
对于 Typescript 项目的编码规范而言,主要有两种选择 ESLint 和 TSLint。ESLint 不仅能规范 JS代码,通过配置解析器,也能规范 TS代码。此外由于性能问题,TypeScript 官方决定全面采用 ESLint,甚至把仓库作为测试平台,而 ESLint 的 TypeScript 解析器也成为独立项目,专注解决双方兼容性问题。
本文主要介绍以下内容
- 用 ESLint 来规范 Typescript 代码
- 用 ESLint 来规范 React 代码
- 在 Webpack 中配置 ESLint
大部分内容来源于 在Typescript项目中,如何优雅的使用ESLint
# 用 ESLint 来规范 Typescript 代码
第一步:安装相关依赖包
$ yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
TIP
- eslint: ESLint核心代码
- @typescript-eslint/parser:ESLint 的解析器,用于解析 TypesSript,从而检查和规范 TypeScript 代码
- @typescript-eslint/eslint-plugin:这是一个 ESLint 插件,包含了各类定义好的检测 TypeScript 代码的规范
第二步:修改 .eslintrc.js 文件
在项目根目录下创建 eslint
配置文件,这里介绍 .eslintrc.js
文件配置。
module.exports = {
parser: '@typescript-eslint/parser', // 定义 ESLint 的解析器
extends: ['plugin:@typescript-eslint/recommended'], // 定义文件继承的子规范
plugins: ['@typescript-eslint'], // 定义所依赖的插件
env: { // 指定代码的运行环境
browser: true,
node: true
}
}
TIP
- 在 TS项目中必须执行解析器为
@typescript-eslint/parser
,才能正确的检测和规范 TS代码 - env 环境变量配置,如
console
属性只有在 browser 环境下才会存在,如果没有设置支持 browser,那么可能报 console is undefined 的错误。
# 用 ESLint 来规范 React 代码
如果你的项目为 React + TypeScript 的,可以按照以下步骤来配置 eslint
。
第一步:安装相关依赖包
$ yarn add -D eslint-plugin-react
第二步:修改 .eslintrc.js 文件
module.exports = {
parser: '@typescript-eslint/parser',
extends: [ // 使用推荐的 React 代码检测规范
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended'
],
plugins: ['@typescript-eslint'],
env: {
browser: true,
node: true
},
settings: { // 自动发现 React 版本,从而进行规范 React代码
react: {
pragma: 'React',
version: 'detect'
}
},
parserOptions: { // 指定 ESLint 可以解析 JSX语法
ecmaVersion: 2019,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
rules: {
'semi': 0,
'eol-last': 0
}
}
# 在 Webpack 中配置 ESLint
通常前端开发项目时,会使用 webpack 来构建。在开发过程中我们想要实时监控到书写的代码是否符合 ESLint 配置的规范时。我们就需要进行一些相关配置。
示例为 React + TypeScript,webpack@4.39.3、eslint@6.7.2
第一步:安装相关依赖包
$ yarn add -D eslint eslint-config-standard eslint-friendly-formatter eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
第二步:修改 webpack 配置
// webpack.config.js
rules: [
{
test: /\.(ts|tsx)$/,
use: [{
loader: 'ts-loader'
}, {
loader: 'eslint-loader',
options: {
formatter: require('eslint-friendly-formatter'), // 消息提示格式化
emitWarning: !config.dev.showEslintErrorsInOverlay // false
}
}],
include: [resolve('src')], // resolve is root path
exclude: /node_modules/
}
]
第三步:修改 .eslintrc.js 文件
- 注意:下面的配置示例并不兼容 TypeScript,可以结合上面 用 ESLint 来规范 React 代码 中 ESLint配置进行整理后再使用。
module.exports = {
root: true, // 默认情况下,ESLint 会在所有父级组件中寻找配置文件,一直到根目录。ESLint一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找.
parser: 'babel-eslint', // 对Babel解析器的包装使其与 ESLint 兼容.
parserOptions: {
sourceType: 'module' // 代码是 ECMAScript 模块
},
env: { // 预定义的全局变量
browser: true, // 浏览器环境
node: true // node 环境
},
extends: [
'standard' // 扩展一个流行的风格指南,即 eslint-config-standard
],
plugins: [
'standard' // standard 风格依赖包
],
rules: []
}
若使用 dev-server
可以将 quiet
属性设置为 false. 可在终端提示相关错误信息。同时也可以安装并使用 friendly-errors-webpack-plugin
插件进一步优化。
更多相关配置请查询typescript-eslint rules