暂停一下,给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
  },

}

小结

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

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

相关推荐
好好好明天会更好10 分钟前
vue中的this.$nextTick如何使用
前端·vue.js
我的div丢了肿么办11 分钟前
使用URLSearchParams 优雅的获取URL携带的参数
前端·javascript
XXXFIRE12 分钟前
微信小程序开发实战笔记:全流程梳理
前端·微信小程序
多读书19314 分钟前
Java多线程进阶-深入synchronized与CAS
java·开发语言·java-ee
答案answer14 分钟前
回顾一下我的开源项目之路和Three.js 学习历程
前端·开源·three.js
ZoeLandia15 分钟前
nginx实战分析
运维·前端·nginx
张迅之啊15 分钟前
【React】MQTT + useEventBus 实现MQTT长连接以及消息分发
前端
入秋17 分钟前
【视觉震撼】我用Three.js让极光在网页里跳舞!
前端·three.js
盛夏绽放18 分钟前
Vue项目生产环境性能优化实战指南
前端·vue.js·性能优化
专注API从业者26 分钟前
Python/Node.js 调用taobao API:构建实时商品详情数据采集服务
大数据·前端·数据库·node.js