代码规范

高质量代码的特点

  • 严格编码规范（靠工具、流程，而非自觉）
  • 合理、规范的注释
  • 代码合理拆分

两者区别

eslint prettier

  • eslint 编码规范，如变量未定义（语法语义）
  • prettier 编码风格，如末尾是否用 ;
  • eslint 也有编码风格的功能，两者可能会有冲突

eslint

安装插件

1
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -save-dev

初始化配置文件 .eslint.js

1
npx eslint --init    ## 然后根据引导一步一步走

解释：eslint plugin 与 extend 的区别：

  • extend 提供的是 eslint 现有规则的一系列预设
  • plugin 则提供了除预设之外的自定义规则，当你在 eslint 的规则里找不到合适的的时候就可以借用插件来实现了

安装 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 参数

prettier

1
npm install prettier eslint-config-prettier eslint-plugin-prettier -save-dev
  • eslint-config-prettier 禁用所有和 Prettier 产生冲突的规则
  • 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 自动保存格式，可以在文件保存时，自动保留格式

1
2
3
4
5
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

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

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

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

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