代码风格自动化检测代码风格的一致性可以使团队成员更容易理解代码，更快地审查代码，减少错误。编码时获得更大的美学享受，心情

前言

Q:为什么我们要追求代码风格的一致性？
A:代码风格的一致性可以使团队成员更容易理解代码，更快地审查代码，减少错误。编码时获得更大的美学享受，心情更愉快！

Linter初识

linter（静态代码分析）: A linter is a small program that checks code for stylistic or programming errors.

lint：棉绒，线头。linter含义大概比喻的是让我们像去除毛衣上的棉绒线头一样去除我们代码中不整洁的代码，帮助我们梳理代码，呈现更干净、清晰、整洁的代码。

代码风格前三

下载.png

airbnb 支持react代码风格检测，行尾要求分号；
"extends": ["eslint:recommended", "airbnb"]

google: 谷歌没有React风格的指南，行尾要求分号；
["eslint:recommended", "google"]

standard 行尾不要求分号；一旦使用 standard 规范表明代码的简明性及社区的约定要高于个人的编码风格。
["eslint:recommended", "standard"]

eslint:recommended 这不是一个非常固执己见的风格集。如果您不关心代码风格本身，并且更多地关注于捕获未使用的变量或语法错误，那么它特别有用。如果你非要自己去配置成百上千项的 ESLint 规则，那你可以直接使用 eslint-config-standard 来将个人配置包装在上层。

注意，你总是可以跳到eslintrc中禁用或启用特定的规则。例如，在谷歌中关闭JSDocs。

安装配置eslint

初始化eslint配置。初始化配置会提供airbnb,standard,google三种代码风格指南供你选择。

npx eslint --init

创建.eslintignore文件，配置需要忽略检查的文件夹及文件。

eslint和prettier一起使用，而无需担心配置冲突，安装# eslint-config-prettier

npm i eslint-config-prettier eslint-plugin-prettier prettier -D

//.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb-base", "prettier"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

其他相关库

eslint 发现并修复JavaScript代码中的问题
prettier 代码格式化工具
husky 可以防止糟糕的git commit, git push等等
eslint-plugin-react 特定于react的检测规则

npm install --save-dev eslint
npm install --save-dev prettier
npm install --save-dev husky
npm install --save-dev lint-staged
npm install --save-dev stylelint

参考链接：

linter