ESLint

不管是多人合作还是个人项目,代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。

配置项

所有的配置文件都在 .eslintrc.js 中。本项目基本规范是依托于 vue 官方的 eslint 规则 eslint-config-vue 做了少许的修改。大家可以按照自己的需求进行定制化配置。

比如:我个人或者项目组习惯于使用两个空格,但你可能觉得四个空格更顺眼,你可以做如下修改。进入项目 .eslintrc.js 中,找到 indent,然后修改为 4 即可。 还有各种各样的配置信息,详情见 ESLint 文档

v3.8.1版本之后,增加了eslint-plugin-vue来更好的校验 vue 相关代码。

默认情况下使用了最严格的plugin:vue/recommended来校验代码,若你觉得太严格可自行修改。

  1. // https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js
  2. module.exports = {
  3. extends: ['plugin:vue/recommended', 'eslint:recommended']
  4. //你可以修改为 extends: ['plugin:vue/essential', 'eslint:recommended']
  5. }

取消 ESLint 校验

如果你实在是不想使用 ESLint 校验,只要找到 config/index.js 文件。将 useEslint: true 设置为 useEslint: false 即可

vscode 配置 ESLint

这所谓工欲善其事,必先利其器,个人推荐 eslint+vscode 来写 vue,绝对有种飞一般的感觉。效果如图:eslintGif.gif

每次保存,vscode 就能标红不符合 eslint 规则的地方,同时还会做一些简单的自我修正。安装步骤如下:

首先安装 eslint 插件eslint1.png

安装并配置完成 ESLint 后,我们继续回到 VSCode 进行扩展设置,依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置

  1. {
  2. "files.autoSave": "off",
  3. "eslint.validate": [
  4. "javascript",
  5. "javascriptreact",
  6. "vue-html",
  7. {
  8. "language": "vue",
  9. "autoFix": true
  10. }
  11. ],
  12. "eslint.run": "onSave",
  13. "eslint.autoFixOnSave": true
  14. }

这样每次保存的时候就可以根据根目录下.eslintrc.js 你配置的 eslint 规则来检查和做一些简单的 fix。每个人和团队都有自己的代码规范,统一就好了,去打造一份属于自己的 eslint 规则上传到 npm 吧,如饿了么团队的 config,vue 的 config

vscode 插件和配置推荐

webpack

你还可以通过配置 eslint-loader 让你有不符合 eslint的时候在命令行或者界面里提示你有什么错误。

  1. {
  2. test: /\.(js|vue)$/,
  3. loader: 'eslint-loader',
  4. enforce: 'pre',
  5. include: [resolve('src'), resolve('test')],
  6. options: {
  7. formatter: require('eslint-friendly-formatter'),
  8. emitWarning: !config.dev.showEslintErrorsInOverlay
  9. }
  10. }

TIP

showEslintErrorsInOverlay 这个变量可以控制错误提示是否需要在浏览器界面中提示。

自动修复

  1. npm run lint -- --fix

原文: https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html