小程序集成eslint和prettier,代碼風格統一

微信小程序、支付寶小程序、釘釘小程序均可以適用
LZ用的是釘釘小程序,很完美
首先你要有vscode這個html

首先目錄結構是這樣的
image.png
必定要src裏面放小程序的文件夾,若是所有放在一塊兒,會致使小程序上傳過大的問題,我剛開始就吃了這個坑,竟然打包了40多m,根本傳不上去,後來放在src文件夾下面就解決了,讓小程序直接去訪問src文件夾node

{
  "private": true,
  "name": "dingproject",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "precommit": "lint-staged",
    "clean": "rm -rf dist/*",
    "lint": "eslint -c .eslintrc ./src"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^3.12.1",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-html": "^3.0.1",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-prettier": "^2.3.1",
    "lint-staged": "^6.0.0",
    "prettier": "^1.8.2"
  },
  "lint-staged": {
    "src/**/*.js": [
      "eslint --fix",
      "git add"
    ]
  }
}

.eslintrc 文件

{
    "extends": [
      "prettier",
      "prettier/standard"
    ],
    "useTabs": false,
    //插件
    "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
    }
  }

而後 npm i 安裝一下便可
npm run lintgit

如何讓vscode 能夠保存自動並校準文件,能夠參考我下一篇文章es6

如何讓eslint自動保存並修改不合規範的文件npm

相關文章
相關標籤/搜索