# code-style-rule

**Repository Path**: caihq/code-style-rule

## Basic Information

- **Project Name**: code-style-rule
- **Description**: 代码风格校验
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-30
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

统一的代码规范在团队开发中的重要性是不言而喻的，暂且不说某条规范是否合理，但是统一是最重要的。我们可以通过一些工具来约束，让统一个项目或者团队的代码规范是一致的。

下面主要介绍：

- eslint
- prettier
- styleLint
- git hooks
- commit message

## eslint

之前一直没有搞懂 eslint 和 prettier 之间的区别，其实 eslint 的主要功能是代码格式的校验和代码质量的校验，而 prettier 只是代码格式的校验并格式化，不会对代码质量进行校验。

代码质量校验：

- 未使用的变量
- 使用全局变量
- ...

代码格式：

- 最大行长度
- 单引号还是双引号
- 语句末是否加分号
- 操作符两侧是否空格
- ...

由于 prettier 在代码格式校验方面比 eslint 更加完善和强大，因此常常会把 eslint 和 prettier 混合使用。早期的时候 eslint 不能对代码格式化，因此就必须搭配 prettier 使用，但是现在 eslint 也支持来格式化(eslint --fix)，如果 eslint 满足项目的格式规范也可以不用 prettier 。

但是在混合使用上会有一些问题，因为 prettier 和 eslint 在代码格式方面有重合的部分，规则又不一致，就会导致一些冲突。常常我们的解决方案是使用 prettier 的规则覆盖 eslint 的规则，这也是为什么 prettier 相关的配置要放在 eslint 的后面的原因

[eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) 基于 [eslint-config-airbnb-base](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base) 扩展了 react 的一些相关规范

[eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) 关闭了非必要的规则和一些与 prettier 冲突的 eslint 规则

```
{
  "extends": [
    "some-other-config-you-use",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/babel",
    "prettier/flowtype",
    "prettier/react",
    "prettier/standard",
    "prettier/unicorn",
    "prettier/vue"
  ]
}
```

## stylelint

安装：

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

配置

```
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-prettier/recommended"
  ]
}
```

## git hooks

主要是利用 git hooks 来强制要求代码的格式和质量，在 git commit 的时候先对代码进行 eslint 检查及 prettier 格式化，没有通过则不能提交，如果要忽略 git commmit -n 则可以不用验证。

lint-staged 只要对暂存区的代码进行校验而不是整个项目进行校验

安装：

```
npm install husky lint-staged --save-dev
```

配置：

```
"scripts": {
  "lint-staged": "lint-staged"
},
"husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged",
    }
  },
"lint-staged": {
  "src/**/*.{js,ts}": [
    "eslint --fix -f table'",
    "prettier --write"
  ],
  "src/**/*.{css}": [
    "stylelint --fix",
    "prettier --write"
  ]
}
```

commit msg 要求 commit 提交格式

安装：

```
npm install --save-dev @commitlint/{config-conventional,cli}
```

配置：

```
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
},
"commitlint": {
  "extends": [
    "@commitlint/config-conventional"
  ]
}
```

## jsConfig

使用 jsConfig 可以让编辑器支持一些额外的功能，比如我们在项目会用路径的别名@，如果不设置编辑器，默认是点不过去的，但是尽心如下设置后可以点击过去，找到原始定义文件

```
{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

## VsCode 相关设置

```
编辑器全局设置
{
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
    "source.fixAll.tslint": true,
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ],
```

也可以在项目中添加.vscode 文件目录 settings.json 中设置

```
{
  "editor.formatOnSave": true
}
```

保存自动格式化

参考链接 : [ESLint+Prettier 代码规范实践 ](https://zhuanlan.zhihu.com/p/68026905)