VsCode 使用Prettier格式化代码_vscode prettier

项目背景

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。