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

}

小结

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

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

相关推荐
前端小胡兔8 分钟前
uniapp h5 js设置监听:超时未操作返回首页(全局只监听一次,可设置监听事件+检查时间+超时时长)
前端·javascript·uni-app
小彭努力中8 分钟前
26.使用 Vue 3 + OpenLayers 加载远程 Shapefile 数据并显示图形
前端·javascript·vue.js·arcgis·openlayers
wandongle11 分钟前
HTML5(一)
前端·html·html5
未知陨落12 分钟前
数据结构——跳表
开发语言·数据结构·c++·leetcode·跳表
pp不会算法^v^27 分钟前
Could not transfer artifact javax.xml.bind:jaxb-api:pom:2.3.1
xml·java·开发语言·maven
袭烽28 分钟前
vue常用命令汇总
前端·javascript·vue.js·npm·nvm
顾以沫29 分钟前
数据结构--栈和队列
java·开发语言·数据结构
Kolde35 分钟前
java.lang.NoClassDefFoundError: org/apache/commons/collections/MapUtils
java·开发语言·apache
m0_7482548839 分钟前
Apache Seatunnel Web 使用指南
前端·apache
小超爱编程41 分钟前
使用纯 CSS 来计算当前窗口的宽高
前端·css