Vue-cli4 配置自动保存 eslint 修改

在前端开发中，代码规范是非常重要的，它不仅可以提高代码的可读性，也可以减少 bug 的出现。而 eslint 就是一个非常流行的代码规范检查工具。然而，如果每次修改代码后都需要手动执行 eslint 检查，那么就会大大降低开发效率。本文将介绍如何在 Vue-cli4 中配置自动保存 eslint 修改，从而提高开发效率。

1. 安装 eslint-plugin-prettier 和 eslint-config-prettier

在开始配置之前，我们需要先安装两个依赖项：eslint-plugin-prettier 和 eslint-config-prettier。这两个依赖项可以让 eslint 和 prettier 配合使用，从而达到自动格式化代码的目的。

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

2. 配置 .eslintrc.js 文件

在项目根目录下创建 .eslintrc.js 文件，并配置以下内容：

// javascriptcn.com 代码示例
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', 'prettier'],
  plugins: ['prettier'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': 'error',
  },
};

以上配置中，我们使用了 eslint:recommended 和 plugin:vue/essential 两个预设规则，同时也加入了 prettier 插件。其中，prettier/prettier 规则用于检查代码格式是否符合 prettier 的规范。

3. 配置 VS Code

在 VS Code 中，我们需要安装 eslint 和 prettier 插件。安装完成后，在 VS Code 的设置中搜索 eslint，并将 Auto Fix On Save 设置为 true。这样，每次保存代码时，eslint 就会自动检查并格式化代码。

4. 配置 Vue-cli4

在 Vue-cli4 中，我们需要修改 vue.config.js 文件。具体操作如下：

// javascriptcn.com 代码示例
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .loader('eslint-loader')
      .tap((options) => {
        options.fix = true;
        return options;
      });
  },
};

以上配置中，我们使用了 chainWebpack 钩子来修改 webpack 配置。具体来说，我们添加了一个 eslint 规则，并将 options.fix 设置为 true。这样，每次保存代码时，eslint 就会自动检查并格式化代码。

5. 示例代码

下面是一个示例代码，你可以将其复制到你的项目中并进行修改：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'Hello, world!',
      message: 'Welcome to my app!',
    };
  },
};
</script>

<style lang="scss">
h1 {
  color: red;
}
p {
  font-size: 16px;
}
</style>

6. 总结

通过本文的介绍，我们学习了如何在 Vue-cli4 中配置自动保存 eslint 修改。这样，我们就可以在开发过程中自动格式化代码，从而提高开发效率。同时，我们也学习了如何使用 eslint 和 prettier 配合使用，从而达到更好的代码规范。希望本文对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d57e895b1f8cacd70e83c