使用工具更加规范你的react项目_.prettierignore干嘛用的

一、配置prettier

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

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

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

• 3、安装插件包

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

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

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

• 5、在.prettierignore配置

  build
  coverage
  1
  2

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

  {
    "prettier.semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "printWidth": 100,
    "tabWidth": 2,
    "endOfLine": "auto",
    "arrowParens": "always"
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9

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

  {
  	  "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
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

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

  • 安装依赖包

    npm install eslint-config-prettier -D
    1

  • 在package.json中配置下

    {
    	...
    	"eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest",
          // 添加这行代码
          "prettier"
        ]
      },
    	...
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

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

• 1、参考地址

• 2、使用npx生成文件

  npx mrm lint-staged
  1

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

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

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

  {
    ...
    "husky": {
      "hooks": {
        "pre-commit": "lint-staged"
      }
    },
    "lint-staged": {
      "*.{js,ts,tsx}": [
        "prettier --write",
        // 添加这行表示修复后会自动执行git add操作
        "git add"
      ]
    }
    ...
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

• 5、修改下index.ts文件,将单引号改为双引号，把分号去掉，然后使用git提交代码查看文件是不是自动格式化了

三、配置git的提交规范

• 1、参考文档

• 2、安装依赖包

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

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

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

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

  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: 构建过程或辅助工具的变动
   */
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

• 4、生成提示信息的

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

• 5、测试提交

  

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

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

四、配置eslint的

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

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

  npx eslint --init
  1

  

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

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

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

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

• 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
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30

五、配置样式格式化

• 1、安装依赖包

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

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

  {
    "extends": ["stylelint-config-standard"],
    "rules": {}
  }
  1
  2
  3
  4

• 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"
      ]
    }
    ...
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

• 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
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16