规范化 lint上面eslint 快速上手中的 --init 其实时为了快速生成一个具有需要配置的 .eslintrc.

需要规范化的地方

代码，文档，提交日志

eslint

最主流的js lint 工具，可以检查 js 语法错误，发现问题代码（比如定义了未使用），风格不统一的问题

eslint 安装

yarn init -y   // 初始化一个项目
yarn add eslint -D // 安装eslint 为开发依赖
yarn eslint --version // 检查模块是否安装成功

执行完上述脚本后会得到一个版本好，我安装的是v7.7.0, 同时可以看到node_modules/.bin/eslint文件因此上述命令中的第三行，其实是yarn 帮忙执行了下面的命令：

.\node_modules\.bin\eslint eslint --versiont // 这里的 .\ 不能改为 ./

eslint 快速上手

初始化eslint 配置文件（这是必须的，否则执行第二步，会提示配置文件不存在）
检查一个文件
修复其中的风格问题

yarn eslint --init
yarn eslint ./index.js
yarn eslint ./index.js --fix

其中要注意初始化配置文件时需要选择需要被lint 的内容：选择第三个：

检查与发现的错误，发现问题代码，同时代码风格做些校验

所有的选择如下：

特别提醒: 如果有安装不成功的问题，需要看下是否有npm 配置的比如代理配置的错误，我配置了proxy, 就错了几次，后来把proxy 删掉就好了

安装成功后，写一个错误的文件，如下进行对其进行eslint index.js，得到如下的信息，来说明第13行，第六个字符有问题，但是其实这个可以一直往上看，应该时第11行未闭合的括弧引起的

闭合括弧后，得到如下的错误信息，这个错误信息变多了，因为除去未识别的符合后，可识别的内容就变多了，错误也就多了，并且此时多路一个提示，就是可以通过 --fix 的选项来修复一些风格上的问题：

我们现在来试一下， yarn eslint ./index.js --fix 后修复了什么? 可以看到风格上的问题都被修复了，比如空个，空行，引号，分号等，剩下错误的语法syy, 以及没有错误，但是有问题的代码 foo

eslint 配置文件解析

上面eslint 快速上手中的 --init 其实时为了快速生成一个具有需要配置的 .eslintrc.js,并且同时安装所需要的插件, 其实实际上也可以不通过这种方式来达到上述的目的，而是通过手动配置，这就需要我们了解 .eslintrc.js 中的各项配置的含义。

[配置中文文档]eslint.cn/docs/user-g…

下面是一些用到过的配置：

env: {} 表示代码可以运行的环境，对于不同的环境启用不同的全局变量或类型（比如 Set 等新类型），比如broswer(window,document), node(process),es6(Set, Map)，jquery（jQuery）等待，具体有哪些环境可以参考上面的链接
**parserOptions：{ecmaVersion， sourceType， ecmaFeatures} **
- ecmaVersion 这个选项表示使用某个版本的语法 3，5（默认），你可以使用 6、7、8、9 或 10 等，但是 启用某个版本的语法，不一定就是支持全局变量或类型（比如 Set 等新类型），因为全局变量或类型是由** evn** 决定的，如果env:{es6:true}, ecmaVersion 中默认为6
- sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
- ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:
  - globalReturn - 允许在全局作用域下使用 return 语句
  - impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
  - jsx - 启用 JSX
** parser ** 语法解析器，ESLint 默认使用Espree作为其解析器，其他一些与ESLint 兼容的解析器可以在文档中查看，比如使用ts 时候需要用到的 @typescript-eslint/parser
plugins 插件数组，插件名称可以省略 eslint-plugin- 前缀
globals {name: "readonly"/"writeable"/"off"} 自定义的全局变量， env 中定义了的全局变量可通过off关掉，未定义的可自定义
rules 重写的规则，其中 0==off 表示关闭， 1== warn 表示警告， 2 == error 表示错误，用法有：
- eqeqeq：0/off(表示不要求使用 === 和 !==)，
- quotes: ["error", "double"]，表示指定了 “double”选项，不为double 就用error 来表示,
- react/jsx-uses-react:2, 配合 plugins:['react'], 表示使用了eslint-plugin-react 中的的规则，但是重写jsx-uses-react 。
extends 可定义继承规则，继承插件中的共享配置等，如果没有这个属性，可通过在rules/plugins 中添加规则实现同样的功能。插件中的共享配置是一个 npm 包，它输出一个配置对象。要确保这个包安装在 ESLint 能请求到的目录下。也可以是到基本配置文件的绝对路径，也可以是相对路径，比如"./node_modules/coding-standard/eslintDefaults.js"
- 继承的核心规则有 "standard", "eslint:recommended"等，extends 属性值可以省略包名的前缀 eslint-config-，比如 “eslint-config-standard”，
- 继承插件，extends 属性值可以由以下组成：plugin:包名 (省略了前缀，比如，react)/配置名称 (比如 recommended)，比如pluging:react/recommemnded, plugins 属性值可以省略包名的前缀 eslint-plugin-, 如 eslint-plugin-react

特别提醒: 还可以通过注释来对某些代码禁用规则，具体看上面的文档

eslint 结合webpack

在我们的项目中，希望在打包代码之前会自动实现eslint 对每个文件的检查，而不是通过我们手动地去对每个文件进行eslint 检查

我们知道webpack 打包模块之前都会将模块交给对应的loader进行处理，eslint 就可以通过loader 的形式集成到webpack 当中。有以下两种方式，下面这两种方式是等价的。

// webpack.config.js
use:['babel-loader', 'eslint-loader']

// webpack.config.js
use: 'eslint-loader'
enforce: 'pre'

对于上面的配置，一般的项目是ok 的，但是对于使用了react 的项目，就会报出react 被定义了未被使用的错误，具体可以看下面代码，代码中定义的react 当从字面来看确实没有被使用到，但是他是在jsx 编译之后所必须用到的变量：对于这种特殊的语法，需要使用插件eslint-plugin-react，安装完成之后，就可以在node_modules 下面找到这个文件夹，里面的index.js 文件里面就会有他对应的规则，这些规则都是针对react的

yarn add eslint-plugin-react

安装完插件之后，如果要使用这个插件下面的规则，就需要引用这个插件，并启用对应的规则

// eslintrc
rules: {
'react/jsx-uses-react': 2, // 启用这个规则，避免react 声明未被引用的问题
'react/jsx-uses-var': 2 // 启用这个规则，避免App声明未被引用的问题
}
plugins: ['react']

不过对于大多数的eslint 插件，一般都会提供一个共享的配置，从而降低使用成本，而eslint-plugin-react这个插件导出了两个共享的配置，分别是recomended和all, 而这些共享配置就可以通过继承extends来使用,具体语法由以下组成：plugin:包名 (省略了前缀，比如，react)/配置名称 (比如 recommended)

//eslintrc
extends: [
  'plugin:react/recommemnded'
]

stylelint

最主流的css lint 工具配置文件 .stylelintrc.js

prettier 的使用

vscode 结合eslint 的使用

如果是使用vscode 作为编辑器，可以添加eslint 插件，同时在项目文件夹下面，添加一个 .vscode/settings.json 文件，并在里面添加如下代码：

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

这段代码，就会根据当前目录下面的 .eslintrc.js 文件，在用户保存的时候直接将文件格式化，在没有配置eslint-loader 的时候也可以使用格式文件

规范化 lint