编码规范 | CZ的博客

type

status

date

slug

代码规范

高质量代码的特点

eslint prettier

安装插件

初始化配置文件 .eslint.js

解释：eslint plugin 与 extend 的区别：

安装 vscode 插件 eslint ，此时就可以看到代码 App.txs 中的错误提示（如定义一个未使用的变量）

在 package.json 中增加 scripts "lint": " eslint 'src/**/*.+(js|ts|jsx|tsx)' "

如果上面那个有问题就配置这个"lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\""

控制台运行 npm run lint 也可以看到错误提示。如果要自动修复，可以加 --fix 参数

eslint-plugin-prettier 把 Prettier 应用到 Eslint，配合 rules "prettier/prettier": "error" 实现 Eslint 提醒。

在 eslint 配置文件的 extends 最后增加 'plugin:prettier/recommended'

安装 vscode 插件 prettier ，此时可以看到代码 App.txs 中的格式提示（如末尾是否使用 ; ，或单引号、双引号）

在 package.json 中增加 scripts "format": " prettier --write 'src/**/*.+(js|ts|jsx|tsx)' "

如果上面那个有问题就配置这个"format": "prettier --write 'src/**/*.{js,ts,jsx,tsx}'"

控制台运行 npm run format 可以修复所有的格式错误

设置 vscode .vscode/settings.json 自动保存格式，可以在文件保存时，自动保留格式

增加配置文件 .prettierrc.js 规定自己的编码格式，运行 npm run format 可以看到效果，保存文件也可以看到效果。

【注意】如果此处没效果，可以重启 vscode 再重试。

一直搞不定，重启 vscode 就好了。在 vscode 搜“prettier” 插件时，发现一个 “reload required” 的提示，于是就重启了

CRA 创建的项目，配置文件是 js 格式 vite 创建的项目，配置文件是 cjs 格式