如果不使用wepy,小程序开发应该怎么引入esLint
发布于 5 年前 作者 rqin 1394 次浏览 来自 问答

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

6 回复

@杨泉的方案挺好用的

项目目录结构

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项目里面用的,现在平移到小程序里面,已经用了一段时间了,效果很好。

非常感谢

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

现在写前端还不拥抱prettier么

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

回到顶部