Hi FE ！

记得我们在git中有个命令是 npm run link吗走的就是packjson 中的这个

在packjson 中增加

  "scripts: {
    ...
     "lint": "lint-staged"
  }

在项目根目录下新建 lint-staged.config.js

module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
    'prettier --write--parser json',
  ],
  'package.json': ['prettier --write'],
  '*.{css,scss,less,styl}': ['stylelint --fix', 'prettier --write'],
  '*.md': ['prettier --write'],
};

代码格式化和质量工具为了设定一个标准，供项目的所有贡献者使用，以保持代码风格一致并遵循基本的最佳实践，我们将使用两个工具：

eslint - 代码规范的最佳实践 prettier - 自动格式化代码文件

ESLint

我们从 ESLint 开始，它非常简单因为在我们创建 Next.js 项目的时候已经自动安装好并且有了默认配置。我们仅需要添加少部分额外的配置就可以让它比默认配置更加严格。如果你不同意其中的任何一条规则配置，不用担心，我们可以非常简单的手动关闭这些规则。我们将所有的 ESLint 配置都写在 .eslintrc.json 文件中，这个文件已经存在于我们项目的根目录。

.eslintrc.json


{
  "globals": {
    "React": "readonly"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  /* 指定如何解析语法 */
  "parser": "@typescript-eslint/parser",
  /* 优先级低于 parse 的语法解析配置 */
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "jsxPragma": "React",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["react", "@typescript-eslint", "react-hooks", "prettier"],
  /*
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
   */
  "rules": {
    // eslint (http://eslint.cn/docs/rules)
    "no-var": "error", // 要求使用 let 或 const 而不是 var
    "no-multiple-empty-lines": ["error", { "max": 1 }], // 不允许多个空行
    "no-use-before-define": "error", // 禁止在 函数/类/变量 定义之前使用它们
    "prefer-const": "error", // 此规则旨在标记使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
    "no-irregular-whitespace": "error", // 禁止不规则的空白

    // typeScript (https://typescript-eslint.io/rules)
    "@typescript-eslint/no-unused-vars": "warn", // 禁止定义未使用的变量
    "@typescript-eslint/no-inferrable-types": "warn", // 可以轻松推断的显式类型可能会增加不必要的冗长
    "@typescript-eslint/no-namespace": "warn", // 禁止使用自定义 TypeScript 模块和命名空间。
    "@typescript-eslint/no-explicit-any": "warn", // 禁止使用 any 类型
    "@typescript-eslint/ban-ts-ignore": "off", // 禁止使用 @ts-ignore
    "@typescript-eslint/ban-types": "warn", // 禁止使用特定类型
    "@typescript-eslint/explicit-function-return-type": "warn", // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明
    "@typescript-eslint/no-var-requires": "warn", // 不允许在 import 语句中使用 require 语句
    "@typescript-eslint/no-empty-function": "warn", // 禁止空函数
    "@typescript-eslint/no-use-before-define": "warn", // 禁止在变量定义之前使用它们
    "@typescript-eslint/ban-ts-comment": "warn", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
    "@typescript-eslint/no-non-null-assertion": "warn", // 不允许使用后缀运算符的非空断言(!)
    "@typescript-eslint/explicit-module-boundary-types": "warn", // 要求导出函数和类的公共类方法的显式返回和参数类型
    // react (https://github.com/jsx-eslint/eslint-plugin-react)
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error",
    "no-debugger": "error",
    "no-console": "warn"
  }
}

npm run lint 你会得到类型的提示 ✔ No ESLint warnings or errors ✨ Done in 3.48s.

Prettier

npm run   -D prettier

同时我也推荐你安装 Prettier VS Code 插件，这样你不用依赖命令行工具就可以在 VS Code 中进行文件格式化。在你的项目中安装和配置它意味着 VSCode 将使用你项目的设置，因此仍然有必要在此处添加它。我们将在根目录添加两个文件：

.prettierrc.js


// @see: https://www.prettier.cn

module.exports = {
	// 超过最大值换行
	printWidth: 130,
	// 缩进字节数
	tabWidth: 2,
	// 使用制表符而不是空格缩进行
	useTabs: true,
	// 结尾不用分号(true有，false没有)
	semi: true,
	// 使用单引号(true单双引号，false双引号)
	singleQuote: false,
	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
	quoteProps: "as-needed",
	// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
	bracketSpacing: true,
	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
	trailingComma: "none",
	// 在JSX中使用单引号而不是双引号
	jsxSingleQuote: false,
	//  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 ,always：不省略括号
	arrowParens: "avoid",
	// 如果文件顶部已经有一个 doclock，这个选项将新建一行注释，并打上@format标记。
	insertPragma: false,
	// 指定要使用的解析器，不需要写文件开头的 @prettier
	requirePragma: false,
	// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
	proseWrap: "preserve",
	// 在html中空格是否是敏感的 "css" - 遵守CSS显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
	htmlWhitespaceSensitivity: "css",
	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
	endOfLine: "auto",
	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
	rangeStart: 0,
	rangeEnd: Infinity,
	// Vue文件脚本和样式标签缩进
	vueIndentScriptAndStyle: false
};

.prettierignore

.prettierignore
.yarn
.next
dist
node_modules

在这个文件中我列了一些目录，我不希望 prettier 在这些目录中浪费任何资源去进行格式化。你也可以使用类似 *.html 这样的方式去忽略你选择的文件类似现在我们在 package.json 添加新的 script ，然后我们就可以运行 Prettier： package.json


  "scripts: {
    ...
    "prettier": "prettier --write ."
  }

你可以运行

npm run   prettier

自动格式化、修复和保存项目中你未忽略的所有文件。默认情况下，我的格式化程序更新了大约 5 个文件。你可以在 VS Code 左侧的源代码管理选项卡中的已更改文件列表中看到它们。