跳到主要内容

前端格式化项目

1. eslint+prettier​

一、安装​

# 安装eslint
bun i -D eslint @typescript-eslint/eslint-plugin eslint-plugin-import @typescript-eslint/parser

# 安装全局prettier
bun i -g prettier

# 使用prettier手动格式化
prettier --write .

vscode插件：eslint+prettier 设置开启 save时format 并且格式选择prettier

二、配置​

1. eslint配置 .eslintrc.cjs​

module.exports = {
  root: true,
  env: { browser: true, es2020: true, node: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
    'eslint-config-prettier',
  ],
  // ... 更多规则配置
}

2. prettier配置​

// .prettierrc
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": false
}

2. eslint + @antfu/eslint-config​

一、安装​

bun i -D eslint @typescript-eslint/eslint-plugin eslint-plugin-import @typescript-eslint/parser
bun i -D eslint-plugin-format
bun i -D @antfu/eslint-config

二、配置​

// eslint.config.mjs
import antfu from '@antfu/eslint-config'

export default antfu({
  ignores: ['node_modules', 'dist'],
  rules: {
    'no-console': 'warn',
  },
})

3.Lint Staged（提交前自动格式化）​

{
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
  },
  "lint-staged": {
    "*": "eslint --fix"
  }
}
npm i -D lint-staged simple-git-hooks
npx simple-git-hooks