当前位置：首页 > news >正文

暂停一下，给Next.js项目配置一下ESLint（Next+tailwind项目）

news 2024/12/14 14:18:08

前提

之前开自己的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},}