微信小程序集成 ESLint + Preitter 插件

2022年01月10日 13:14

当写React、Vue等大项目、或者使用框架搭建小程序时，为了便于多人协作开发，常常会引入ESlint和Preitter来规范代码书写，使得不同的开发者写出风格统一的代码。

对于原生小程序项目，或许不需要使用webpack等模块打包工具，但同样可以配置合适的ESlint规范和Preitter规范，来处理统一代码风格。

微信小程序集成 ESLint + Preitter 插件

集成依赖

在package.json文件集成如下依赖：

"devDependencies": {
  "@babel/core": "^7.16.7",
  "@babel/eslint-parser": "^7.16.5",
  "eslint": "^8.5.0",
  "eslint-plugin-prettier": "^4.0.0",
  "prettier": "^2.5.1"
}
复制代码

安装依赖

npm install
复制代码

新建.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  parser: '@babel/eslint-parser',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      // lambda表达式
      arrowFunctions: true,
      // 解构赋值
      destructuring: true,
      // class
      classes: true,
    },
  },
  globals: {
    wx: true,
    App: true,
    Page: true,
    getCurrentPages: true,
    getApp: true,
    Component: true,
    requirePlugin: true,
    requireMiniProgram: true,
  },
  rules: {},
}
复制代码

新建.prettierrc.js文件

module.exports = {

}
复制代码

新建.babel.config.js文件

module.exports = {
  presets: [],
  plugins: [],
}
复制代码

配置规则

大家可以到官网配置属于自己团队的代码风格：

或者可以参照我团队的代码风格：

ESLint

rules: {
  'prefer-const': 1, // 要求使用 const 声明那些声明后不再被修改的变量
  'max-len': 0, // 强制一行的最大长度
  'guard-for-in': 0, // 要求 for-in 循环中有一个 if 语句
  'no-console': 'off', // 禁用 console
  'no-debugger': 'off', // 禁用 debugger
  'no-plusplus': 0, // 禁止使用++，--
  'no-extra-semi': 0, // 和prettier冲突
  'import/extensions': 0, // import不需要写文件扩展名
  'no-underscore-dangle': 0, // 禁止标识符中有悬空下划线
  'no-restricted-syntax': 0, // 禁用特定的语法
  'consistent-return': 'off', // 要求 return 语句要么总是指定返回的值，要么不指定
  semi: ['error', 'never'], // 要求或禁止使用分号代替 ASI
  'no-prototype-builtins': 'off', // 禁止直接调用 Object.prototypes 的内置属性
  'class-methods-use-this': 'off', // 强制类方法使用 this
  'template-curly-spacing': 'off', // 要求或禁止模板字符串中的嵌入表达式周围空格的使用
  'linebreak-style': [0, 'error', 'windows'], // 强制使用一致的换行风格
  'arrow-parens': ['error', 'as-needed'], // 要求箭头函数的参数使用圆括号
  'no-param-reassign': ['error', { props: false }], // 禁止对 function 的参数进行重新赋值
  indent: [
    'warn',
    2,
    {
      ignoredNodes: ['TemplateLiteral'],
      SwitchCase: 1,
    },
  ],
},
复制代码

Preitter

  singleQuote: true, // 字符串是否使用单引号，默认为false，使用双引号
  semi: false, // 行位是否使用分号，默认为true
  trailingComma: 'all', // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  printWidth: 120,
  arrowParens: 'avoid'
复制代码

常见问题

Parsing error: Unexpected token = ***

问题原因：开发环境与ESLint当前的解析功能不兼容

解决方案：

1）安装@babel/eslint-parser与@babel/core

npm i @babel/eslint-parser @babel/core --save-dev
复制代码

2）创建.babel.config.js文件

module.exports = {
  presets: [],
  plugins: [],
}
复制代码

3）配置解析器

module.exports = {
  parser: '@babel/eslint-parser'
}
复制代码

Error: Must use import to load ES Module

问题原因：

使用已弃用的babel-eslint解析器不支持ES6模块，可以尝试更新。

解决方法：

1）在package.json文件中，将行"babel-eslint"更新为"@babel/eslint-parser": "^7.16.5"

2）从文件夹中的终端/命令提示符中运行npm i

3）在.eslintrc中，将解析器行"parser": "babel-eslint"更新为"parser": "@babel/eslint-parser"

4）如果没有创建.babel.config.js，可以在.eslintrc文件中，添加"requireConfigFile": false

parserOptions: {
  ecmaVersion: 2018,
  sourceType: 'module',
  ecmaFeatures: {
    // lambda表达式
    arrowFunctions: true,
    // 解构赋值
    destructuring: true,
    // class
    classes: true,
  },
  requireConfigFile: false
},
复制代码

5）运行npm run lint命令来检测文件