前端项目搭建部署全流程（三）：项目代码规范

一个爱编码的程序猿

于 2020-12-14 23:10:16 发布

阅读量528

点赞数

分类专栏：前端文章标签： javascript typescript reactjs

本文链接：https://blog.youkuaiyun.com/huhaiqing106/article/details/111188076

版权

本文详细介绍了如何在React项目中使用eslint进行代码规范，并结合Prettier实现代码格式化。从安装依赖、配置eslint、React特定配置，到集成Prettier与vscode设置，为前端项目打造一套完整的代码风格管理体系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前言

继上一篇文章基本已经搭建完一个简单的React项目的，这边文章主要是讲项目的代码规范

2.使用eslint规范代码

2.1.安装依赖

yarn add eslint @types/eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

eslint eslint核心代码

@types/eslinteslint的类型定义

@typescript-eslint/parsereslint解析器，用于解析typescript，从而检查和规范Typescript代码

@typescript-eslint/eslint-plugineslint插件，包含了各类定义好的检测Typescript代码的规范

2.2.eslint配置

在工程目录下新建.eslintrc.js文件，包含eslint的配置

/**
 * @type {import('eslint').Linter.BaseConfig}
 */

module.exports = {
   
	parser: '@typescript-eslint/parser', // 定义ESLint的解析器
	extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended'], // 定义文件继承的子规范
	plugins: ['@typescript-eslint'], // 定义该eslint文件所依赖的插件
	env: {
   
		// 指定代码的运行环境
		browser: true,
		node: true,