收藏
回答

如果不使用wepy,小程序开发应该怎么引入esLint

因为项目有多个人在开发,代码比较乱.现在想用eslint来规范下,但是似乎直接开发不支持npm,我看了下eslint的包大该有2M多,我们项目代码也已经有2M多了,还会继续增加.感觉好像不能直接把包放到代码里.我想问一下有什么办法可以来用esLint来规范小程序的开发代码呢

回答关注问题邀请回答
收藏

6 个回答

  • 杨泉
    杨泉
    2018-02-08

    项目目录结构

    src

    package.json

    .eslinrc

    .eslintignore


    src里面放小程序的代码结构,也就是说小程序打开的目录是src


    package.json

    {
      "private": true,
      "entry": {},
      "dependencies": {},
      "devDependencies": {
        "babel-eslint": "^8.2.1",
        "eslint": "^3.12.1",
        "eslint-config-prettier": "^2.9.0",
        "eslint-plugin-import": "^2.8.0",
        "eslint-plugin-prettier": "^2.3.1",
        "lint-staged": "^6.0.0",
        "prettier": "^1.8.2"
      },
      "scripts": {
        "precommit": "lint-staged",
        "clean": "rm -rf dist/*",
        "lint": "eslint -c .eslintrc ./src"
      },
      "lint-staged": {
        "src/**/*.js": [
          "eslint --fix",
          "git add"
        ]
      }
    }



    .eslintrc


    {
      "extends": [
        "prettier",
        "prettier/standard"
      ],
     
      //插件
      "plugins": [
        "prettier",
      ],
     
      //配置解析器
      "parser": "babel-eslint",
      "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
      },
     
      "env": {//脚本目标的运行环境
        "browser": true,
        "node": true,
        "es6": true,
        "commonjs": true
      },
     
      //全局变量
      "globals": {
          "__DEV__": true,
          "__WECHAT__": true,
          "__ALIPAY__": true,
          "App": true,
          "Page": true,
          "Component": true,
          "Behavior": true,
          "wx": true,
          "getApp": true,
      },
     
      //规则,只用插件:插件名/规则
      "rules": {
          "prettier/prettier": "error",
          "no-console": 0,
      }
    }


    然后yarn install,


    yarn run lint


    另外这个配置

    1. eslint走的是prettier规则, prettier是啥可以自行google

    2. git commit的时候有pre-commit钩子,会自行对stage的文件以prettier规则进行lint并自动修复。当然对于一些逻辑的lint 错误,比如引入变量没使用,是不会自动修复的。但是会提交失败,需要提交人员手动修复完事后提交方可。


    这是react项目里面用的,现在平移到小程序里面,已经用了一段时间了,效果很好。


    2018-02-08
    赞同 1
    回复 2
    • nigel
      nigel
      2018-09-21

      这个可以在小程序中实时检查代码嘛。

      2018-09-21
      回复
    • nigel
      nigel
      2018-09-21回复nigel

      公司小程序之前没有用eslint,已经开发了一部分,后期引入eslint会不会对之前代码有影响

      2018-09-21
      回复
  • 王文亮
    王文亮
    2019-11-06

    不错不错另外还参考了这个:https://www.jianshu.com/p/cdd749c624d9准备在项目中试用

    2019-11-06
    赞同
    回复
  • 给太阳一个微笑。
    给太阳一个微笑。
    2018-08-28

    @杨泉的方案挺好用的

    2018-08-28
    赞同
    回复
  • 杨泉
    杨泉
    2018-03-27

    哎,按照上述用吧,很好用的

    现在写前端还不拥抱prettier么

    2018-03-27
    赞同
    回复
  • morganfly
    morganfly
    2018-02-08

    非常感谢

    2018-02-08
    赞同
    回复
  • morganfly
    morganfly
    2018-01-12

    顶一下

    2018-01-12
    赞同
    回复
登录 后发表内容