【项目】React 代码规范配置

theDukes
1,229 阅读5分钟

配置prettier

  1. 使用npx初始化一个项目，这里我使用typescript模板的方式构建项目
npx create-react-app react-demo1 --template typescript

  1. 参考官方的方式配置，官方地址

  2. 安装插件包

npm install --save-dev --save-exact prettier
  1. 在根目录下创建一个.prettierrc和.prettierignore的文件
  • prettierrc文件是配置prettier规则的
  • .prettierignore是配置不需要prettier的文件，有点类似.gitignore的作用
  1. 在.prettierignore配置
build
coverage

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

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

Options · Prettier，以下是文字说明。

{
    "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的代码格式进行校验
}
  1. 由于create-react-app创建的项目自带了eslint的规范，我们又加一个prettier，自然会出现有冲突的时候，这时候我们就要告知使用谁的规范。可以简单的理解为优先级吧，参考官网
  • 安装依赖包
npm install eslint-config-prettier -D
  • 在package.json中配置下
{
   ...
    "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      // 添加这行代码
      "prettier"
    ]
  },
        ...
}

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

  1. (参考官网

  2. 使用npx生成文件

npx mrm lint-staged
  1. 运行上面的命令会自动在package.json中添加配置
{
  "lint-staged":
    // 默认生成的
    // "*.{js,css,md}": "prettier --write"
    // 项目是要使用ts的话就要添加下
    "*.{ts,tsx,css,md}": "prettier --write"
  }
}
  1. 在package.json中添加husky的提交钩子
{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "prettier --write",
      // 添加这行表示修复后会自动执行git add操作
      "git add"
    ]
  }
  ...
}
  1. 修改下index.ts文件,将单引号改为双引号，把分号去掉，然后使用git提交代码查看文件是不是自动格式化了

配置git的提交规范

  1. 参考文档

  2. 安装依赖包

npm install --save-dev @commitlint/config-conventional @commitlint/cli
  1. 新建commitlint.config.js文件
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['upd', 'feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore'],
    ],
  },
};

/**
 * upd: 更新
 * feat: 新增
 * fix: 修复
 * docs: 文档
 * style: 样式
 * refactor: 重构代码
 * test: 单元测试
 * chore: 构建过程或辅助工具的变动
 */
  1. 生成提示信息的
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
  1. 测试提交

image-20210604201407638.png

  1. 每次提交代码的时候必须带上说明
git add .
git commit -m 'feat: 新增代码'

配置eslint

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

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

image-20210604202306849.png

  1. 相对于的在项目的根目录下创建.eslintignore来忽视不需要检查的文件
# 注释，忽略文件
node_modules
src/serviceWorker.ts
src/react-app-env.d.ts
*.lock
  1. 我们配置的prettier那么我们就要对eslint和prettier兼容，参考地址
npm install eslint-plugin-prettier  eslint-config-prettier -D

  1. 根据文档来配置

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

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

  4. 参考一份.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
  1. 项目的根目录下创建文件.stylelintrc
{
  "extends": ["stylelint-config-standard"],
  "rules": {}
}
  1. 在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"
    ]
  }
  ...
}

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

  2. 使用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
avatar
文章
阅读
粉丝