一、安装eslint + prettier + eslint-plugin-prettier

复制 1pnpm i eslint prettier eslint-plugin-prettier -D

二、配置.eslintrc.json

复制 1{
 2"extends": ["next/core-web-vitals"], // 这个是nextjs官网推荐的写法
 3    "env": {
 4    "es6": true,
 5    "node": true
 6  },
 7  "plugins": ["prettier"], //这个是为了整合我们自己配置.prettierrc.js
 8  "rules": {
 9    "prettier/prettier": "error"
10  }
11}

三、配置.prettiterrc.js

复制 1module.exports = {
 2     singleQuote: true, // 使用单引号代替双引号
 3     printWidth: 200, // 超过最大值换行
 4     semi: false, // 结尾不用分号
 5     useTabs: true, // 缩进使用tab, 不使用空格
 6     tabWidth: 4, // tab 样式宽度
 7     bracketSpacing: true, // 对象数组, 文字间加空格 {a: 1} => { a: 1 }
 8     arrowParens: 'avoid', // 如果可以, 自动去除括号 (x) => x 变为 x => x
 9     proseWrap: 'preserve',
10     htmlWhitespaceSensitivity: 'ignore',
11     trailingComma: 'all',
12}