React | 如何在 NextJS 项目中安装并配置 Prettier 和 ESLint

1 概述

配置项目是一件非常痛苦的事情，本文主要分享 Prettier， ESLint等组件的配置过程，避免后学者踩坑。

2 创建一个项目

使用下面的命令创建一个 NextJS&TypeScript 项目。

npx create-next-app --typescript new-app --use-yarn 

安装 Prettier 和 EsLint。

yarn install [email protected] [email protected] -D 

安装额外的配置和插件，以扩展功能。

• @typescript-eslint/eslint-plugin：提供 lint 规则的 ESLint 插件
• eslint-config-airbnb： Airbnb 提供的 .eslintrc 的共享配置
• eslint-config-prettier：关闭所有不必要或可能与Prettier冲突的规则。
• eslint-plugin-jsx-a11y：静态 AST 检查器
• eslint-plugin-prettier：将Prettier作为 ESLint 规则运行
• eslint-plugin-react：React 特定的 linting 规则
• eslint-plugin-react-hooks： ESLint 插件强制执行 Hooks 规则
• eslint-plugin-security：ESLint节点安全规则
• eslint-plugin-simple-import-sort: 自动修复的导入排序
• eslint-plugin-sonarjs: 用于ESLint的 SonarJS 规则，用于检测代码中的 bug

注意

这些依赖包安装完毕后，先不要配置 .eslintrc.js 和 .prettierrc.js 文件。把 .eslintrc.json 改为 .eslintrc.js，输入如下内容：

module.exports = {
   
  root: true,
  parserOptions: {
   
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
   
      jsx: true,
    }