停息一下，给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，就需要进行如下步骤

1. 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;

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

复制代码

设置 .eslintrc.json

可以照着我的设置配；

1. {
2.   "extends": [
3.     "next/core-web-vitals",
4.     "plugin:@typescript-eslint/recommended",
5.     "plugin:prettier/recommended"
6.   ],
7.   "parser": "@typescript-eslint/parser",
8.   "plugins": ["@typescript-eslint"],
9.   "settings": {
10.     "import/resolver": {
11.       "node": {
12.         "extensions": [".js", ".jsx", ".ts", ".tsx"]
13.       }
14.     }
15.   },
16.   "rules": {
17.     // 自定义规则
18.     "react/react-in-jsx-scope": "off",
19.     "linebreak-style": ["error", "unix"],
20.     // 强制使用 LF 换行符
21.     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
22.     "import/extensions": [
23.       "error",
24.       "ignorePackages",
25.       {
26.         "js": "never",
27.         "jsx": "never",
28.         "ts": "never",
29.         "tsx": "never"
30.       }
31.     ],
32.     "no-unused-vars": "off",
33.     "@typescript-eslint/no-unused-vars": ["error"],
34.     "import/prefer-default-export": "off",
35.     "max-len": ["warn", { "code": 100 }],
36.     "react/jsx-max-props-per-line": ["error", { "maximum": 1 }],
37.     // 设置为 "error" 并指定 maximum: 1，确保每个属性独占一行。
38.     "react/jsx-indent-props": ["error", 2]
39.     // 规则确保属性缩进为两个空格。
40.   }
41. }

复制代码

安装 Prettier

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

复制代码

设置 .prettierrc

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

1. {
2.   "semi": false,
3.   "singleQuote": false,
4.   "printWidth": 100,
5.   "useTabs": false,
6.   "trailingComma": "all",
7.   "bracketSpacing": true,
8.   "arrowParens": "always",
9.   "proseWrap": "preserve",
10.   "endOfLine": "lf"
11. }

复制代码

测试

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

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

3. {
4.   // 启用保存时自动格式化
5.   "editor.formatOnSave": true,
7.   // 设置默认格式化工具为 Prettier
8.   "editor.defaultFormatter": "esbenp.prettier-vscode",
10.   // 确保 ESLint 自动修复
11.   "eslint.autoFixOnSave": true,
13.   // 确保 ESLint 也参与格式化
14.   "eslint.validate": [
15.     "javascript",
16.     "javascriptreact",
17.     "typescript",
18.     "typescriptreact"
19.   ],
21.   // 忽略特定文件夹的格式化
22.   "files.exclude": {
23.     "**/.git": true,
24.     "**/node_modules": true
25.   },
27. }

复制代码

小结

曾经的我，不知规范化的好处，项目到我手上，就变了边幅，汗青记录更是难以追踪。今日起，我痛定思痛，决心每一次都把规范设置好。也希望大家以我为戒，不要再犯下此类低级错误！！！！
顺便问一下，谁能关注一下我吗？前端小趴菜在努力发展，带你一起进步！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。