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

}

小结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/937809.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

音频进阶学习八——傅里叶变换的介绍

文章目录 前言一、傅里叶变换1.傅里叶变换的发展2.常见的傅里叶变换3.频域 二、欧拉公式1.实数、虚数、复数2.对虚数和复数的理解3.复平面4.复数和三角函数5.复数的运算6.欧拉公式 三、积分运算1.定积分2.不定积分3.基本的积分公式4.积分规则线性替换法分部积分法 5.定积分计算…

Mac m2电脑上安装单机Hadoop(伪集群)

1. 引言 本教程旨在介绍在Mac 电脑上安装Hadoop 2. 前提条件 2.1 安装JDK Mac电脑上安装Hadoop,必须首先安装JDK,并配置环境变量(此处不做详细描述) 2.2 配置ssh环境 关闭防火墙 在Mac下配置ssh环境,防止后面启…

【记录49】vue2 vue-office在线预览 docx、pdf、excel文档

vue2 在线预览 docx、pdf、excel文档 docx npm install vue-office/docx vue-demi0.14.6 指定版本 npm install vue-office/docx vue-demi <template><VueOfficeDocx :src"pdf" style"height: 100vh;" rendere"rendereHandler" error&…

「LangChain4j入门 — JavaAI程序」

█ 什么是大模型&#xff1f; 大模型&#xff0c;英文名叫 Large Model&#xff0c;大型模型。早期的时候&#xff0c;也叫 Foundation Model&#xff0c;基础模型。 大模型是一个简称。完整的叫法&#xff0c;应该是 “人工智能预训练大模型”。预训练&#xff0c;是一项技术…

【SQL】语句练习

1. 更新 1.1单表更新 例1: 所有薪水低于30000的员工薪水增加10% SQL命令&#xff1a; update employee set salarysalary*1.1 where salary < 30000; 1.2多表更新 例1: 将下图两表张三的语文成绩从95修改为80 SQL命令&#xff1a; update exam set score80 where subjec…

蓝桥杯刷题——day6

蓝桥杯刷题——day6 题目一题干解题思路代码 题目二题干解题思路代码 题目一 题干 小明发现49很有趣&#xff0c;首先&#xff0c;它是个平方数。它可以拆分为4和9&#xff0c;拆分出来的部分也是平方数。169 也有这个性质&#xff0c;我们权且称它们为&#xff1a;拼接平方数…

SQL中的联结表

本文介绍什么是联结&#xff0c;为什么使用联结&#xff0c;以及如何编写使用联结的SELECT语句。 1. 联结 SQL最强大的功能之一就是能在数据查询的执行中联结&#xff08;join&#xff09;表。联结是SQL的SELECT能执行的最重要的操作&#xff0c;理解联结及其语法是学习SQL的…

.Net WebAPI(一)

文章目录 项目地址一、WebAPI基础1. 项目初始化1.1 创建简单的API1.1.1 get请求1.1.2 post请求1.1.3 put请求1.1.4 Delete请求 1.2 webapi的流程 2.Controllers2.1 创建一个shirts的Controller 3. Routing3.1 使用和创建MapControllers3.2 使用Routing的模板语言 4. Mould Bind…

SQL在线格式化 - 加菲工具

SQL在线格式化 打开网站 加菲工具 选择“SQL 在线格式化” 或者直接访问 https://www.orcc.online/tools/sql 输入sql&#xff0c;点击上方的格式化按钮即可 输入框得到格式化后的sql结果

vs 调试

常用&#xff1a; 调试->窗口-> 断点 监视 自动窗口 局部变量 调用堆栈 内存 反汇编&#xff08;也可以右键&#xff0c;转到反汇编&#xff09; 寄存器 快捷键&#xff1a; F5:启用调试&#xff0c;经常用来跳到下一个断点处 F9创建断点和取消断点。断点的重要作用&…

25. 深浅拷贝

一、什么是浅拷贝 只对对象的最顶层进行的拷贝称为 浅拷贝。我们可以用 copy 模块中的 copy() 方法实现浅拷贝。 import copya [11, 22, 33] b [44, 55, 66] c [a, b] d copy.copy(c)print(f"c: {c}") print(f"d: {d}") print(f"c d: {c d}&q…

docker简单命令

docker images 查看镜像文件 docker ps -a 查看容器文件 docker rm 0b2 删除容器文件&#xff0c;id取前三位即可 docker rmi e64 删除镜像文件&#xff08;先删容器才能删镜像&#xff09;&#xff0c;id取前三位即可 在包含Dockerfile文件的目录…

【Java】4、虚拟机 JVM

目录 Java内存区域详解(重点) JVM垃圾回收详解(重点) 类文件结构详解 类加载过程详解 类加载器详解(重点) 最重要的JVM参数总结 JDK监控和故障处理工具总结 JVM线上问题排查和性能调优案例 参考&#xff1a; JVM 核心技术 32 讲 深入浅出 Java 虚拟机

谷歌浏览器的无障碍功能介绍

在数字化时代&#xff0c;互联网已经成为人们生活中不可或缺的一部分。然而&#xff0c;并不是所有人都能平等地享受网络带来的便利。为了帮助有特殊需求的人士更好地访问和使用网络内容&#xff0c;谷歌浏览器推出了一系列无障碍功能。这些功能旨在提升视力障碍、听力障碍及其…

3D 生成重建035-DiffRF直接生成nerf

3D 生成重建035-DiffRF直接生成nerf 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 本文提出了一种基于渲染引导的三维辐射场扩散新方法DiffRF&#xff0c;用于高质量的三维辐射场合成。现有的方法通常难以生成具有细致纹理和几何细节的三维模型&#xff0c;并且容易出…

从斯柯达和大众汽车安全漏洞事件剖析谈软件安全设计

一、事件概述 2022年&#xff0c;斯柯达和大众汽车被曝出存在一系列安全漏洞&#xff0c;这一事件引起了广泛关注。据估算&#xff0c;这些漏洞可能涉及超过 140 万辆汽车&#xff0c;涵盖斯柯达速派 III&#xff08;Skoda Superb III&#xff09;、斯柯达柯珞克&#xff08;S…

Hyperledger Fabric 2.x 环境搭建

Hyperledger Fabric 是一个开源的企业级许可分布式账本技术&#xff08;Distributed Ledger Technology&#xff0c;DLT&#xff09;平台&#xff0c;专为在企业环境中使用而设计&#xff0c;与其他流行的分布式账本或区块链平台相比&#xff0c;它有一些主要的区别。 环境准备…

OpenIPC开源FPV之Adaptive-Link天空端代码解析

OpenIPC开源FPV之Adaptive-Link天空端代码解析 1. 源由2. 框架代码3. 报文处理3.1 special报文3.2 普通报文 4. 工作流程4.1 Profile 竞选4.2 Profile 研判4.3 Profile 应用 5. 总结6. 参考资料7. 补充资料7.1 RSSI 和 SNR 的物理含义7.2 信号质量加权的理论依据7.3 实际应用中…

metinfo的csrf漏洞复现

http://localhost/metinfo/install/index.php 管理员admin登录 抓修改信息包 进入点击受害链接 localhost/333.html 管理员被修改密码原来root错误被强制退出 输入密码123456登录正常

jclasslib Bytecode Viewer 安装

IDEA 2023.1.3 Settings->Plugins->Marketplace&#xff0c;搜索jclasslib Bytecode Viewer, install,apply 选中你所要分析的类&#xff0c;view->show bytecode with jclasslib gaoding