项目基建 React+Ts+Eslint+Prettier 代码规范格式化

站长

2024年03月22日 19:53 · 阅读数 4

每次新建项目都需要配置一些eslint+prettier规则，并且每次都是网上各种搜索、各种拼凑，不仅耗费时间也耗费精力，所以干脆自己记录一番，方便后面使用复习。

安装eslint

首先需要在项目安装eslint，因为当前的案例项目是使用的React项目所以也需要安装react项目关的eslint插件eslint-plugin-react-hooks 这个是给react 函数组件中的hooks一些规则，以及elint-plugin-react-refresh,这个是React的刷新机制有关，React refresh是在开发过程中实现模块热替换的工具。

pnpm i -D eslint eslint-plugin-react-hooks eslint-plugin-react-refresh

如果是使用的vite创建的react项目并且选择了eslint 默认会有安装。

配置parser

本身eslint的语法检测就是先对代码进行静态解析得到AST，然后再判断的过程。所以在eslint默认的解析器基础上，自然需要一些更高级的解析器来支持更新的语法和语言，eslint的默认解析器是Espress，它只支持对es5对js解析，所以我们如果项目中使用了ts，Espree就不行了，自然需要用到更高级的（支持更高级的版本）解析器@typescript-eslint/parser，同时对ts也需要另外的规则@typescript-eslint/eslint-plugin。

pnpm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

配置prettier

prettier的作用就是代码的格式化，可以理解为把代码解析之后再按照预期的规则进行重新打印，支持多种语言。

pnpm i -D prettier 安装之后，在工程目录下新建.prettierrc.cjs配置文件以及.prettierignore忽略文件，配置文件内容如下

module.exports = {
  printWidth: 100, //每行最多显示的字符数
  tabWidth: 2, // tab的宽度2个字符
  semi: true, // 结尾使用分号
  singleQuote: true, // 使用单引号代替双引号
  bracketSpacing: true, // 对象括号两边是否用空格隔开
  bracketSameLine: true, // 组件最后的尖括号不另起一行
};

这里就列举一些常用的规则，更多规则可以前往Prettier官网查阅

组合prettier+eslint

eslint和prettier都可以格式化文件，可能在一些配置中存在冲突所以我们需要安装对应的prettier 的plugin进行处理，最终以prettier的配置为主，需要安装

eslint-config-prettier（该包用于将prettier的规则与eslint的规则进行协调，确保二者可以协同进行不产生冲突）。
eslint-plugin-prettier（该插件允许将prettier作为eslint规则运行，它会在eslint中集成prettier，并在eslint运行时检测到prettier不符合的代码格式时，自动运行prettier进行代码的格式化）。

新建.eslintrc.cjs文件

添加上面的插件配置

module.exports = {
	root: true, // 指定这是根配置文件，用于定义javascript或者Typescript项目中的代码质量和风格的规则。
	env: { browser: true, es2020: true },// 指定代码的运行环境
	extends: [  // 这里是越靠后的插件配置优先级越高
		'eslint:recommended', // eslint默认规则
		'plugin:@typescript-eslint/recommended',// Typsscript推荐规范
		'plugin:react-hooks/recommended', // React Hooks推荐规范
		'plugin:prettier/recommended', // 集成Prettier插件规范
	],
	ignorePatterns: ['dist', '.eslintrc.cjs'], // 忽略文件
	parser: '@typescript-eslint/parser', // 指定的解析器
	plugins: ['react-refresh'], // 支持React的热刷新
	rules: {
		'prettier/prettier': 'error', // 违反prettier的规则，将产生一个错误
		'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], // 配置React热刷新的规则，允许常量到导出
	},
};

到此基本的配置就完成了。

配置vscode

进入到vscode到配置文件setting.json 进行如下配置

  "editor.formatOnSave": true, // 保存进行格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 使用prettier进行文档的格式化

配置完成之后回到页面进行编码格式化，如果没有格式化需要把vscode重启，或者快捷shift+command+p 在搜索栏输入 Reload Window进行重新加载。

创建.vscode文件夹

.vscode文件夹是编辑器的项目配置文件夹，用于存放项目特定的编辑器配置。这些配置会影响vscode在该项目中的行为，以确保开发者有一致的编辑器环境

ctrl + shift + p打开搜索栏搜索settings.json配置文件，项目内生成.vscode文件夹，在其下的settings.json中新增配置

  "editor.formatOnSave": true, // 保存进行格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 使用prettier进行文档的格式化

editorConfig 代码格式层面协作统一

上面的.vscode是专门统一vscode编译器的那么这个.editorConfig的配置是统一多种代码编辑器共享和遵循相同的代码风格规范，配置如下。

root = true

[*]
indent_style = tab # 空格缩进 space tab
indent_size = 2 # 缩进空格2
end_of_line = lf # 结尾换行符 lf cr crlf
chartset = utf-8 # 文件编码
spaces_around_operators = true # 运算符两边都有空格



[package.json]
indent_size = 2

到此eslint基本配置就完成了。