如何将Vue项目中的ESLint和Prettier规范应用于代码检查？

本文共计3366个文字，预计阅读时间需要14分钟。

1. 团队协作中，为避免低级Bug及团队协作时代码风格不一致造成的困扰与影响，会先制定编码规范。使用Lint工具和代码风格检测工具，可辅助执行编码规范。

1.前言

  在团队协作中，为避免低级 Bug、以及团队协作时不同代码风格对彼此造成的困扰与影响，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。EsLint 则是其中一个很好的工具。

EsLint 提供以下支持：

• ES6
• AngularJS
• JSX
• Style 检查
• 自定义错误和提示

EsLint 提供以下几种校验：

• 语法错误校验
• 不重要或丢失的标点符号，如分号
• 未被使用的参数提醒
• 漏掉的结束符，如}
• 确保样式的统一规则，如 sass 或者 less
• 检查变量的命名
• 影响性能的代码提醒，如 v-if 和 v-for 同时使用

2.eslint 配置

2.1 代码规范

  本项目基本规范是依托于 vue 官方的eslint-plugin-vue。并使用 Prettier 格式化代码，使样式与规则保持一致。