解释 Vue CLI 如何集成 `eslint-loader` 和 `prettier-loader`，实现代码风格检查和格式化。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是今天的主讲人，老码农。今天咱们聊聊 Vue CLI 如何把 eslint-loader 和 prettier-loader 这俩兄弟安排进项目里，让它们帮咱们检查代码风格，顺便格式化代码，让代码看起来赏心悦目，避免代码 review 的时候因为风格问题吵起来。

咱们先从概念入手，然后一步步深入，最后手把手教你配置。准备好了吗？ Let’s go!

第一部分：概念扫盲，知己知彼

在深入 Vue CLI 之前，咱们先搞清楚几个概念：

ESLint: 这玩意儿是个 JavaScript 代码检查工具，它能找出你代码里潜在的问题，比如未使用的变量、不符合规范的写法等等。简单来说，就是个代码警察，帮你揪出坏习惯。
Prettier: 这个家伙是个代码格式化工具，能自动帮你把代码格式化成统一的风格，比如缩进、空格、换行等等。就像一个高级理发师，帮你把代码打理得整整齐齐。
Webpack: Vue CLI 背后的大佬，一个模块打包器。它会把你的代码、图片、样式等等都打包成浏览器能识别的东西。 eslint-loader 和 prettier-loader 就是 Webpack 的插件，在打包过程中发挥作用。
Loader: Webpack 的核心概念之一，loader 可以理解为转换器，它会把 Webpack 识别不了的文件转换成 Webpack 能识别的模块。比如，babel-loader 把 ES6+ 代码转换成 ES5 代码，css-loader 处理 CSS 文件。
Vue CLI: Vue 官方提供的脚手架工具，能帮你快速搭建 Vue 项目，内置了很多常用的配置，省去了你手动配置 Webpack 的麻烦。
eslint-loader: 一个 Webpack loader，它会在 Webpack 打包的过程中，用 ESLint 检查你的代码。如果发现问题，就会报错或警告。
prettier-loader: 一个 Webpack loader，它会在 Webpack 打包的过程中，用 Prettier 格式化你的代码。它通常和 eslint-loader 配合使用，先检查代码，再格式化。

第二部分：为什么要用 eslint-loader 和 prettier-loader？

为什么要费劲巴拉地搞这些东西呢？简单来说，为了提高开发效率和代码质量：

统一代码风格: 团队协作的时候，每个人都有自己的编码习惯，如果没有统一的规范，代码风格就会五花八门，可读性很差。 eslint-loader 和 prettier-loader 可以强制统一代码风格，让团队成员的代码看起来像一个人写的。
减少代码 review 的成本: 代码风格统一了，代码 review 的时候就可以把精力放在业务逻辑上，而不是纠结于空格和缩进。
及早发现问题: ESLint 能在开发阶段就发现一些潜在的问题，避免把 bug 带到生产环境。
提高代码可维护性: 风格统一的代码更容易阅读和理解，也更容易维护。

第三部分： Vue CLI 是如何集成 ESLint 的？

Vue CLI 默认集成了 ESLint，你可以通过以下方式配置：

创建项目时选择 ESLint: 在使用 vue create 命令创建项目的时候，会让你选择 ESLint 的配置。你可以选择不同的规则集，比如 Airbnb、Standard、Prettier 等等。
```
vue create my-project
```
在选择特性的时候，务必勾选 ESLint。
.eslintrc.js 配置文件: 选择 ESLint 后，Vue CLI 会在项目根目录下生成一个 .eslintrc.js 文件，这个文件就是 ESLint 的配置文件。你可以在这里配置 ESLint 的规则、插件、扩展等等。

一个典型的 .eslintrc.js 文件可能长这样：
```
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}
```
- root: true: 表示这是根配置文件，ESLint 会从这里开始查找配置。
- env: 指定代码运行的环境，比如 Node.js、浏览器等等。
- extends: 继承现有的规则集，比如 'plugin:vue/essential'、'@vue/standard'。
- parserOptions: 指定代码解析器，比如 babel-eslint。
- rules: 自定义规则，可以覆盖或扩展 extends 中的规则。
package.json 中的 scripts: Vue CLI 会在 package.json 中添加一些 scripts，方便你运行 ESLint。
```
{
  "scripts": {
    "lint": "vue-cli-service lint"
  }
}
```
你可以通过 npm run lint 命令来运行 ESLint。
vue.config.js: Vue CLI 的配置文件，你可以在这里修改 Webpack 的配置。虽然 Vue CLI 默认集成了 ESLint，但你也可以在这里自定义 eslint-loader 的配置。
```
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('eslint')
      .test(/.(vue|(j|t)sx?)$/)
      .use('eslint-loader')
        .loader('eslint-loader')
        .options({
          fix: true // 自动修复 ESLint 发现的问题
        })
        .end()
  }
}
```
- chainWebpack: 允许你链式地修改 Webpack 的配置。
- config.module.rule('eslint'): 添加一个名为 eslint 的规则。
- .test(/.(vue|(j|t)sx?)$/): 指定哪些文件需要经过 ESLint 检查。
- .use('eslint-loader').loader('eslint-loader'): 使用 eslint-loader。
- .options({ fix: true }): 配置 eslint-loader 的选项，fix: true 表示自动修复 ESLint 发现的问题。

第四部分：集成 Prettier

Vue CLI 并没有默认集成 Prettier，你需要手动安装和配置。

安装 Prettier 和相关依赖:
```
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
```
- prettier: Prettier 本身。
- eslint-plugin-prettier: 让 ESLint 使用 Prettier 的规则。
- eslint-config-prettier: 禁用所有与 Prettier 冲突的 ESLint 规则。

配置 .eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': 'error' // 将 Prettier 的规则设置为 error 级别
  }
}

extends: ['plugin:prettier/recommended']: 添加 Prettier 插件，它会自动配置 eslint-plugin-prettier 和 eslint-config-prettier。
rules: { 'prettier/prettier': 'error' }: 将 Prettier 的规则设置为 error 级别，这样 ESLint 就会把 Prettier 发现的问题当作错误来处理。

创建 .prettierrc.js 配置文件 (可选):

如果你想自定义 Prettier 的规则，可以创建一个 .prettierrc.js 文件，比如：
```
module.exports = {
  semi: false, // 去掉分号
  singleQuote: true, // 使用单引号
  trailingComma: 'all', // 尽可能添加尾随逗号
  printWidth: 120, // 超过120个字符就换行
}
```
- semi: false: 去掉分号。
- singleQuote: true: 使用单引号。
- trailingComma: 'all': 尽可能添加尾随逗号。
- printWidth: 120: 超过 120 个字符就换行。
当然，你也可以使用 .prettierrc.json 或 .prettierrc.yml 文件，甚至直接在 package.json 中配置 Prettier。

配置 vue.config.js (可选，但推荐):

虽然 ESLint 已经集成了 Prettier，但为了更高效地格式化代码，你可以使用 prettier-loader。

npm install --save-dev prettier-loader

然后，在 vue.config.js 中添加以下配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('eslint')
      .test(/.(vue|(j|t)sx?)$/)
      .use('eslint-loader')
        .loader('eslint-loader')
        .options({
          fix: true // 自动修复 ESLint 发现的问题
        })
        .end()
      .rule('prettier')  // 添加 Prettier loader
      .test(/.(vue|(j|t)sx?)$/)
      .use('prettier-loader')
        .loader('prettier-loader')
        .end()
  }
}

这样，Webpack 在打包的过程中，会先用 ESLint 检查代码，然后用 Prettier 格式化代码。注意，prettier-loader 一般放在 eslint-loader 之后，顺序很重要。

第五部分：解决冲突，和谐共处

ESLint 和 Prettier 都是代码检查和格式化工具，但它们关注的点不一样，可能会出现冲突。比如，ESLint 可能会要求你使用双引号，而 Prettier 可能会强制你使用单引号。为了解决这些冲突，我们需要一些技巧：

使用 eslint-config-prettier: 这个插件会禁用所有与 Prettier 冲突的 ESLint 规则，让 Prettier 拥有最高的决定权。确保在 .eslintrc.js 的 extends 中添加了 'eslint-config-prettier'。
配置 Prettier 的规则: 通过 .prettierrc.js 文件，你可以自定义 Prettier 的规则，让它符合你的团队规范。
忽略不需要检查的文件: 有些文件可能不需要经过 ESLint 或 Prettier 检查，比如一些自动生成的文件或者第三方库。你可以通过 .eslintignore 和 .prettierignore 文件来忽略这些文件。

第六部分：实际案例，手把手教你配置

咱们来个实际的例子，演示如何在一个新的 Vue CLI 项目中集成 ESLint 和 Prettier。

创建 Vue CLI 项目:
```
vue create my-vue-project
```
在选择特性的时候，务必勾选 ESLint，并选择你喜欢的规则集，比如 Standard 或 Airbnb。

安装 Prettier 和相关依赖:

cd my-vue-project
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier prettier-loader

配置 .eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard', // 或者 '@vue/airbnb'，取决于你创建项目时选择的规则集
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': 'error'
  }
}

创建 .prettierrc.js (可选):

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 120,
}

配置 vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('eslint')
      .test(/.(vue|(j|t)sx?)$/)
      .use('eslint-loader')
        .loader('eslint-loader')
        .options({
          fix: true
        })
        .end()
      .rule('prettier')
      .test(/.(vue|(j|t)sx?)$/)
      .use('prettier-loader')
        .loader('prettier-loader')
        .end()
  }
}

运行 npm run lint:

运行这个命令，ESLint 和 Prettier 就会检查你的代码，并自动修复一些问题。

第七部分：进阶技巧，更上一层楼

Editor Integration: 大多数代码编辑器都支持 ESLint 和 Prettier 插件，可以在你编写代码的时候实时检查和格式化代码。比如，VS Code 有 ESLint 和 Prettier 插件，Sublime Text 有 SublimeLinter 和 Pretty JSON 插件。
Git Hooks: 使用 Git Hooks，可以在你提交代码之前自动运行 ESLint 和 Prettier，确保提交的代码符合规范。可以使用 husky 和 lint-staged 这两个工具来实现 Git Hooks。
CI/CD Integration: 在 CI/CD 流程中集成 ESLint 和 Prettier，可以在代码合并到主分支之前自动检查和格式化代码，确保代码质量。

总结

工具	作用	配置方式
ESLint	代码检查，发现潜在问题	1. 创建项目时选择 ESLint； 2. 配置 `.eslintrc.js` 文件； 3. 在 `package.json` 中添加 scripts； 4. 在 `vue.config.js` 中自定义 `eslint-loader` 的配置。
Prettier	代码格式化，统一代码风格	1. 安装 Prettier 和相关依赖； 2. 配置 `.eslintrc.js` 文件； 3. 创建 `.prettierrc.js` 配置文件 (可选)； 4. 配置 `vue.config.js`，使用 `prettier-loader` (推荐)。
`eslint-loader`	在 Webpack 打包过程中使用 ESLint 检查代码	在 `vue.config.js` 中配置，通过 `chainWebpack` 修改 Webpack 的配置。
`prettier-loader`	在 Webpack 打包过程中使用 Prettier 格式化代码	在 `vue.config.js` 中配置，通过 `chainWebpack` 修改 Webpack 的配置，并确保 `prettier-loader` 在 `eslint-loader` 之后。

今天咱们就聊到这里，希望大家通过今天的学习，能够熟练地使用 eslint-loader 和 prettier-loader，让你的代码更加规范、美观。记住，好的代码风格是程序员的基本素养，也是团队协作的基础。下课！

发表回复 取消回复

发表回复取消回复