1.2 ESLint配置与Prettier配置

一、ESLint配置

1. 用处：ESLint是代码规范插件

2. 脚手架内置安装了ESLint插件

3. 运行：npm run lint

4. 可以在.eslintrc文件中自定义一些校验规则，具体位置在rules中

5. 自动校验：

   1. 安装插件：npm i vite-plugin-eslint

   2. 打开vite.config.js配置文件

   3. 添加配置：

      import { defineConfig } from 'vite'
      import react from '@vitejs/plugin-react-swc'
      // 添加的
      import eslintPlugin from 'vite-plugin-eslint'
      
      // https://vitejs.dev/config/
      export default defineConfig({
        plugins: [
          react(),
          // 添加的
          eslintPlugin({
            include: ['src/*.jsx', 'src/**/*.jsx']
          })
        ],
      })
      

二、Prettier配置

1. 用处：Prettier是代码格式化插件

2. 在VSCode中下载插件：Prettier - Code formatter

3. 点击插件的齿轮，进入扩展配置

4. 选择使用单引号而不是双引号(两处)

5. 取消在左右代码末尾添加分号

6. 实现保存自动格式化：进入VSCode的首选项-设置，找到并勾选Editor:Format On Save

7. 保证所有人都按照格式化操作：编写.prettierrc配置文件