TypeScript项目ESLint与Prettier配置及工作流实战
本文详解如何在TypeScript项目中配置ESLint与Prettier以统一代码风格。涵盖从基础依赖安装、解析器配置，到结合React项目的扩展规则，以及VSCode自动修复设置。此外，介绍利用Husky和lint-staged构建本地提交前检查，并通过GitLab CI/CD实现分支强制规范检测的完整工作流。
正文
在TypeScript项目的编码规范实践中，主要存在两种工具选择：ESLint和TSLint。ESLint不仅适用于JavaScript代码规范，通过配置相应的解析器，同样能够有效规范TypeScript代码。鉴于性能考量，TypeScript官方已决定全面转向采用ESLint，并将其仓库作为测试平台。与此同时，ESLint的TypeScript解析器也已成为独立项目，专门致力于解决两者的兼容性问题。
近期，我在项目中全面使用ESLint替代了TSLint，并针对实施过程中遇到的问题进行了记录与总结。
- 使用ESLint规范TypeScript代码
- 使用ESLint规范React代码
- 结合Prettier与ESLint进行代码规范
- 在VSCode中集成ESLint
- 利用Husky和lint-staged构建代码工作流
- 通过GitLab CI/CD实施代码规范
原文发布于我的博客：https://github.com/forthealll...
欢迎Star和收藏
一、使用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的基础配置。一个最简配置示例如下：
module.exports = {
parser: '@typescript-eslint/parser', //定义ESLint的解析器
extends: ['plugin:@typescript-eslint/recommended'],//定义文件继承的子规范
plugins: ['@typescript-eslint'],//定义了该eslint文件所依赖的插件
env:{ //指定代码的运行环境
browser: true,
node: true,
}
}- 在TypeScript项目中，必须指定解析器为@typescript-eslint/parser，才能正确检测并规范TypeScript代码。
- env环境变量配置用于指定代码运行环境。例如，console属性仅在browser环境下存在，若未设置支持browser环境，可能会报错console is undefined。
二、使用ESLint规范React代码
如果在TypeScript项目中同时使用了React，为了检测并规范React代码的书写，必须安装插件eslint-plugin-react，并增加相应配置：
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'plugin:react/recommended'
'plugin:@typescript-eslint/recommended'
], //使用推荐的React代码检测规范
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: {
}
}在Rules配置中，可以自定义针对React代码的编码规范。
三、结合Prettier与ESLint进行代码规范
Prettier意为“漂亮的”，是一款流行的代码格式化工具。接下来介绍如何将其与ESLint结合使用。首先需安装三个依赖：
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文件：
module.exports = {
"printWidth": 120,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": false,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"insertPragma": true,
"tabWidth": 4,
"useTabs": false
};接着，修改.eslintrc.js文件以引入Prettier：
module.exports = {
parser: '@typescript-eslint/parser',
extends:[
'prettier/@typescript-eslint',
'plugin:prettier/recommended'
],
settings: {
"react": {
"pragma": "React",
"version": "detect"
}
},
parserOptions: {
"ecmaVersion": 2019,
"sourceType": 'module',
"ecmaFeatures":{
jsx:true
}
},
env:{
browser: true,
node: true,
}上述新增的extends配置中：
- prettier/@typescript-eslint：使得@typescript-eslint中的样式规范失效，遵循Prettier中的样式规范。
- plugin:prettier/recommended：使用Prettier中的样式规范，且若ESLint检测到Prettier的格式问题，同样将其以error形式抛出。
四、在VSCode中集成ESLint配置
为方便开发，我们可以在VSCode中集成ESLint配置，使得代码在保存或变动时自动执行ESLint的fix过程。
首先安装VSCode的ESLint插件，安装完毕后，在settings.json文件中修改其配置如下：
{
"eslint.enable": true, //是否开启vscode的eslint
"eslint.autoFixOnSave": true, //是否在保存的时候自动fix eslint
"eslint.options": { //指定vscode的eslint所处理的文件的后缀
"extensions": [
".js",
".vue",
".ts",
".tsx"
]
},
"eslint.validate": [ //确定校验准则
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
]
}主要注意以下两点：
- eslint.options中可通过configFile属性指定eslint规范的绝对路径，默认会向上查找并在根路径中指定。
- eslint.validate中必须通过{ language: XXX}的形式来指定typescript和typescriptreact。
五、利用Husky和lint-staged构建代码工作流
首先来看Husky，Husky能够帮助阻挡不良代码的提交和推送。首先我们在package.json中定义如下script：
"scripts": {
"lint": "eslint src --fix --ext .ts,.tsx "
}接着在package.json中定义Husky的配置：
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
},我们在git的hook阶段执行相应命令，例如上述例子是在pre-commit这个hook（即提交之前）进行lint检测。
接着来看lint-staged，上述我们通过Husky的pre-commit hook执行npm命令来做lint校验。除了定义npm lint命令外，也可以直接使用lint-staged，在提交前检测代码规范。
使用lint-staged规范代码的方式如下，我们修改package.json文件为：
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{.ts,.tsx}": [
"eslint",
"git add"
]
}
}同样，在git commit时会执行lint检测。
六、通过GitLab CI/CD实施代码规范
仅通过git hook执行代码规范检测存在一个问题：我们可以在git commit时通过--no-verify来跳过代码规范检测。但在某些情况下，对于某个重要分支，该分支上的代码必须完整通过代码规范检测，此时可以使用GitLab的CI/CD。
同样在package.json中增加一个lint的npm命令：
"scripts": {
"lint": "eslint src --fix --ext .ts,.tsx "
}然后在根目录增加.gitlab-ci.yml文件，该文件中的配置为：
stages:
- lint
before_script:
- git fetch --all
- npm install
lint:
stage: lint
script:
- npm run lint
only
- 特定分支1
- 特定分支2随后配置相应的GitLab Runner，此处不具体详述。最终结果是，在我们指定的分支上的提交或merge都会进行所配置的命令检测。这样保证了特定分支不受git commit跳过操作--no-verify的影响。
以上就是TypeScript编码规范ESLint和Prettier使用示例详解的详细内容，更多关于TypeScript使用ESLint Prettier的资料请关注本站其它相关文章！
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗？let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解：基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
