Prettier与ESLint：代码风格与质量的自动化保证

原创

天涯学馆

发布于 2024-06-15 23:54:24

310

发布于 2024-06-15 23:54:24

文章被收录于专栏：Web大前端Web大前端

Prettier 和 ESLint 是两个互补的工具，它们共同确保代码的风格一致性和质量。Prettier 负责格式化代码，而 ESLint 则执行更复杂的静态分析和规则检查。

Prettier

作用：

自动化代码格式化，确保代码的缩进、括号、引号、换行等样式一致。

不需要配置太多的规则，因为Prettier有一套默认的代码风格。

支持多种编程语言，包括JavaScript、TypeScript、CSS、HTML等。

可以与ESLint集成，避免两者规则冲突。

使用示例：在项目根目录下创建 .prettierrc 或 .prettierrc.json 文件来配置Prettier，例如：

{
  "printWidth": 80, // 行宽
  "tabWidth": 2, // Tab宽度
  "useTabs": false, // 是否使用制表符
  "semi": true, // 是否使用分号
  "singleQuote": true, // 使用单引号
  "trailingComma": "all", // 尾随逗号
  "bracketSpacing": true, // 对象花括号之间是否有空格
  "jsxBracketSameLine": false // JSX标签闭合花括号是否在同一行
}

然后在项目中安装Prettier：

npm install --save-dev prettier

并在.gitignore文件中排除Prettier生成的临时文件。

ESLint

####　作用：

静态代码分析，检测潜在的错误、代码异味和不推荐的编程习惯。
提供丰富的自定义规则，可以检查代码风格、变量使用、代码复杂度等。
可以与Prettier集成，先格式化再检查，避免格式问题干扰实际的错误检测。

使用示例：创建 .eslintrc.js 或 .eslintrc.yaml 配置文件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb-base',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: [
    '@typescript-eslint',
    'react',
  ],
  rules: {
    'no-console': 'off', // 关闭禁止console.log的规则
    'import/no-unresolved': 'error', // 报告未解析的导入
  },
};

安装ESLint及其相关的插件：

npm install --save-dev eslint eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

在项目中使用npx eslint或配置IDE（如VSCode）的ESLint插件来进行实时检查。

集成与自动化

通过eslint-plugin-prettier和eslint-config-prettier，可以在ESLint中集成Prettier：

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

然后在.eslintrc.js中添加以下内容：

module.exports = {
  // ...
  plugins: ['prettier'],
  extends: ['plugin:prettier/recommended'], // 使用Prettier的ESLint规则
  rules: {
    'prettier/prettier': 'error', // 把Prettier的规则设为错误级别
    // ...其他规则
  },
};

现在，当运行eslint --fix时，ESLint会先应用Prettier的格式化，然后再执行自己的检查。

样例配置文件

.prettierrc (Prettier配置)

{
  "semi": true,
  "trailingComma": "none",
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true,
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf"
}
1.2 .eslintrc.js (ESLint配置)
javascript
module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'airbnb-base',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'no-unused-vars': 'warn',
    'no-console': 'warn',
  },
};

集成到构建流程

使用husky和lint-staged进行提交前的检查

安装依赖：

npm install --save-dev husky lint-staged

在package.json中添加如下配置：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.ts?(x)": ["prettier --write", "eslint --fix"],
  "*.js?(x)": ["prettier --write", "eslint --fix"],
  "*.html": ["prettier --write"],
  "*.css": ["prettier --write"]
}

这样，在每次提交前，lint-staged会自动运行Prettier和ESLint，格式化和修复代码。

配置IDE

在Visual Studio Code、WebStorm或其他支持ESLint和Prettier的IDE中，安装对应的插件并配置自动格式化和检查。

自定义规则

ESLint的灵活性允许你创建自定义规则以满足特定项目需求。在.eslintrc.js中添加自定义规则：

rules: {
  'your-custom-rule': 'error',
  // ...
}

创建一个lib或rules目录，然后在其中定义你的自定义规则模块。

常见问题与解决方案

冲突处理

有时，Prettier和ESLint的规则可能会冲突。在这种情况下，通常优先遵循Prettier的规则，因为它专注于代码格式。如果你需要特定的ESLint规则，可以在.eslintrc.js中禁用Prettier的对应规则：

rules: {
  'prettier/prettier': ['error', { singleQuote: false }] // 禁用Prettier的单引号规则
}

性能优化

如果ESLint运行缓慢，可以考虑以下优化：

仅在必要时运行：例如，只在修改了相关文件后运行。

使用--cache选项：ESLint将缓存已检查的文件，以加快后续运行速度。

使用.eslintignore文件：排除不需要检查的文件和目录。

使用ESLint的插件和共享配置

插件

@typescript-eslint：为TypeScript提供额外的规则和错误修复。

eslint-plugin-import：检查导入顺序和导出规范。

eslint-plugin-react：针对React组件的特定规则。

eslint-plugin-react-hooks：检查React Hooks的使用。

eslint-plugin-prettier：使ESLint与Prettier协同工作，防止冲突。

安装这些插件：

npm install --save-dev eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin

共享配置

eslint-config-airbnb：Airbnb的编码风格指南。
eslint-config-prettier：禁用与Prettier冲突的ESLint规则。

在.eslintrc.js中使用共享配置：

module.exports = {
  extends: [
    'airbnb',
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  // ...
};

定制共享配置

根据项目需求，可以自定义共享配置，例如：

module.exports = {
  extends: [
    'airbnb',
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    'import/prefer-default-export': 'off', // 关闭非默认导出的警告
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 关闭类型声明的警告
    // 添加或修改其他规则
  },
};

高级用法

配置环境

在.eslintrc.js中设置环境变量，以便启用特定环境下的规则：

env: {
  browser: true,
  es6: true,
  node: true,
  jest: true,
}

使用ESLint的overrides字段

overrides允许你为特定类型的文件或目录指定不同的规则。例如，为.test.js文件添加独立的规则：

module.exports = {
  overrides: [
    {
      files: ['**/*.test.js'],
      rules: {
        'no-unused-expressions': 'off', // 在测试文件中关闭表达式不使用警告
      },
    },
  ],
  // ...
};

部署到持续集成(CI)

将ESLint和Prettier集成到持续集成流程中，确保所有提交的代码都符合标准。例如，在GitHub Actions中配置：

name: Lint and Format

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@v2
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'
    - name: Install dependencies
      run: npm ci
    - name: Lint and format
      run: npm run lint

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

eslint