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

我会带着你远行 2023-10-11 16:53 18阅读 0赞

> 当写React、Vue等大项目、或者使用框架搭建小程序时，为了便于多人协作开发，常常会引入ESlint和Preitter来规范代码书写，使得不同的开发者写出风格统一的代码。  
>   
> 对于原生小程序项目，或许不需要使用webpack等模块打包工具，但同样可以配置合适的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官网][ESLint]
 *  [Prettier官网][Prettier]

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

### 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`命令来检测文件

[ESLint]: https://eslint.bootcss.com/docs/rules/
[Prettier]: https://prettier.io/docs/en/options.html