前端代码质量工具介绍以vscode为例，介绍几款常用且必备的代码质量工具： editorconfig：用于统一团队代码格

以vscode为例，介绍几款常用且必备的代码质量工具：

editorconfig：用于统一团队代码格式：如每行缩进是空格还是tab

安装地址：vscode搜索editorconfig 或 marketplace.visualstudio.com/items?itemN…

使用方法：每个项目根目录建立.editorconfig文件，随项目签入git 内容示例如下

# 如果找到这个，就不会往更上级目录查找editorconfig文件
root = true

# 对所有文件而言
[*] end_of_line = lf Unix风格换行符（用于windows（或者*nix混合）编程情况，但windows的git一般设置为签出windows（crlf）换行，签入unix换行（lf），因此必要性不大。
insert_final_newline = true 文件末尾是否有换行

# 可以对文件类型、路径做单独设置
[*.{js,py}]
charset = utf-8

# 缩进风格，space空格，或tab
indent_style = space

# 几个空格，或tab
indent_size = 2

# 文件编码
charset = utf-8

# 是否应去掉每行末尾空格
trim_trailing_whitespace = true

每个文件手动格式化代码后生效（shift+alt+f），或于回车新增行时生效（如缩进） editorconfig还可以加入非标准的格式选项，如webstorm可以导出更多设置到editorconfig

eslint 既是一个npm包，也是一个vscode插件。

插件地址：marketplace.visualstudio.com/items?itemN…

npm包安装 npm install --save-dev eslint eslint建议安装较高版本

建议同时安装prettier格式化代码，并且eslint的规则里应同时加入格式化内容 （应该和editorconfig一致），保证编辑器的格式化和eslint的自动格式化行为一致

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

建议：开启eslint保存时自动fix功能. 安装eslint插件之后，在项目的.vscode目录建立settings.json

加入如下内容：

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

示例.eslintrc如下. .eslintrc文件也应该全组统一，并可以加入git-hook自动运行检查和fix

{
    "plugins": [ "react", "prettier" ],
    "extends": [ "eslint:recommended", "plugin:react/recommended" ],
    "rules": {
        "no-set-state": "off",
        "prettier/prettier": "error"
     }
}