@tencent/eslint-config-wx-vue

用于vue体系的eslint插件，基于standard规范与eslint-plugin-vue

查看源码

快速开始

• 安装

tnpm i @tencent/eslint-config-wx-vue

• 在package.json中的eslintConfig字段，或者项目目录下的.eslintrc文件中设置

{
  "extends": ["wx-vue"]
}

Wego项目如何接入

个人倾向于在开发阶段打开eslint功能，强制代码检查以增进质量以及养成良好的习惯，下面介绍这一过程，详情请参考@vue/cli-plugin-eslint

• 进入工作目录${projName}/static/，安装依赖

tnpm i @vue/cli-plugin-eslint @tencent/eslint-config-wx-vue

• 修改vue.config.js

修改${projName}/static/vue.config.js

{
  lintOnSave: 'error',
  devServer: {
    // 全屏显示编译错误的信息
    overlay: true
  }
}

• 在${projName}/static/package.json中设置

  "eslintConfig": {
    "extends": ["wx-vue"]
  },
  "eslintIgnore": [
    "src/pages/demo/*",
    "src/pages/chain_time_consuming/*",
    "src/public_components/*",
    "src/public_js/*",
    "src/public_stores/*",
    "release/*",
    "mock/*"
  ],

eslintIgnore可以配置忽略掉eslint的范围，我的代码放在src/pages/call，标准的SPA项目，只需要检查src/pages/call里面的代码即可，其余目录都忽略，因此在eslintIgnore里面都加上

如有需要，可在eslintConfig字段进行深度配置，详情请参考Configuring ESLint

• 重启dev server以生效eslint配置，到http://webb.oa.com/#/app?app_name=${projName}运行cmd dev命令重启

最佳实践

• **[必备]**与编辑器结合

请务必安装相关编辑器插件，可实时显示出哪里有报错，甚至是一键修复错误，保存代码时可修复错误等

有些规则比如是一行行末不允许有空格，可以给编辑器设置保存代码的时候自动去掉多余空格等诸如此类的

• 合理使用eslint disable

disable掉某一行

const a = 3; // eslint-disable-line

disable掉某个文件

/* eslint-disable */

!function () { ... }

disable掉全部，项目目录下放置文件.eslintignore，内容:

*

• 实时查看eslint报错信息，跑到开发机对应项目路径下，运行npm run dev或者运行tail -f /home/qspace/log/error/${projName}_webpack实时查看控制台编译报错信息，甚至可以本地开发

• eslint修复

npm i eslint -g

eslint --fix src/pages/somemodule

变更日志

变更日志