eslint、prettier

以 react19 项目为例

安装模块

prettier

1. vscode 安装 Prettier 插件
2. 项目根目录新建 .prettierrc.js

module.exports = {
    endOfLine: "lf", // 行结束符使用 Unix 格式
    semi: false,
    singleQuote: true,
    tabWidth: 2,
    useTabs: false,
    trailingComma: "none"
}

3. package.json 添加 script:

"format": " prettier --write \"src/**/*.+(js|jsx|ts|tsx)\""

执行命令 npm run format 自动修复

eslint

1. vscode 安装 ESLint 插件
2. 项目根目录新建 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {}
}

3. package.json 添加 script:

"lint": "eslint --fix \"src/**/*.+(js|jsx|ts|tsx)\""

执行命令 npm run lint 自动修复

4. 根目录新建 .vscode/settings:

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

代码保存时，就会通过 eslint 和 prettier 自动格式化代码