暂停一下,给Next.js项目配置一下ESLint(Next+tailwind项目)

前提

之前开自己的GitHub项目,想着不是团队项目,偷懒没有配置eslint,后面发现还是不行。eslint的存在可以帮助我们规范代码格式,同时 ctrl + s保存立即调整代码格式是真的很爽。

除此之外,团队使用eslint也是好处颇多,因为如果团队内每一个同事的代码规范风格都不一样,协同开发的时候,容易出现大量因为代码格式调整而引起的代码变动,这样让我们追踪修改代码的难度又上升了一个level,因而,配置eslint是非常有必要的。

今天教大家配一下Next.js+tailwind的代码规范,顺便也是方便自己查找。

项目配置参考位置:

goldfish-Ai/.eslintrc.json at pack-autoprefixedfail · blueyuyu/goldfish-Ai · GitHub

配置

初始化 ESLint

如果在配置Next项目的时候,没有选择eslint,就需要进行如下步骤

npx eslint --init

How would you like to use ESLint?: To check syntax and find problems

What type of modules does your project use?: JavaScript modules (import/export)

Which framework does your project use?: React

Does your project use TypeScript?: Yes or No

Where does your code run?: Browser, Node

How would you like to define a style for your project?: Use a popular style guide

Which style guide do you want to follow?: Airbnb: https://github.com/airbnb/javascript

What format do you want your config file to be in?: JSON

进行配置,这样就会生成一个基本的 .eslintrc.json 文件。

安装ts依赖

项目中有用到ts;

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

配置 .eslintrc.json

可以照着我的配置配;

{
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    // 自定义规则
    "react/react-in-jsx-scope": "off",
    "linebreak-style": ["error", "unix"],
    // 强制使用 LF 换行符
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"],
    "import/prefer-default-export": "off",
    "max-len": ["warn", { "code": 100 }],
    "react/jsx-max-props-per-line": ["error", { "maximum": 1 }],
    // 设置为 "error" 并指定 maximum: 1,确保每个属性独占一行。
    "react/jsx-indent-props": ["error", 2]
    // 规则确保属性缩进为两个空格。
  }
}

安装 Prettier

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

配置 .prettierrc

创建一个 .prettierrc 文件来配置 Prettier。

{
  "semi": false,
  "singleQuote": false,
  "printWidth": 100,
  "useTabs": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "endOfLine": "lf"
}

测试

这样就配置完毕了,ctrl+s保存,代码自动调整格式,对照一下,看看格式是不是自己想要的,不是的话,看着文档慢慢调整。

配置 VSCode 设置

使用快捷键 ctrl+ , 输入setting,找到在setting.json里面编写。对项目进行配置。

settings.json

{
  // 启用保存时自动格式化
  "editor.formatOnSave": true,

  // 设置默认格式化工具为 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 确保 ESLint 自动修复
  "eslint.autoFixOnSave": true,

  // 确保 ESLint 也参与格式化
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

  // 忽略特定文件夹的格式化
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true
  },

}

小结

曾经的我,不知规范化的好处,项目到我手上,就变了模样,历史记录更是难以追踪。今日起,我痛定思痛,决心每一次都把规范设置好。也希望大家以我为戒,不要再犯下此类低级错误!!!!

顺便问一下,谁能关注一下我吗?前端小趴菜在努力成长,带你一起进步!!!

相关推荐
不想有bug的小菜鸟6 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238637 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559608 分钟前
前端代理,解决跨域问题讲解
前端
quitv13 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238122 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星23 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
Joey_friends32 分钟前
【Linux】线程详解
开发语言
_GR37 分钟前
Qt开发⑧Qt的窗口_下_浮动窗口+对话框
开发语言·css·c++·qt·microsoft
一粒沙-43 分钟前
iOS 将GIF图分享至微信
前端·ios
Good Note1 小时前
Golang——常用库context和runtime
开发语言·爬虫·golang