【前端工程化】nextjs项目配置eslint+prettier

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

pnpm i eslint prettier eslint-plugin-prettier -D

二、配置.eslintrc.json

{
  "extends": ["next/core-web-vitals"], // 这个是nextjs官网推荐的写法
  "env": {
    "es6": true,
    "node": true
  },
  "plugins": ["prettier"], //这个是为了整合我们自己配置.prettierrc.js
  "rules": {
    "prettier/prettier": "error"
  }
}

三、配置.prettiterrc.js

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

好了，就这么简单。