一、配置prettier

  • 1、使用npx初始化一个项目，这里我使用typescript模板的方式构建项目

    npx create-react-app react-demo1 --template typescript

  • 2、参考官方的方式配置，官方地址

  • 3、安装插件包

    npm install --save-dev --save-exact prettier

  • 4、在根目录下创建一个.prettierrc和.prettierignore的文件

    • prettierr文件是配置prettierr规则的
    • .prettierignore是配置不需要prettierr的文件，有点类似.gitignore的作用

  • 5、在.prettierignore配置

    build
coverage

  • 6、在.prettierr中配置，以下是我自己项目中配置的，仅供参考

    {
  "prettier.semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "endOfLine": "auto",
  "arrowParens": "always"
}

    更多配置可以参考官方，官网地址，以下是我提供的文字说明

    {
	  "printWidth": 100, // 超过最大值换行
    "tabWidth": 4, // 缩进字节数
    "useTabs": false, // 缩进不使用tab，使用空格
    "semi": true, // 句尾添加分号
    "singleQuote": true, // 使用单引号代替双引号
    "proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "htmlWhitespaceSensitivity": "ignore",
    "ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "parser": "babylon", // 格式化的解析器，默认是babylon
    "requireConfig": false, // Require a 'prettierconfig' to format prettier
    "stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}

  • 7、由于create-react-app创建的项目自带了eslint的规范，我们又加一个prettierr，自然会出现有冲突的时候，这时候我们就要告知使用谁的规范。可以简单的理解为优先级吧，参考官网

    • 安装依赖包

      npm install eslint-config-prettier -D

    • 在package.json中配置下

      {
	...
	"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      // 添加这行代码
      "prettier"
    ]
  },
	...
}

二、配置git的钩子函数，对每次commit的时候就使用prettierr格式化代码

  • 1、参考地址

  • 2、使用npx生成文件

    npx mrm lint-staged

  • 3、运行上面的命令会自动在package.json中添加配置

    {
  "lint-staged":
    // 默认生成的
    // "*.{js,css,md}": "prettier --write"
    // 项目是要使用ts的话就要添加下
    "*.{ts,tsx,css,md}": "prettier --write"
  }
}

  • 4、在package.json中添加husky的提交钩子

    {
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "prettier --write",
      // 添加这行表示修复后会自动执行git add操作
      "git add"
    ]
  }
  ...
}
  • 5、修改下index.ts文件,将单引号改为双引号，把分号去掉，然后使用git提交代码查看文件是不是自动格式化了

三、配置git的提交规范

  • 1、参考文档

  • 2、安装依赖包

    npm install --save-dev @commitlint/config-conventional @commitlint/cli

  • 3、生产一个commitlint.config.js文件

    echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

    以下是我自己根据网上的修改了下

    module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['upd', 'feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore'],
    ],
  },
};

/**
 * https://segmentfault.com/a/1190000017790694
 * upd: 更新
 * feat: 新增
 * fix: 修复
 * docs: 文档
 * style: 样式
 * refactor: 重构代码
 * test: 单元测试
 * chore: 构建过程或辅助工具的变动
 */

  • 4、生成提示信息的

    npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

  • 5、测试提交

    使用工具更加规范你的react项目_react

  • 6、每次提交代码的时候必须带上说明

    git add .
git commit -m 'feat: 新增代码'

四、配置eslint的

也许你会说上面每次提交代码都会自动帮我们格式化，但是我们更加希望在我们写代码的时候，每次保存代码的时候就能发现哪里不规范，这样提交代码的时候直接提交，不需要再来一个一个修改。

  • 1、初始化eslint，等待一瞬间会在项目的根目录下生成一个.eslintrc.js的文件

    npx eslint --init

    使用工具更加规范你的react项目_前端技术_02

  • 2、相对于的在项目的根目录下创建.eslintignore来忽视不需要检查的文件

    # 注释，忽略文件
node_modules
src/serviceWorker.ts
src/react-app-env.d.ts
*.lock

  • 3、我们配置的prettier那么我们就要对eslint和prettier兼容，参的地址

    npm install eslint-plugin-prettier -D
npm install eslint-config-prettier -D

  • 4、根据文档来配置

  • 5、现在react都是使用hooks开发了，自然也要配置这个规则，参考地址

  • 6、运行项目，手动删除一个分号或者单引号改为双引号

  • 7、付一份我的.eslintrc.js文件配置

    module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'react-app',
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'plugin:react-hooks/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'prettier', 'react-hooks'],
  rules: {
    'prettier/prettier': 'error',
    'arrow-body-style': 'off',
    'prefer-arrow-callback': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
  },
};

五、配置样式格式化

  • 1、安装依赖包

    npm install --save-dev stylelint stylelint-config-standard

  • 2、项目的根目录下创建文件.stylelintrc

    {
  "extends": ["stylelint-config-standard"],
  "rules": {}
}

  • 3、在package.json中配置git钩子来格式化样式

    {
  ...
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "prettier --write",
      "git add"
    ],
    // 针对css或者scss的样式格式化，如果你用less就继续加上
    "*.{css,scss}": [
      "stylelint src/**/*.css --fix",
      "stylelint src/**/*.scss --fix"
    ]
  }
  ...
}

  • 4、在index.css中随便写点样式，然后使用git提交代码查看样式否格式化

  • 5、使用git提交代码的时候会比较慢，似乎还在拉取什么包，这时候建议删除node_modules然后重新安装

六、编辑器规范

  • 1、在项目下创建一个.editorconfig文件

    # http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab