项目背景
Vite + TypeScript + React
-
使用vscode插件(保存自动触发格式化)
1.安装插件:
2.配置编辑器:根据你使用的编辑器,安装对应的 Prettier 插件,并配置编辑器以自动格式化代码。例如,对于 Visual Studio Code,可以安装 Prettier 插件并在设置中开启 "Format On Save" 选项。
3.打开settings,在Text Editor(格式化)找到 Edit in settings.json按钮
4.添加三个配置,就可以通过vscode保存文件自动自动格式化:
{
"editor.formatOnSave": true, // 开启保存文件自动格式化代码
"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具
"prettier.requireConfig": true, // 需要Prettier的配置文件
}
-
使用包依赖实现格式化
1.安装 Prettier 和 ESLint:
npm install -D prettier eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin
或者
yarn add -D prettier eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin
2.创建 ESLint 配置文件:在项目根目录创建一个 .eslintrc.js
文件,并添加以下配置:
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'react', 'react-hooks'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended'
],
rules: {
// 自定义规则
}
};
3.配置 Prettier:在项目根目录创建一个 .prettierrc
文件,并添加 Prettier 的配置,例如:
{
"singleQuote": true,
"semi": false,
"tabWidth": 2,
"trailingComma": "none"
}
4.运行格式化:你可以手动运行格式化命令来格式化你的代码。你可以将格式化命令添加到 npm scripts 中,例如:
"scripts": {
"format": "prettier --write ."
}
然后运行 npm run format
或者 yarn format
。