react-create-app 创建的项目添加保存自动格式化

前言

首先, react-create-app 创建的项目是自带安装eslint的, 所以我们要安装prettier 及相关插件

参考 => https://juejin.cn/post/6844903901544742925

安装的包

这些都是开发时依赖, 注意安装位置

eslint-config-react-app

打开modules文件, 可以看到是已经预安装的, 无需重复安装

eslint-config-prettier

eslint-plugin-prettier

prettier

vscode 插件

eslint

prettier

可能会搜出多个, 要安装这个

eslint & prettier 文件

参考前面链接即可.

我结合实际开发需要, 多加了几条规则

  rules: {
    // 'no-unused-vars': '',
    'no-shadow': 'off',
    'no-console': 'off', // 允许代码出现console.log
    'no-param-reassign': 'off', // 允许修改function的入参
    'react-hooks/exhaustive-deps': 'off',
    }

vscode 配置文件

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // "editor.tabSize": 2
    // "prettier.trailingComma": "none",
}