适用于 React 应用的 ESlint 和 Prettier（附赠 Next.js 和 TypeScript）

2025-05-24

适用于 React 应用的 ESlint 和 Prettier（附赠 Next.js 和 TypeScript）

如果您能在程序运行之前就发现并修复错误，那该有多好！如果您能在整个项目中编写具有相同语法并遵循相同准则的代码，那该有多好！如果您的整个开发团队都能轻松执行所有这些操作，那该有多好！听起来很神奇吧？ESlint 和 Prettier 这两个强大的工具实现了这一切。了解如何将这些工具添加到您的 JavaScript 或 TypeScript 项目中，以提高代码质量和一致性。

本文将重点介绍 ReactJS，并深入研究使用 TypeScript 的 NextJS，但这些工具通常适用于 JavaScript 或 TypeScript 代码库，并且可以配置为在任何 JavaScript 项目上运行，使用 Prettier，您甚至可以针对其他语言（如 HTML、CSS、SCSS/SASS、Markdown、JSON、YAML、GraphQL、styled-components 等）进行自动格式化！

笔记

Eslint 和 Prettier 是两个独立的工具，它们可以彼此独立运行，但我们将利用一些非常有用的 ESlint 插件将它们结合起来，以最少的配置获得最大的效果。

ESlint

首先我来谈谈 ESlint。它是一个静态代码分析器，这意味着它可以告诉你开发过程中可能犯的错误。

这些错误可能是这样的：

  • 简单的语法错误，例如没有用关闭函数声明}。
  • 死代码检测，例如未使用的变量、return语句后写的代码。
  • 违反代码指南，这些是由您自己定义的规则或预定义标准的组合，例如 Airbnb 风格指南或 Google 风格指南等。

Prettier

Prettier 是一款代码格式化工具，它只关注代码的美观。您想确保整个项目的缩进一致吗？
您想确保项目中没有分号吗？您想让您的 Promise 代码链看起来完全一致且可读吗？Prettier 可以在整个项目中启用，这样您的团队就不必再为格式化样式争论不休，只需将所有问题交给 Prettier 即可。

入门

确保您已npm安装Node.js。

让我们安装 ESlint 的 devDependencies -

npm i -D eslint \                       # Eslint itself
         prettier \                     # Prettier itself
         eslint-plugin-react \          # Eslint plugin for react
         eslint-plugin-react-hooks \    # Eslint plugin for react hooks, helps you write modern functional react components
         eslint-config-prettier \       # Eslint config for prettier, it will extend the style guide to match prettier
         eslint-plugin-prettier \       # Eslint plugin for prettier, it will raise eslint errors about formatting
         eslint-plugin-jsx-a11y         # Eslint plugin to raise accessibility violation errors
Enter fullscreen mode Exit fullscreen mode

笔记

如果您正在使用 create-react-app，那么您已经内置了 Eslint，您只需要安装其他插件等。

制作配置文件 -

touch .eslintrc.js .prettierrc
Enter fullscreen mode Exit fullscreen mode

.eslintignore 和 .prettierignore

这些是我们需要的文件，用于告诉 eslint 和 prettier 不要定位某些文件和文件夹

touch .eslintignore .prettierignore
Enter fullscreen mode Exit fullscreen mode

只需将以下内容添加到两个文件中

node_modules
Enter fullscreen mode Exit fullscreen mode

或者，如果您只是希望将.gitignore文件用作忽略路径，则可以在运行 ESlint 时传递一个标志，
例如。

eslint --fix . --ignore-path ./.gitignore
Enter fullscreen mode Exit fullscreen mode

现在让我们填充我们的配置 -

.prettierrc

这是我使用的 Prettier 配置 -

{
    "semi": true,
    "tabWidth": 4,
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "none",
    "jsxBracketSameLine": true
}
Enter fullscreen mode Exit fullscreen mode

.eslintrc.js

这是 eslint 的基本配置，我们可以使用很酷的插件进一步扩展它。

module.exports = {
    root: true,                 // Make sure eslint picks up the config at the root of the directory
    parserOptions: {
        ecmaVersion: 2020,      // Use the latest ecmascript standard
        sourceType: 'module',   // Allows using import/export statements
        ecmaFeatures: {
            jsx: true           // Enable JSX since we're using React
        }
    },
    settings: {
        react: {
            version: 'detect'   // Automatically detect the react version
        }
    },
    env: {
        browser: true,          // Enables browser globals like window and document
        amd: true,              // Enables require() and define() as global variables as per the amd spec.
        node: true              // Enables Node.js global variables and Node.js scoping.
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:jsx-a11y/recommended',
        'plugin:prettier/recommended' // Make this the last element so prettier config overrides other formatting rules
    ],
    rules: {
        'prettier/prettier': ['error', {}, { usePrettierrc: true }]  // Use our .prettierrc file as source
    }
};
Enter fullscreen mode Exit fullscreen mode

运行 ESlint

您需要将脚本添加到您的package.json文件中。

  "scripts": {
    "lint": "eslint --fix .",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
  },
Enter fullscreen mode Exit fullscreen mode

现在只需运行

npm run lint
Enter fullscreen mode Exit fullscreen mode

针对 Next.js

next.js 徽标
为了将 Eslint 与 Next.js 结合使用，不需要进行太多更改，我们将添加两条规则 -

JSX由于 Next.js 不需要在上下文中引入 React，因此在编写代码时需要处理 React 。
此外，还用于处理插件引发的可访问性相关错误jsx-a11y。
在 Next.js 中，我们使用Link组件来包装<a></a>标签。我们将其作为 prop 传递给href组件，而不是将属性传递给组件。这引发了一个非常常见的可访问性问题，即锚标签中没有，我们不希望出现任何 eslint 错误，因此我们需要找到一种方法来处理这种情况。<a></a>Linkhref

只需转到您的.eslint.js并添加我们的自定义规则即可。

{
    rules: {
        'react/react-in-jsx-scope': 'off',
        'jsx-a11y/anchor-is-valid': [
            'error',
            {
                components: ['Link'],
                specialLink: ['hrefLeft', 'hrefRight'],
                aspects: ['invalidHref', 'preferButton']
            }
        ]
    }
}
Enter fullscreen mode Exit fullscreen mode

针对 TypeScript

打字稿徽标

对于 TypeScript，我们需要对 devDependencies 做一些补充。

npm i -D @typescript-eslint/eslint-plugin \     # For extending our rules to work with prettier
         @typescript-eslint/parser              # To enable eslint to parse typescript code
Enter fullscreen mode Exit fullscreen mode

现在我们需要修改.eslintrc.js文件 -

在我们的配置中添加一个顶级属性来处理 TypeScript 代码解析

module.exports = {
    parser: '@typescript-eslint/parser'
};
Enter fullscreen mode Exit fullscreen mode

将以下新项目添加到extends数组中。

{
    extends: [
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint',
    ]
}
Enter fullscreen mode Exit fullscreen mode

最后

这是.eslintrc.js添加 Typescript 和 Next.js 之后的样子。

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
    settings: {
        react: {
            version: 'detect'
        }
    },
    env: {
        browser: true,
        amd: true,
        node: true
    },
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react/recommended',
        'plugin:jsx-a11y/recommended',
        'prettier/@typescript-eslint',
        'plugin:prettier/recommended'   // Make sure this is always the last element in the array.
    ],
    rules: {
        'prettier/prettier': ['error', {}, { usePrettierrc: true }],
        'react/react-in-jsx-scope': 'off',
        'react/prop-types': 'off',
        '@typescript-eslint/explicit-function-return-type': 'off',
        'simple-import-sort/sort': 'error',
        'jsx-a11y/anchor-is-valid': [
            'error',
            {
                components: ['Link'],
                specialLink: ['hrefLeft', 'hrefRight'],
                aspects: ['invalidHref', 'preferButton']
            }
        ]
    }
};
Enter fullscreen mode Exit fullscreen mode

奖励内容

eslint插件简单导入排序

你是否经常为 import 语句的顺序而烦恼？这里有一个解决方案，让 eslint 来帮你解决所有问题。

npm i -D eslint-plugin-simple-import-sort
Enter fullscreen mode Exit fullscreen mode

之前 - 之后 -排序前

排序后

更新你的.eslintrc.js文件以使用此插件。添加一个顶级属性plugins。

module.exports = {
    plugins: ['simple-import-sort']
};
Enter fullscreen mode Exit fullscreen mode

哈士奇+棉绒阶段

为了确保你的代码格式正确且没有 linting 错误，你每次都需要运行这个命令npm run lint。我们应该能够以某种方式实现自动化。

我们走吧 -

npm i -D husky \        # A tool for adding a pre-commit hook to git, It will run a certain command every time you commit
         lint-staged    # A tool for running a certain list of commands over files that staged for committing in git
Enter fullscreen mode Exit fullscreen mode

现在在package.json顶层添加以下内容。

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "./**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

结论

希望你学到了新东西。Eslint 的可定制性非常强，你应该进一步探索，找到最适合你项目的插件和配置。

所有代码片段都可以在 GitHub 上以 Gist 的形式找到

文章来源：https://dev.to/heyitsarpit/es​​lint-and-prettier-for-react-apps-bonus-next-js-and-typescript-3e46
Devto 翻译
PREV
学习全栈 | 2021 年全栈 Web 开发学习曲线检查点已到达
NEXT
5 个 Visual Studio Code 技巧助您提高工作效率