vit项目配置eslint，prettier

1.配置eslint

现在的vite项目默认都已经自带eslint配置

比如我用vite创建了一个react项目，默认自带eslint配置：

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [
      js.configs.recommended,
      ...tseslint.configs.recommended,
    ],

    files: ['**/*.{ts,tsx}'],
    
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      
      // 下面两项是我自己加的
      'no-console': 'error',
      'no-alert': 'error',
    },
  },
)

下面进行prettier的配置。。

2.配置prettier

安装prettier和相关插件

pnpm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

• prettier: Prettier 核心。

• eslint-config-prettier: 关闭 ESLint 中与 Prettier 冲突的规则。

• eslint-plugin-prettier: 将 Prettier 的格式化规则嵌入 ESLint。

然后在eslint.config.js中引入上面的插件：

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

import prettier from 'eslint-plugin-prettier' // 引入 Prettier 插件
import prettierConfig from 'eslint-config-prettier' // 引入 Prettier 配置

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [
      js.configs.recommended,
      ...tseslint.configs.recommended,
      prettierConfig, // 放在最后，确保覆盖 ESLint 的冲突规则
    ],

    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier, // 添加 Prettier 插件
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'no-console': 'error',
      'no-alert': 'error',
      
      'prettier/prettier': 'error', // 将 Prettier 格式化问题作为 ESLint 错误
    },
  },
)

创建配置文件

我这里按官方的文档操作：

1. 创建一个prettierrc文件（有的项目用prettierrc，有的用prettierrc.json，好像两个都行😁）

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

2. 创建prettier忽略文件

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

prettierrc中写规则

你根据自己的需求写规则：

{
    // 箭头函数参数是否需要括号，"avoid" 表示尽量避免
    "arrowParens": "avoid", 

    // 对象字面量的大括号内是否加空格，如 { foo: bar } vs {foo: bar}
    "bracketSpacing": true, 

    // 换行符类型，"lf" 表示使用 Unix 风格的换行符 (\n)
    "endOfLine": "lf", 

    // Markdown 等散文内容的换行方式，"preserve" 表示保持原文换行
    "proseWrap": "preserve", 

    // 是否在语句末尾添加分号，false 表示不加
    "semi": false, 

    // 字符串使用单引号 (') 而不是双引号 (")
    "singleQuote": true, 

    // 缩进宽度为 2 个空格
    "tabWidth": 2, 

    // 尾随逗号的使用范围，"es5" 表示在 ES5 支持的地方加逗号
    "trailingComma": "es5", 

    // 单行最大字符长度，超过则换行
    "printWidth": 100, 

    // 是否使用 Tab 缩进，false 表示用空格
    "useTabs": false 
}

3.package.json中增加命令

增加下面两条命令：

  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint --fix .",  // eslint修复命令
    "preview": "vite preview",  
    "format": "prettier --write \"src/**/*.+(js|ts|jsx|tsx)\""  // pretttier修复命令
  },

在控制台测试这两个命令：

eslint修复：

pnpm lint

prettier修复：

pnpm format

4.vscode按ctrl + s自动格式化代码

先在项目根目录创建.vscode文件，然后在该目录下创建settins.json文件：

在settings.json中增加下面代码：

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "always"
    }
}

然后按ctrl + s进行测试，

如果不能自动格式化，重启一下vscode