共计 2210 个字符，预计需要花费 6 分钟才能阅读完成。
eslint 能够用于标准咱们的编码，使得我的项目中的代码格调统一，更利于浏览和保护，而 prettier 能够在当咱们代码不合乎 eslint 标准是进行局部主动修复。
eslint
通过 npm install eslint -D 装置 eslint，而后执行 npx eslint --init 初始化配置文件
在执行 init 操作的时候，eslint 生成配置文件会问你一些问题
- 想怎么来应用 eslint
- 模块化的形式（Es module、commonjs）
- 抉择哪一种框架（React、Vue）
- 是否须要 TypeScript
- 我的项目运行在浏览器还是客户端
- 指定怎么的代码标准（Airbnb、Standard、Google、XO）
- 生成的配置文件类型（JavaScript、YAML、JSON）
顺次抉择实现后再让它主动装置所须要的依赖。
在这些问题中，我抉择了 应用 eslint 时查看代码发现问题后并揭示、模块化应用 commonjs、不须要框架和 TypeScript、我的项目运行在浏览器端，应用 airbnb 编码标准，生成配置文件为 JavaScript，这样就生成了 eslint 配置文件 .eslintrc.js
- env 示意以后 eslint 代码运行在什么环境
- extends 示意继承的规定
- parserOptions 里定义了 反对的 ecmaScript 版本
- rules 中能够自定义规定
有了这些规定之后，通过命令 npx eslint ./src/index.js 来校验文件，根据 airbnb 的规范，五行代码检测出了六个谬误和一个正告。
通过命令一个文件一个文件检测效率会比拟低，在我的项目中能够间接配置 loader 来解决
eslint-loader
通过 npm install eslint-loader -D 装置依赖，在 webpack.config.js 中配置 eslint-loader 对立解决 js 文件
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['eslint-loader'],
},
],
}, 执行 npm run build，当文件有谬误时，将不会通过编译
vscode 插件
既然 eslint 检测出这么多谬误，那咱们得解决问题，使代码符合规范。
以上报错和正告能够演绎为
- quotes：Strings must use singlequote，示意必须应用单引号
- semi：Missing semicolon，示意行尾少了分号
- no-unused-vars，定义变量但没有应用
- no-console，不冀望应用 console 语句
- import/prefer-default-export，倡议应用默认导出
其中无论是 eslint 工具还是 eslint-loader 报错代码都有提醒 “4 errors and 0 warnings potentially fixable with the ‘–fix’ option”。
那咱们通过 –fix 解决这个文件，通过 npx eslint --fix ./src/index.js 来执行，发现此时只剩工具帮咱们修复了局部谬误，包含行尾分号以及字符串单引号。
像下面的代码，在编写的过程中可能也不晓得哪里有谬误，如果平时编写代码的时候，能有不符合规范的谬误提醒，以及对于局部不标准代码能主动修复的话，比方双引号转换单引号，会给开发带来比拟大的便当。
vscode 中插件能够达到这样的成果，ESLint 用于报错揭示，Prettier 用于代码格式化。
ESLint 工具会读取本地的 eslint 配置，对文件进行报错和正告，标红表明 ”error”，黄色下划线示意 ”warn”。
prettier 主动格式化代码须要咱们做一些配置，能够在 vscode 中通过 Settings 设置代码格式化规定，抉择后会主动增加到 setting.json 中，比方单引号代替双引号。
prettier 还能够在配置文件 .prettierrc 中进行我的项目的代码格式化标准，比方宽度超过 100 主动换行。
配置实现后，就能够通过快捷键主动格式化啦~
修复谬误
无奈通过工具主动修复的代码就只能本人手动来解决，咱们能够通过三种形式来修复谬误
- 批改谬误源代码
- 将谬误揭示敞开或者设置为 ”warn”
- 将谬误配置为我的项目中所须要的格局
在 .eslintrc.js 里 rules 属性中配置自定义的规定，规定有三种抉择形式，”off” 或 0 代表敞开校验，”warn” 或 1 代表不报错只正告，”error” 或 2 代表报错
- 比方不心愿有 console 语句，间接将 console 语句移除
- 定义变量但没有应用不要报错只是正告 ‘no-unused-vars’: ‘warn’
- 应用双引号报错，默认是单引号，但咱们批改规定我的项目中的字符串就应用双引号 quotes: [2, ‘double’]
通过 –fix 或者 prettier 主动修复之后，还剩两个谬误和一个正告
正告不影响文件的编译，另外两个报错能够设置为敞开和正告
rules: {
'no-unused-vars': 'warn',
'import/prefer-default-export': 0,
}, 再次运行 npm run build，只剩两个正告，能够通过编译，代码也不再标红。
eslint 和 prettier 在前端工程化方向有很大的作用，能够缩小开发谬误，帮忙团队中造成比拟统一的编码格调。
以上就是 eslint 和 prettier 相干的总结，更多无关 webpack 的内容能够参考我其它的博文，继续更新中~