虽然微信开发者工具是基于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,// classclasses: 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: htmlhtmlWhitespaceSensitivity: 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"},