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

}

小结

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

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

相关推荐
LFly_ice8 分钟前
学习React-9-useSyncExternalStore
javascript·学习·react.js
Murphy_lx33 分钟前
Lambda表达式
开发语言·c++
gnip38 分钟前
js上下文
前端·javascript
中草药z39 分钟前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
yangpipi-41 分钟前
C++并发编程-23. 线程间切分任务的方法
开发语言·c++
不知名raver(学python版)1 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休1 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel1 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端