微信小程序配置prettier+eslint

虽然微信开发者工具是基于vscode魔改的.但是由于版本过低,导致很多插件也用不上新版本.所以在微信开发者工具限制的版本下使用的prettier,eslint也是有版本要求.

本文主要就是记录一下需要的版本号

1.微信开发者工具安装插件

2.package.json中添加以下依赖及安装依赖

  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/eslint-parser": "^7.16.5",
    "eslint": "^7.28.0",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.1.3",
    "eslint-plugin-promise": "^6.2.0",
    "prettier": "^2.5.1"
  }

安装依赖 npm install 就不详细说明.

3.根目录下创建.eslintrc,.prettierrc

.eslintrc.js

module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  extends: ['airbnb-base', 'plugin:import/recommended', 'plugin:import/errors', 'plugin:import/warnings', 'prettier'],
  plugins: ['import', 'prettier'],
  parser: '@babel/eslint-parser',
  parserOptions: {
    requireConfigFile: false,
    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: {
    'prettier/prettier': 'warn',
    'no-undef': 'off',
    'camelcase': ['warn', { ignoreDestructuring: true }],
    'class-name-casing': 'off',
    'no-console': ['warn', { allow: ['warn', 'error'] }],
    'no-debugger': 'error',
    'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
    'no-empty-interface': 'off',
    'no-use-before-define': ['error', { functions: false }],
    'no-useless-constructor': 'error',
    'prefer-const': 'error',
    'prefer-destructuring': [
      'error',
      {
        AssignmentExpression: {
          array: false,
          object: false,
        },
        VariableDeclarator: {
          array: false,
          object: true,
        },
      },
      {
        enforceForRenamedProperties: false,
      },
    ],
    'no-const-assign': 'error',
    'no-new-object': 'error',
    'no-prototype-builtins': 'error',
    'no-array-constructor': 'error',
    'array-callback-return': 'warn',
    'prefer-template': 'error',
    'no-useless-escape': 'error',
    'wrap-iife': ['error', 'outside'],
    'space-before-function-paren': [
      'warn',
      {
        anonymous: 'always',
        named: 'never',
        asyncArrow: 'always',
      },
    ],
    'no-param-reassign': [
      'warn',
      {
        props: true,
        ignorePropertyModificationsFor: [
          'acc', // for reduce accumulators
          'accumulator', // for reduce accumulators
          'e', // for e.returnvalue
          'ctx', // for Koa routing
          'req', // for Express requests
          'request', // for Express requests
          'res', // for Express responses
          'response', // for Express responses
          '$scope', // for Angular 1 scopes
          'staticContext', // for ReactRouter context
          'state', // for Vuex
        ],
      },
    ],
    'no-confusing-arrow': 'warn',
    'no-dupe-class-members': 'error',
    'no-iterator': 'warn',
    'dot-notation': 'warn',
    'one-var': ['warn', 'never'],
    'no-multi-assign': 'error',
    'no-unused-vars': [
      'warn',
      {
        args: 'after-used',
        ignoreRestSiblings: true,
        argsIgnorePattern: '^_.+',
        varsIgnorePattern: '^_.+',
      },
    ],
    eqeqeq: ['warn', 'always'],
    'no-case-declarations': 'error',
    'no-nested-ternary': 'warn',
    'no-unneeded-ternary': 'warn',
    'no-mixed-operators': [
      'error',
      {
        groups: [
          ['%', '**'],
          ['%', '+'],
          ['%', '-'],
          ['%', '*'],
          ['%', '/'],
          ['&', '|', '<<', '>>', '>>>'],
          ['==', '!=', '===', '!=='],
          ['&&', '||'],
        ],
        allowSamePrecedence: false,
      },
    ],
    'no-else-return': [
      'warn',
      {
        allowElseIf: false,
      },
    ],
    'no-new-wrappers': 'warn',
    indent: [
      'warn',
      2,
      {
        SwitchCase: 1,
        VariableDeclarator: 1,
        outerIIFEBody: 1,
        FunctionDeclaration: {
          parameters: 1,
          body: 1,
        },
        FunctionExpression: {
          parameters: 1,
          body: 1,
        },
        CallExpression: {
          arguments: 1,
        },
        ArrayExpression: 1,
        ObjectExpression: 1,
        ImportDeclaration: 1,
        flatTernaryExpressions: false,
        ignoreComments: false,
      },
    ],
    'linebreak-style': ['warn', 'unix'],
    'import/extensions': 'off',
    'import/no-unresolved': 'off',
    'no-plusplus': 'off',
  },
}

.prettierrc.yml

这里用的yml格式,用js格式一样可以,需要修改一下内容格式

# 一行最多 100 字符
printWidth: 120
# 使用 2 个空格缩进
tabWidth: 2
# 不使用缩进符,而使用空格
useTabs: false
# 行尾需要分号
semi: false
# 使用单引号
singleQuote: true
# 对象的 key 仅在必要时用引号
quoteProps: as-needed
# jsx 不使用单引号,而使用双引号
jsxSingleQuote: false
# 末尾需要逗号
trailingComma: all
# 大括号内的首尾需要空格
bracketSpacing: true
# jsx 标签的反尖括号需要换行
jsxBracketSameLine: false
# 箭头函数,只有一个参数的时候,不需要括号
arrowParens: always
# 每个文件格式化的范围是文件的全部内容
rangeStart: 0
# 不需要写文件开头的 @prettier
requirePragma: false
# 不需要自动在文件开头插入 @prettier
insertPragma: false
# 使用默认的折行标准
proseWrap: preserve
# 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: css
# 换行符使用 lf
endOfLine: lf
# 后缀文件名特有规则
overrides:
  - files: '*.{wxss,scss}'
    options:
      parser: scss
  - files: '*.json,.*rc'
    options:
      parser: json
  - files: '*.{wxml,html}'
    options:
      parser: html
      htmlWhitespaceSensitivity: strict
  - files: '*.wxs'
    options:
      parser: babel
# 是否格式化一些文件中被嵌入的代码片段的风格,如果插件可以识别。
embeddedLanguageFormatting: auto
# 在Html,Vue,JSX中是否强制每条属性占用一行。
singleAttributePerLine: false

4.微信开发工具设置prettire支持的文件格式

打开setting.json

添加或修改以下内容

    "prettier.documentSelectors": [
      "**/*.wxml ",
      "**/*.wxss",
      " **/*.wxs"
    ],
    "[wxml]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
相关推荐
说私域1 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8681 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165022 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦9 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac12 小时前
微信小程序的组件
微信小程序
stormjun13 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck13 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23416 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong16 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟16 小时前
小程序跳转另一个小程序
小程序